2010年4月8日　page:1/7

内田 順一＝Chime of Shigan代表取締役

• Tweet
• 
• 
• 

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

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

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

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

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

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

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

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

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

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

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

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

　と書きます。

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

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

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

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

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

連載目次（新着順）

• 【最終回：CSSトレーニング編】　Lesson11　3段組みのレイアウト
• 【第11回：CSSトレーニング編】　Lesson10　2段組みのレイアウト
• 【第10回：CSSトレーニング編】　Lesson9　ヘッダーメニュー
• 【第9回:CSSトレーニング編】　Lesson8　ボタンメニュー
• 【第8回：CSSトレーニング編】　Lesson7　点線で区切ったメニュー

 目次一覧へ

関連記事

検索中

【第10回：CSSトレーニング編】　Lesson9　ヘッダーメニュー

column_LEAF

1021903

キーワード

デュアルディスプレイで快適な仕事環境を構築