【HTML入門】タグで作る！初心者でもできる「絶品カレーのレシピ」ページの作り方

2025年3月1日2025年10月12日

HTMLを学び始めたばかりの人の中には、「タグって難しそう」「どこから手をつけたらいいの？」と感じる方も多いのではないでしょうか。
でも安心してください。HTMLの基本は、たった数種類のタグを理解するだけで、簡単なWebページを作れるようになります。

この記事では、実際に「絶品カレーのレシピページ」を作りながら、h1・p・li・ol・imgなどの基本タグを使ってHTMLを楽しく学ぶ方法を紹介します。
Visual Studio CodeとLive Serverを使って確認できるので、初心者の方でもすぐに実践できます。

HTMLファイルを作成しよう

まずはWebページを作るための準備をしましょう。
HTMLは「.html」という拡張子のファイルにコードを書いていきます。ファイル名は「index.html」とするのが一般的です。

Visual Studio Codeを開き、新しいフォルダを作成してその中に「index.html」を作りましょう。
これが、あなたのWebページの“土台”になります。

コードを書くまでの流れは、【 Live Server が表示できない！！】VS code初心者あるある対処法　←こちらからフォルダを作ってスタートしましょう！

HTMLの基本構造は、「ページ全体を囲むhtmlタグ」「情報をまとめるheadタグ」「実際に表示される内容を入れるbodyタグ」で構成されます。
この3つが理解できれば、すべてのWebページに応用できます。

HTMLで作る絶品カレーのレシピ

できあがりイメージです。HTMLのコードのみで作成したページです。一緒に作業しながらタグについて学習していきましょう！

タグの基本を理解しよう

<body>の中に、「タイトル（見出し）」「材料」「作り方」を書いてみましょう！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

これをウェブ表示させると、改行されずに、くっついたまま横一列に表示されてしまいます。では、「見出し（タイトル」）「材料」「作り方」に区切って表示させてみましょう！

ウェブ表示アプリで表示させたい方はこちら↓↓↓
Live serverダウンロード←はこちらから
Live server使い方←はこちらから

見出しタグ（h1〜h3）

HTMLのタグは、ページの意味や構造を伝えるための「記号」です。

たとえば、この記事のタイトル部分「【HTML入門】タグで作る！初心者でもできる『絶品カレーのレシピ』ページの作り方」がh1にあたります。

h2やh3は、内容を細かく整理するときに使いましょう。

区切りを作るために必要なのがタグです。では、見出し（タイトル）である「絶品カレーの作り方」を表示させてみましょう。
見出しに使うタグは　<h1>　です。なので、開始タグ<h1>と、閉じタグ</h1>の間に「絶品カレーの作り方」と入れます。
<h1>絶品カレーの作り方</h1>
と入力、保存し、ウェブ表示させるとこうなります。見出しなので大きく表示され、改行もされています。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

ちなみに、 <h1>< h2>< h3>と数字が大きくなると、表示される文字は小さくなります。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

段落は < p >タグ

文章をまとめるときに使うのがpタグです。
「1つの文のかたまり」を表すタグなので、説明文やストーリーを入れるときに便利です。

ここでの <p> タグは「材料」です。
<p> 材料 </p>
と入力、保存すると、「材料」の文字だけで区切られ、自動改行されて見やすくなります。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

リストタグ（li・ol・ul）

< ul > < li > タグ

次は「材料の名前」のリストを作ります。リストを作るには、<ul>タグの中に「材料の名前」を個別に <li> タグで囲みます。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

「材料の名前」の左側に黒丸・が付き、材料が縦に並びます。
黒丸が付くことで、リストであることをコンピュータが認識します。

「作り方」も <p> タグを使って段落を分けます。
<p> 作り方 </p>
と入力、保存すると、「作り方」の文字だけ区切られ、自動改行されて見やすくなります。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

次は「作り方の内容」ですが、これもリストの <li> タグ を使います。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

「材料の内容」の時と同じように、黒丸・が左側についたリストができあがります。
しかし、作り方には順番があるので、黒丸・を番号に変えましょう！

順番付きリストは < ol > タグ

順番をつけたいときは、 リスト <li> タグ全体 を <ol> タグで囲みます。<ul>タグを <ol> タグに変更します

たったこれだけで、黒丸・が数字に変わります！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

最後に段落 <p> タグで「完成」を囲みます。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

写真を入れるタグ

前回の学習した写真タグ　<img> タグです。<img> タグか空要素なので閉じタグがありません。
・前回の記事はこちら→【写真を入れるタグ <img> は、なぜ開始タグしかないの？】
では、見出しの下に写真を入れてみましょう！

・見出しの下に　img と入力します。すると、img タグの候補がいくつか出てきます。