はじめてのWeb開発 HTMLとCSSで自分のページを作ろう
第 3 章

HTMLを書いてみよう
― 自己紹介ページを作る

この章では、第2章で学んだタグを使って自己紹介ページを実際に作ります。 コードを少しずつ追加しながら、ブラウザで確認する流れを体験しましょう。

この章の進め方
コードを一気に書き上げるのではなく、少し書いてはブラウザで確認を 繰り返します。変化が目に見えるので、何をしているかわかりやすくなります。

完成イメージ

この章が終わると、次のようなページができあがります。

▼ 完成プレビュー（CSSなし・ブラウザの素の表示）

山田 花子

はじめまして！自己紹介ページへようこそ。

基本情報

  • 名前：山田 花子
  • 出身：東京都
  • 趣味：読書・料理・散歩

好きなもの

私が好きなものを紹介します。

  1. コーヒー
  2. SF小説
  3. 猫

ひとこと

Web制作をゼロから勉強中です。
よろしくお願いします！

リンク

おすすめのWebサイトはこちら

CSSはまだなのでシンプルな見た目ですが、 第5章でデザインをつけると一気に見栄えが変わります。楽しみにしていてください！

STEP 1 ― ファイルを用意する

第1章で作った index.html は練習用です。 今回は自己紹介ページ専用のファイルを新しく作りましょう。

  1. VS Code を開き、C:\xampp\htdocs\practice フォルダを表示する。
  2. 左パネルで「新しいファイル」アイコンをクリックし、 ファイル名を profile.html と入力してEnterを押す。
  3. 右側のエディタに次のテンプレートコードを入力して、 Ctrl + S で保存する。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介 | 山田花子</title>
</head>
<body>

  <!-- ここに内容を書いていく -->

</body>
</html>
<title> の「山田花子」の部分は、あなたの名前に変えてください。 以降のコードも同様に、名前・出身・趣味などは自分の情報に書き換えて構いません。

ブラウザで確認する

  1. XAMPPのApacheが起動していることを確認する。
  2. ブラウザで http://localhost/practice/profile.html を開く。
  3. 今はまだ何も表示されない真っ白なページでOKです。

STEP 2 ― 名前と導入文を書く

まず、ページの一番上にくる名前（大見出し）と、 ひとこと挨拶を追加します。 <body> と </body> の間に書いてください。 

<body>

  <h1>山田 花子</h1>
  <p>はじめまして！自己紹介ページへようこそ。</p>

</body>
コード内のオレンジの行が今回追加する部分です。 すでにある <body> と </body> はそのまま残して、 その間に追加してください。

保存してブラウザを更新（F5 キー）してみましょう。

▼ STEP 2 の表示結果

山田 花子

はじめまして！自己紹介ページへようこそ。

ブラウザを更新（F5キー）しないと変更が反映されません。 コードを書いて保存したら、必ずF5で更新する習慣をつけましょう。

STEP 3 ― 基本情報を箇条書きで追加する

次に「基本情報」という見出しと、箇条書きリストを追加します。 前のコードの続きに書いてください。 

<h1>山田 花子</h1>
<p>はじめまして！自己紹介ページへようこそ。</p>

<h2>基本情報</h2>
<ul>
  <li>名前：山田 花子</li>
  <li>出身：東京都</li>
  <li>趣味：読書・料理・散歩</li>
</ul>
▼ STEP 3 の表示結果

山田 花子

はじめまして！自己紹介ページへようこそ。

基本情報

  • 名前：山田 花子
  • 出身：東京都
  • 趣味：読書・料理・散歩

STEP 4 ― 好きなものを番号リストで追加する

今度は順番あり（番号）リストを使います。 「好きなものランキング」のように順位がある場合は <ol> が自然です。 

<!-- 前のコードの続き -->

<h2>好きなもの</h2>
<p>私が好きなものを紹介します。</p>
<ol>
  <li>コーヒー</li>
  <li>SF小説</li>
  <li>猫</li>
</ol>
▼ STEP 4 で追加される部分

好きなもの

私が好きなものを紹介します。

  1. コーヒー
  2. SF小説
  3. 猫

STEP 5 ― ひとことと強調を追加する

自由に一言書く欄を追加します。 ここでは <strong> と <br> も使ってみましょう。 

<!-- 前のコードの続き -->

<h2>ひとこと</h2>
<p>Web制作を<strong>ゼロから</strong>勉強中です。<br>
よろしくお願いします！</p>
▼ STEP 5 で追加される部分

ひとこと

Web制作をゼロから勉強中です。
よろしくお願いします！

<strong>ゼロから</strong> の部分が太字になっています。 <strong> タグは <p> タグの中に入れることができます。 このように、タグの中に別のタグを入れることを入れ子（ネスト）といいます。

STEP 6 ― リンクを追加する

好きなWebサイトへのリンクを追加してみましょう。

<!-- 前のコードの続き -->

<h2>リンク</h2>
<p><a href="https://www.google.com" target="_blank">おすすめのWebサイトはこちら</a></p>
▼ STEP 6 で追加される部分

リンク

おすすめのWebサイトはこちら

target="_blank" をつけることで、リンクが新しいタブで開きます。 自分のページから離れさせたくないときに便利です。 好きなサイトのURLに変えてみてください。

完成したコードを確認しよう

ここまでの作業で profile.html はこのようになっているはずです。 自分のコードと見比べて、抜けているところがないか確認しましょう。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介 | 山田花子</title>
</head>
<body>

  <h1>山田 花子</h1>
  <p>はじめまして！自己紹介ページへようこそ。</p>

  <h2>基本情報</h2>
  <ul>
    <li>名前：山田 花子</li>
    <li>出身：東京都</li>
    <li>趣味：読書・料理・散歩</li>
  </ul>

  <h2>好きなもの</h2>
  <p>私が好きなものを紹介します。</p>
  <ol>
    <li>コーヒー</li>
    <li>SF小説</li>
    <li>猫</li>
  </ol>

  <h2>ひとこと</h2>
  <p>Web制作を<strong>ゼロから</strong>勉強中です。<br>
  よろしくお願いします！</p>

  <h2>リンク</h2>
  <p><a href="https://www.google.com" target="_blank">おすすめのWebサイトはこちら</a></p>

</body>
</html>

うまく表示されないときは

ブラウザの表示がおかしい場合、よくある原因はこちらです。

症状 よくある原因
ページが真っ白のまま変わらない Ctrl+Sで保存していない、またはF5で更新していない
文字化けしている <meta charset="UTF-8"> が抜けている
タグがそのまま文字として表示される < や > が全角になっている
見出しが途中から効かなくなった どこかで終了タグ（例：</h2>）を書き忘れている
ページが開かない（エラー） XAMPPのApacheが起動していない、またはURLを間違えている
VS Code でのチェック方法
VS Code はタグの色分けをしてくれます。 閉じていないタグがあると色の付き方がおかしくなるので、 コードを見て「色がずれているな」と感じたら終了タグを確認しましょう。

チャレンジ ― もっと自分らしくしよう

基本ができたら、次のことに挑戦してみましょう。 すべてこの章で学んだタグだけで実現できます。

この章のまとめ

自己紹介ページのHTML部分が完成しました！ 次の第4章ではCSSを学び、デザインする準備をします。