HTMLマークアップの流れとJavascript
昔ながらのWeb屋（そんなものがあるのかどうかは別にして）だったおれの勤務先も、RSSとかに取り組みはじめたりして、だんだんと開発主導でインターネット標準対応なんかを重視するようになってきた。
そこで難しいのが画面のHTMLマークアップ。
PHP＋Smarty＋Dream Weaver Templateで作業しているのだけど、Javascriptとかが入ってくるとどうも混乱しがち。
とりあえずベースができてないと、もう収拾がつかない。そんな意味でこの記事はとても参考になった。
↓
↓
サイトデザインにはいろんな方法がある。客観的にこの方法がベストだ、と言うのはとてもじゃないけど無理だ。きょうはTommyの作業プロセスをみてみることにしよう。インフォメーションアーキテクチャー
デザインのことを考える前に、僕はたいてい長い時間とエネルギーを使って、サイトの情報構造について考えてる。これは、ちっちゃなサイトについて言えば、情報をロジカルグループに分類していく作業のこと。
それからこの作業には,どんなページが含まれるべきか、ナビゲーションはどのようにすべきか、なんかについて考えることも含まれてる。例えば、何階層にするかとか、静的なメニューだけでいいのかそれともサブメニューが必要なのかとか、そんなこと。
構造とマークアップ
情報構造について考え終わったら、次に「テンプレート」を作る。運がいいときは一個作ればすむけど、たいていはもっとたくさんになっちゃう。
まずは、トップページとかじゃなくて、一番典型的な構造のページからはじめる。トップページってたいていは他のページと全然構造が違うから。
サイト内の典型的なページってのは、詰めていくとだいたいこんな感じの要素でできてる。
・サイト名とロゴタイプ
・メインのナビゲーション
・サブのナビゲーション
・検索フォーム
・コンテンツ
・フッターで、見出しとか、段落とか、リストとか、(X)HTMLに定義される論理的なマークアップだけを使って、上の要素を詰め込んだサンプルを作る。
ついでに、ドキュメントタイプもここで決めちゃう。たいていはHTML 4.01 Strictにするけど、サーバーサードのスクリプトをつかえるとか、なんか事情があるときは、XHTML 1.0 Strict や XHTML 1.1にすることもある。
プレビュー
ここまで作業したらとりあえず下のようなことに気をつけながらMozillaとLynxで見てみる。
・各要素がわかりやすい順番でならんでるか？
・コンテンツとナビゲーションとを区別しやすいようになってるか？
・タブキーを押したときに検索フォームは適切に動作するか？デザイン
ようやく一番楽しいところにきた。カンプ通りに仕上げなきゃいけない場合もあるし、試行錯誤していいときもあるけど、どっちにしてもここではじめてCSSに手を入れる。
僕はたいてい一番最初に、パディングとマージンを全部ゼロにしちゃう。そして、基本になる色とフォントを決める。フォントはパーセンテージ指定で。ついでにIEのバグの回避策もちょびっとだけ。
レイアウトは普通、２つかそれ以上の縦列でできてる。メニューの縦列が短いのがわかってるときはポジション使うこともあるけどだいたいは、フロートと負のマージンでレイアウトする。
CSSのルールを加えるたびにMozillaでチェック。ちょっと手の込んだことをしたらOperaで確認してみることもある。
いくつかの要素にIDを加える。
CSSルールの追加時には、HTML基本要素など、できるだけ一般的な要素からはじめる。クラスを追加したいと思ったときでも、CSSの継承セレクタを使ってなんとかなるのであればそうする。
不要な問題を起こしたくないので、幅を明示的にした要素に対して、パディングやボーダーの指定を追加するのは避けるようにしてる。
これで、IEのボックスモデル誤解釈の問題に頭を悩まされずにすむ。わりと重要なTIPS。みんな忘れがちだけど「a:focus」にスタイル（背景色を反転させるとか）をあてる。これで、なんらかの理由でマウスを使わないユーザーが、タブキーをつかってリンクを探せるようになるから。IEでは通用しないけど、かわりに「a:active」にあててやればいい。
バグ修正
レイアウトに満足したら、ちょっとダルいけどIEの主要なバグをつぶす作業にはいる。
これまで作業してきたファイルとは別のCSSファイルを作成して、元ファイルの中からブラウザ判定して呼び出すようにすれば、モダンなブラウザ側ではこのIE用のファイルの中身を気にしなくてすむ。
とりあえずIEのいちばんヤバいところからとりかかるのがてっとりばやい。float絡みが致命的だけど、ほとんどの場合「display:inline;」を加えてやれば治る。
あと、時にはMacIEにも対応しなくちゃならない。その場合はこうやって呼び出す。
印刷用スタイルシート
印刷用のスタイル作るやりかたは２パターンある。
１、メインのスタイルに補足する
２、メインのスタイルを置き換えるでも、２の方がかんたん。
ポイントは、白黒、もしくはグレースケールで意味のあるデザインにすることと、ナビゲーションみたいに印刷しても意味がない要素に「display:none;」をあてること。
スクリプト
スクリプトがいるときには最後に作る。僕はHTMLのマークアップにはイベント属性は使わないで、スクリプトファイル側にイベントハンドラを作る。できるだけ構造、表示、振る舞いを分離しときたいからね。
バリデーション
モダンブラウザやIEでの表示確認が一通りできたら、バリデーションにかけて、文法ミスを修正する。
テンプレート化
それから、ページをテンプレート化して、他のページをそこから作れるようにする。
個別のページをいじってて、新しいスタイルを作らなきゃいけないときもある。その時はCSSファイルに戻ることになるけれど、ターゲットブラウザでの検証や印刷用スタイルシートを忘れないようにしよう。
画像を使うときは、テキストブラウザでも検証しようね。
まとめ
まずはHTML上の意味的なマークアップから初めて、標準的なCSSによるグラフィックデザインに移り、最後にブラウザバグに対応する。
これは僕のやり方であって常に通用するわけじゃないと思うけど、少なくても僕についてはうまくいってる。
フォトショップのカンプからテーブルレイアウトに画像を切り出していくやり方と比べて何がいいか？
意味的なマークアップから入ることで、CSSやJavascriptなしでページを見なきゃいけないユーザーに対しても、きちんと意味が通じて動作するページになる。検索エンジンに対しても、意味が通じるページになるよね。テーブルレイアウトだとこれはけっこう難しい。
IEで見えるようにデザインしていくやり方と比べて何がいいか？ 標準的に作ってちょびっと直せばいいのと、いびつに作って標準に合わせていくのだったら、前者のほうが簡単だから。
みんなはどうやってますかー？
bAの森田さんとかもこんな記事を書いていたような。技術評論社のサイトを、、みたいな。どの雑誌だったっけ。。
勤務先での流れは、できるだけ上記に従いつつ「テンプレート化」のところでDream Weaver Templateを使う感じ。成果物はCVSに格納。
が、Ajaxの画面遷移とかが考えられない。上記の流れよりもっと前のタイミングでJavascriptの構造とか考えなきゃいけなそう。
下の記事とかに共感しつつ、結論は出ない。
・デザイナは、Webアプリケーション実現を考えたデザインをする（CSSの複雑度＝ブロック要素のidへの依存性を構築してしまうのは、この人だし）
・コーディングする人は、できるだけ独立性の高いCSS記述を心がける・・・で良いのかな。あまり断言できないけど。エンジニア視点からだと、tableタグ汚染とかbodyタグ汚染とか（このレベルでマージンを記述されて、tableを追記すると変な隙間があいて戸惑うとか）をどう解決するか？ってのがあります。
・エンジニアは、コーディング、デザインからCSSを理解し、うまくコントロールする。理想的にはこれらの関係が、あるべきベストプラクティスに従っていけば、役割間の調整で苦労することはないですが、そのベストプラクティスが、少なくとも僕は、まだ模索中ですね。こういうのがマネジメントも含めて組織のノウハウ、力だと思います。まずは、HTMLコーダー（いわゆるマークアップエンジニアですね）の重要性の再認識からだと思います。
そんなわけで会社ではHTML＋Javascriptできて、UI提案できるコーダーさん（いるのか？）を募集中だ。だれか一緒に苦労しましょう。。
