HTML & CSS

ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL07トップページのHTMLコーディング

  1. 最終更新日：
  2. 公開日：

今回は、前回作成した「index.html」にトップページのHTMLをコーディングしていきます。

この記事のポイント

  • トップページのコンテンツをグループ単位で分けて考える
  • HTMLを作ってページの骨格を作る

トップページの骨組みを作る

前回はHTMLの宣言と、html要素、head要素、body要素を書きました。
ここまでは「HTMLのお約束」のコードで、どんなページをコーディングするときも必ず必要になります。

そして今回はbody要素の中にトップページのコンテンツのHTMLを書いていきます。
前回イメージしたトップページの4つのグループを頭に入れながら、コーディングしていきましょう。

トップページの構造のイメージ
トップページの構造のイメージ

今回ページをコーディングしていくにあたって、以下のキツネの画像「fox.png」を使用します。
あらかじめこちらからダウンロードしてください（※リンクをクリックするとダウンロード開始します）。

ダウンロードした画像はprofileフォルダの中の「index.html」と同じ階層に入れてください。

profileフォルダ内に画像を配置
profileフォルダ内に画像を配置

トップページのHTMLファイル「index.html」をテキストエディタで開いて、HTMLを書いていきましょう。
まずは先程のイメージから、トップページのアウトラインを書いていきます。
以下のコードのうち、赤いコードが追記したコードになります。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
    <header id="header">
    </header>
    <main>
      <section id="content1">
      </section>
      <section id="content2">
      </section>
    </main>
    <footer id="footer">
    </footer>
  </body>
</html>

追記したHTML要素と各グループの対応は以下のようになります。

HTMLと各グループの対応イメージ
HTMLと各グループの対応イメージ

引き続き、グループごとにHTMLをコーディングしていきます。

ヘッダーのHTMLを書く

最初に、最上部にあるヘッダー部分からHTMLをコーディングしていきます。

ヘッダーのコーディングイメージ
ヘッダーのコーディングイメージ

「index.html」のheader要素の中に、ヘッダー部分のコードを書いていきましょう。
赤いコードが追記したコードです。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
    <header id="header">
      <p class="logo"><a href="#">PROFILE</a></p>
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">お知らせ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="content1">
      </section>
      <section id="content2">
      </section>
    </main>
    <footer id="footer">
    </footer>
  </body>
</html>

ヘッダーで使っているHTML要素は以下の5種類です。

  • p要素 - テキスト（パラグラフ）が入る要素
  • a要素 - リンクを設定する
  • nav要素 - ナビゲーションのリンク一覧を示す要素
  • ul要素 - リストを書くための要素。子要素としてli要素が入る
  • li要素 - リストの項目を書くための要素

いずれのHTML要素も頻繁に使いますが、特に重要なのはリンクを設定するa要素です。
この要素にはサイト内リンクや外部サイトへのリンクなど、あらゆるページのリンクを記述するときに使います。

p要素に記述した「class="logo"」はclass属性と呼び、後ほどCSSでスタイルを適用するときに使用します。
この時点では書いても何も起こりませんが、ラベル付けのようなものと考えてください。

コンテンツ1のHTMLを書く

引き続き、コンテンツ1のHTMLを書いていきます。
コンテンツ1は次のように画像とテキストが入るボックスが横に並ぶイメージです。

コンテンツ1のコーディングイメージ
コンテンツ1のコーディングイメージ

「index.html」に以下のコードを入力してください。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
    <header id="header">
      <p class="logo"><a href="#">PROFILE</a></p>
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">お知らせ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="content1">
        <figure><img src="./fox.png" alt="プロフィール画像"></figure>
        <div class="text_area">
          <h1>こんにちは！</h1>
          <p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください！</p>
        </div>
      </section>
      <section id="content2">
      </section>
    </main>
    <footer id="footer">
    </footer>
  </body>
</html>

コンテンツ1で使っているHTML要素は以下の6種類です。

  • figure要素 - 画像（写真、イラスト、グラフなど）が入る要素
  • img要素 - 画像を表示する
  • div要素 - 汎用的なコンテナとして使う要素
  • h1要素 - 見出しを指定する
  • p要素 - テキスト（パラグラフ）が入る要素
  • br要素 - テキストを改行する

img要素はsrc属性に画像ファイルのパス（画像のある場所）を指定すると、ページに表示することができる面白いHTML要素です。
ページ中にJPEG形式、PNG形式、GIF形式、SVG形式などの画像ファイルを表示させたいときに使います。

h1要素は見出しになるテキストをマークアップするときに使う要素です。
見出しは「大見出し」「小見出し」のように階層状態にすることができ、h1要素が一番強調したい見出し、続いて強調させる順番に応じてh2要素〜h6要素まで用意されています。
文法上は1ページに複数のh1要素を使うことが可能ですが、1ページにつきh1要素を1つにすることがSEO（検索エンジン）対策として有効とされてます。

もう1つ、重要なdiv要素を紹介します。
このHTML要素はマークアップ上は特に意味を持ちませんが、今回のような見出しとテキストを1つのコンテンツとしてまとめる目的で使ったり、レイアウトの調整で使用したりと汎用性の高い便利なHTML要素です。

今回は左側に画像、右側にテキストのコンテンツを配置しているため、div要素にはテキストが入っていることが分かりやすいように「class="text_area"」（テキストエリア）と記述しておきます。

