PR

【1. ヘッダーはWebページの顔!】

 今回は、Webページの先頭に位置するヘッダーを作ります。

 ヘッダーは、そのWebサイトのビジュアル・イメージを決める大事な要素です。複雑に作り込んだデザインのWebサイトもたくさんありますね。

 しかし、見た目に惑わされずに、文書の構造を分解していけば、以下のような「或る猫達の物語」というタイトル部分と、「猫を愛する皆様へ」「サイトマップ」「メール」というメニュー部分ぐらいで構成されているのが通例ではないでしょうか。

[画像のクリックで拡大表示]

 今回はこれをサンプルとして、制作方法を解説していきます。

 まずは、以下からサンプルファイルをダウンロードしてください。HTMLファイルや画像ファイル、CSSファイルが入っています。さらに、HTMLファイルを分かりやすく説明しているPDFファイルも同梱しています。

HTMLファイル・説明PDFファイルなどをダウンロード

 では次のページから、前回までと同様、HTMLファイルの書き方から始めます。

2. HTMLファイルはこれまでと同じ

 HTMLファイルを書くにあたり、まずはどんな文書構造になっているのかを見極めます。

 前ページで申し上げた通り、このヘッダーは「或る猫達の物語」という見出し部分と、「猫を愛する皆様へ」「サイトマップ」「メール」というメニュー部分とで構成されています。つまり、これまでと同様、“見出し+個条書き”という構造に変わりありません。

 よって、HTMLファイルには、

<div id="head">
  <h1>或る猫達の物語</h1>

  <ul>
    <li><a href="abc.html">猫を愛する皆様へ</a></li>
    <li><a href="def.html">サイトマップ</a></li>
    <li><a href="ghi.html">メール</a></li>
  </ul>
</div>

 と書きます。

 見出しと個条書きを、<div>タグを使ってグループ化し、idで「head」という名前を付けて固有化しています。

 これまでのサンプルとはまったく見た目は異なりますが、文書構造としては同じなので、HTMLファイルの記述も同じになるわけですね。

 なお、これまでの見出しは「小見出し」の扱いで<h3>タグで囲っていました。しかし、「或る猫達の物語」という見出しは、このWebページ自体のタイトルであるため、見出しのランクを上げて「大見出し」として扱いたいので、<h1>タグで定義しています。

 HTMLファイル側は、これでほとんど完成です。

 あとはCSSファイル側の設定となります。