| XHTML＋CSSでWebサイトを構築する方法 |
ディレクトリ構成を考えて下準備をする
必要な文字要素・イメージを整理する
このページにおける文書構造を整理していこう。ここでサンプルとして制作するサイトのトップページは、1カラムのシンプルなレイアウトとなっている【1】。ヘッダーにタイトルロゴとグローバルナビゲーションがあり、その下に画像が配置されている。コンテンツには、タイトル・本文とそれに応じた背景画像があり、右側にはコンテンツナビゲーションも見える。フッターはコピーライトのみである。
このように非常にシンプルな構造となっているレイアウトは、ある程度決まったパターンでコーディングができる。まずはHTML文書を作成し、＜body＞～＜/body＞内に必要な文字要素とイメージを入れ込んでいく【2】。なお、このサンプルではXHTML 1.0 Transitionalを選択した。また、DOCTYPEやmetaに関する詳細については省略する。ここで注意したいのは、画像を＜img＞要素を使用する際、同時にalt属性を使って代替文字を入れることだ。alt属性があれば、何らかの障害やユーザーの設定などでイメージが読み込めなくなった場合でも、代替文字を表示させることができる。もし仮に代替文字がなければ、ユーザーはそもそもそこに何か伝えたいものがあること自体わからないだろう。ナビゲーションなどで画像を使っている際は、致命的になりかねないが、特に意味もなく適切な代替が存在しない場合は、あえてalt内が空であっても問題ないため、無理に入れる必要はない。
なお、＜img＞要素にwidth属性とheight属性を設定できる。これらの属性はそれぞれの幅を指定するものであり、必ずしも入れる必要はない。しかし、現行ブラウザに搭載されている多くのレンダリングエンジンは、この属性を指定しておくことで、ドキュメントの読み込みの際に画像に必要な表示スペースを確保するため、よりスムーズにレンダリングを行えるメリットがある。
【1】シンプルなレイアウトのWebサイト
【2】ルートのsharedフォルダに「image」フォルダ、「style」フォルダをそれぞれ設置し、imageフォルダには前ページでスライスした画像を格納した。styleフォルダには、これから制作していくCSSファイルを格納していく
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
