XHTML+CSSを覚えるために昔やったこと

以前、マークアップエンジニアだったときに僕がHTMLとCSSを覚えるためにやったこと(別にこれを意識してたわけじゃないけど)を挙げてみます。
今ではレイアウトのサンプルサイトがたくさんあって、そこからソースをDLしてきて「見て覚える」のが主流なのかもしれないんだけど、たとえばPhotoshopデータを渡されて「じゃあ、これレイアウトして」って言われたらどうするのか? ということです。
考え方としては、
1.画面デザインにどんな項目があるのかを理解する
2.項目を大まかに分類する
3.大まかな分類をブロックに分けて、ワイヤフレームを考える
4.ワイヤフレームを大まかに順序付けする
5.ワイヤフレームをXHTML+CSSで書く
6.ブロックの中身をマークアップする


サービスを作るのかサイトを作るのか、また企業ホームページなのか商品の紹介ページなのか(またはPHPとかでテンプレートを作って書き出すのか/CMSに組み込むことを想定してんのか)という「使い方の違い」はあるものの、基本的な考えはこれでいいと思います。っていうか一般論というより個人的なやり方なので、そうです。
たとえばYahoo!Japanのページを作るとき。
※ここでは考え方の話なので、実際のYahooやそれに似たサイトのマークアップ構造を見ることはしません。
1.画面デザインにどんな項目があるのかを理解する
まずデザインをじっくり見て、項目を洗い出します。デザインをプリントして手書きでもいいし、ポストイットでもいいし、気になったところをメモします。
2.項目を大まかに分類する
ヘッダー、ナビゲーション、メインコンテンツ、サブコンテンツ、フッター、みたいな感じです。全体はbodyじゃなくて、ラッパーとかコンテナとか、これも大きなブロックとして考えます。
グローバルナビ、ローカルナビ、パンくずリスト、キャッチ画像、などなど。
3.大まかな分類をブロックに分けて、ワイヤフレームを考える
デザインをワイヤフレームにします。1と2をすっとばしてここに来てもOK。
4.ワイヤフレームを大まかに順序付けする
ブロックの「ヘッダー」を「div#header」、ナビゲーションを「div#gnavi」、などそれっぽい名前をつけていきます。あとで迷わないようにする意味もあるのかな。
5.ワイヤフレームをXHTML+CSSで書く
構造をそのまんまHTMLに書いていきます。divを並べるだけ。
全体のレイアウトなのでlayout.cssということで、4の構造ごとにcssを作ります。
大きさはなんとなくでOK。ブロックをなんとなくレイアウトできれば大丈夫です。余白とかでwidthは変わってくるので。
6.ブロックの中身をマークアップする
実際のデザイン要素を入れ込んでみます。
と同時にフォントの大きさや色、余白なんかも考慮して、実際のデザインに近づけます。content.cssとか。
あとは微調整。
こういうことをやっていくと、デザインを見た瞬間にワイヤーが見えてくるようになるので、だいたいのマークアップが分かってきます。
さらに、何サイト(何ページ)か作ってみると、どうやらフォントの設定や余白の作り方なんかには共通点が多いんじゃねーか、みたいに思えてくるので、CSSも「ブラウザ互換用」「フォント・リンク色設定用」「レイアウト用」「要素用」など、ファイルを分けたくなってきます。
レイアウトが出来るようになってから各ブラウザごとの差異を気にすればいいんじゃないすかね(ここでcssハックにハマってバッドノウハウを身に付けるとそれが癖になっちゃう。でもしばらくしたらそれも超えてValidなマークアップができるようになります)。
そういえば昔、会社のホームページを作るのにデザインを10案くらい出して、HTMLサンプルも10セット用意したことがあって、そのときにこういう考え方をするようになったような気がしています。
見せるときはデザインjpgじゃなくて、ちゃんと組んだHTMLで。ってやっていると、マークアップの正確さとスピードが上がります。たぶんね。

この記事には、カテゴリ CSS タグは , がつけられています。