コンテンツ2のHTMLを書く

続いてコンテンツ2のHTMLを書いていきます。
コンテンツ2は「お知らせ」。

コンテンツ2のコーディングイメージ
コンテンツ2のコーディングイメージ

「index.html」に以下のコードを入力してください。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
    <header id="header">
      <p class="logo"><a href="#">PROFILE</a></p>
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">お知らせ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="content1">
        <figure><img src="./fox.png" alt="プロフィール画像"></figure>
        <div class="text_area">
          <h1>こんにちは！</h1>
          <p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください！</p>
        </div>
      </section>
      <section id="content2">
        <h2>お知らせ</h2>
        <ol>
          <li><a href="#"><time datetime="2021-04-12">2021.04.12</time>お問い合わせページを追加しました。</a></li>
          <li><a href="#"><time datetime="2021-04-05">2021.04.05</time>プロフィールを更新しました。</a></li>
          <li><a href="#"><time datetime="2021-04-01">2021.04.01</time>PROFILEサイトを公開しました！</a></li>
        </ol>
        <p class="link_contact"><a href="">お問い合わせはこちら</a></p>
      </section>
    </main>
    <footer id="footer">
    </footer>
  </body>
</html>

コンテンツ2で使っているHTML要素は以下の6種類です。

  • h2要素 - 見出しを指定する
  • ol要素 - リストを書くための要素。子要素としてli要素が入る
  • li要素 - リストの項目を書くための要素
  • a要素 - リンクを設定する
  • time要素 - 時間の情報を入れる
  • p要素 - テキスト（パラグラフ）が入る要素

ol要素はul要素と双子のようなHTML要素です。
ol要素は「順序付きリスト（Ordered List）」をマークアップするときに使い、もう1つのul要素は「順序なしリスト（Unordered List）」をマークアップするときに使います。

もう少し具体的に言うと、ol要素の中に並ぶli要素は先頭から順番に並ぶ必要があるリストになります。
今回は「お知らせ」の一覧が入るため、時系列で並べるためol要素を使っています。
対して、ヘッダーに並べたメニューのように「お知らせ」と「お問い合わせ」の並びが逆になっても特に意味を持たないようなリストについてはul要素を使います。

time要素は時間をマークアップする要素で、テキストの日付に加えてdatetime属性に時間情報を記述します。
今回のように「2021-04-01」のように日付だけのときもあれば、「12:20」のように時刻だけだったり、「2021-04-01 12:20」とどちらも記述することもできます。

フッターのHTMLを書く

ページ最下部にあるフッターのHTMLをコーディングしていきます。

フッターのコーディングイメージ
フッターのコーディングイメージ

「index.html」に以下のコードを入力してください。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
  </head>
  <body>
    <header id="header">
      <p class="logo"><a href="#">PROFILE</a></p>
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">お知らせ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="content1">
        <figure><img src="./fox.png" alt="プロフィール画像"></figure>
        <div class="text_area">
          <h1>こんにちは！</h1>
          <p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください！</p>
        </div>
      </section>
      <section id="content2">
        <h2>お知らせ</h2>
        <ol>
          <li><a href="#"><time datetime="2021-04-12">2021.04.12</time>お問い合わせページを追加しました。</a></li>
          <li><a href="#"><time datetime="2021-04-05">2021.04.05</time>プロフィールを更新しました。</a></li>
          <li><a href="#"><time datetime="2021-04-01">2021.04.01</time>PROFILEサイトを公開しました！</a></li>
        </ol>
        <p class="link_contact"><a href="">お問い合わせはこちら</a></p>
      </section>
    </main>
    <footer id="footer">
      <p>Copyright&copy;2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

フッターはp要素が1つなので非常にシンプルです。

p要素のテキストに混ざっている「&copy;」はコピーライトの記号「©」をページに表示するためのコードです。
このような表記を「文字実体参照」と言います。
記号は直接入力するとOSや言語などの環境の違いで文字化けしてしまうことがあるため、HTMLでは文字実体参照を使って指定します。

HTMLで使用できる記号や表記についてより詳しくはこちらの記事を参照してください。
HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照） - GRAYCODE HTML&CSS

ここまでで、トップページのHTMLについてはコーディングが完了しました。
しかし今のままでは「index.html」をブラウザに表示しても無機質な文字とキツネの画像が表示されるだけです。

そこで、次回からはCSS（スタイルシート）を使ってデザイン案のようなページになるように整えていきます。

前のページHTMLファイルを作成する

次のページCSS（スタイルシート）を作成する

記事一覧

  1. HTML&CSS入門
  2. WEBサイトに必要なもの
  3. HTMLの基礎
  4. CSS（スタイルシート）の基礎
  5. どんなWEBサイトを作るか考える
  6. HTMLファイルを作成する
  7. トップページのHTMLコーディング
  8. CSS（スタイルシート）を作成する
  9. ヘッダーのCSSを書く
  10. コンテンツ1のCSSを書く
  11. コンテンツ2のCSSを書く
  12. フッターのCSSを書く
  13. お知らせページを作成する
  14. お知らせページのCSSを書く
  15. お問い合わせページを作成する
  16. お問い合わせページのCSSを書く
  17. ページをリンクで繋ぐ
  18. サーバーを用意する
  19. WEBサイトを公開する

前の記事

記事一覧

次の記事

  1. トップ
  2. HTML & CSS
  3. トップページのHTMLコーディング