| XHTML＋CSSでWebサイトを構築する方法 |
文書構造重視のマークアップを考える
タグの役割を考えてマークアップする
マークアップでもっとも大切なことは、正しい文書構造で記述することだ。正しい文書構造ができてこそ、CSSをより効率的に定義することができる。破たんし矛盾した文書構造では、思いどおりのマークアップはできない。それをふまえたうえで、入れ込んだ文字要素・画像に対してマークアップを行っていこう。
まずは見出しについてだが、XHTMLにおいては「1」をもっとも最上位とする「6」までのレベル分けがされた＜h＞要素を用いる。重要度に応じて適時使い分けよう。ここではサイトタイトルである「FACTORY of DREAM」を最重要要素として＜h1＞をマークアップしたが、タイトルロゴはつねに＜h1＞になるわけではなく、あくまでそのコンテンツ内で最重要に値する要素を高いレベルにすることを意識してほしい。場合によってはサイトタイトルではなく、コンテンツの見出しも＜h1＞になる可能性はあり得るのだ。重要度については個々に変わってくるため、一概にこれと決まってはいないのである。
グローバルナビゲーションとは、このサンプルにもいえることだが、往々にして連なったリスト形式のものが多い。このようなリスト要素については＜ul＞要素、＜li＞要素を用い、リストとして明示化することが最適である。なお、＜ul＞は順不同のリストを表すもので、順番が指定されているものは＜ol＞を用いる。これらの子となる＜li＞には、ブロック要素やインライン要素など、さまざまな要素を内包できるが、＜ol＞,＜li＞要素には＜li＞のみしか子要素として入れることができないので注意してほしい。
タイトルロゴとナビゲーションの下には、ビジュアル的な要素として画像が置かれている。この画像には見た目のみの役割しかなく、特に伝えるべき要素もないためaltを空とした。
次にコンテンツには、見出しと本文が見える。見出しには＜h2＞要素を使い、本文には＜p＞を用いた。＜p＞は「paragraph」の頭文字で、段落を意味する要素である。そして、コンテンツを移動できるナビゲーションとして［Next］ボタンが配置されるので、これを＜ul＞、＜li＞でマークアップした。ここでなぜ単一の要素であるのにリストを用いたのか疑問に持つかもしれないが、これは今後ページが増えていく段階で［back］ボタンが追加されることが予想されるためだ。つまり、ここであらかじめリストにしておくことで、汎用性を高め効率を上げることができる。最後にコピーライト表示である。これは＜p＞でマークアップした。画像のalt属性には忘れずにその画像がコピーライトであることを示す文言を入れておこう。
グループ化とid、classの割り振り
すべての要素をマークアップできたら、＜div＞要素を使ってグループ化していく。それぞれ、headerとしてタイトルロゴとグローバルナビゲーションおよびメインイメージを、contentとしてコンテンツナビゲーションと見出し、本文を内包し、footerにコピーライトを＜div＞でくくった。最後に、全体を＜div＞でくくり、グループ化は完了する。
各要素には属性であるid,classを割り振ってある。これは、のちにスタイルを適用する際に使用するが、でたらめにつけるのではなく、適時それに応じて割り振る。ここで簡単にid,classの違いについて触れておこう。まず注意したいのは、idは固有の識別子であり、ひとつのHTMLファイル内に2カ所以上割り振ることができない。これを応用することでアンカーとして利用することもできる。classは、複数の要素の間で共有することができ、なおかつ複数のclassを指定することも可能だ。複数のクラスをひとつの要素に適用する場合には、半角空白で区切る。id,classの割り振りはのちのスタイル適用に大きくかかわる部分であるため慎重に行いたい。ここまででマークアップはひとまず完了だ【3】。
【3】マークアップが終わったXHTMLファイル
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
