@blog.justoneplanet.info

■作業フロー

1.ワイヤーフレーム（orカンプ）を用意する

ここで3カラムや2カラムレイアウトなど決定

ワイヤーフレームとは枠組みだけでデザインしたものは含まれない

カンプとはphotoshopやfiireworksなどで作った静止画像で完成イメージ画像

2.XHTML制作（意味上のタグを中心）

ページに掲載する文字情報に見出しや段落といった意味づけをする（ここは経験が出る部分でもあり侮ってはいけない）

3.div要素を1番で用意した画像にidやclassとセットで書き込む

いわゆる「まとまり（ヘッダー、フッター、メニューバー）」を画像上で括る

4.HTMLに3番の通りに反映

<div id=”header”>などとし、HTML上で括っていく

5.CSSを編集

ページ内の部品ごとにCSSを分けるといった構築方針も決める

6.必要環境でレンダリング

文字の大きさを変えたりして入念にチェック

7.表示の不具合が発生した箇所についてCSSを調整

CSSハックはあくまでも最終手段とし、ハックの基準も決めておく

※但し、クロスブラウザ対策は思ったより面倒なので見捨てるブラウザも考慮する

■CSSレイアウトのメリットとデメリット

メリット

・スタイル管理の効率化

HTMLファイル内でなく外部ファイル化されている場合、別個にファイルを開き修正しなくて良い

場合によっては1箇所の修正で全HTMLファイルに適応できる

・広範なユーザーへの適合

ハンドヘルドディスプレイやテレビなどメディアに応じたcssを別個に指定できる

・デザインクォリティの向上

各要素に背景が別個に指定できる

line-heightで行間を調整し読みやすくできる

デメリット

・コーディングにかかる作業時間の増加

ターゲットブラウザの個数による（web標準に準拠しているIE7、Safari、Firefoxなどは大きく問題にならないが、IE6などブラウザごとの表示の違いを吸収する時間は意外にかかる）

■文章構造の整理について

・構造化の重要性

機械処理が可能になり、大量の情報の選別、ユーザーに恩恵がある

・div等による要素のグループ化（ヘッダー、フッター等）

構造をより詳細に定義できる

段組レイアウトへの補助