すぃ～えすえす クォ～ディング カンテスツでの作り方ー設計篇

めっさ大事な最初の設計

どういうコーディングフローを踏んだかをかいつまんで書きますね！ここすっごい大事なので設計にはすこし時間をかけましょう。

1. まずデザインを一通りみる
2. ワイヤーフレームレベルをさらっと紙に書く
3. ワイヤーフレームの背景指定も紙に書いとく
4. コンテンツエリアで共通項をだいたい考える
5. このへんでテレビを見る
6. ナビゲーションで軽く悩む
7. 見切り発車でテンプレ部分をスライス
8. テレビで「落合のモノマネ」を見て、いたく感心する。シュールとベタの融合。
9. ロゴのコーディングがヤバいことに気づく
10. テレビという現実逃避が心地よくなる
11. ロゴはなんとかなるだろうと思い、さらりとすすめてしまう。

ここで大事なのはほんのすこし頭で考えて、紙にサラサラと書くことです。あまり細かくする必要はないです。あと、テレビは消すこと！

コーディングポリシーを決める

これもめちゃめちゃ大事です。htmlに魂を込めるんです。カズはフランスに魂を置いてきてますけど、カズ以外のみなさんは魂を込めてください。僕の魂は以下です

• あっちはdlでこっちはtableとかだと、あとの人が大変です。ガイドラインはしっかり立てましょう
• 難しくても、取り立てて必要ないdiv,spanは使わない
• 文字サイズ変更は敏感に
• div.sectionの相対配置、絶対配置系は恐れず使う

あっちはdlでこっちはtableとか

これは難しい問題です。僕の極論を言ってしまうとtableは巨大なフォーム以外、あまり使いません。新着情報はレイアウト次第ではdlのデフォルトがそっくり当てはまるときもあれば、表組みが当てはまるときもあります。今回のレイアウトだったらたまたまtableだったけど、リニューアル時にはdlのレイアウトだったら…。あるいは、逆のときは…。

必要ないdiv,spanは使わない

縛りですね。IE6がなければ、div.section以外でdivはほとんど使わなくても済みます。

文字サイズ変更は敏感に

これも縛りですね。ctrl+マウスホイールでコロコロやるのを趣味にすると、いろんな発見ができます。とはいえ、IE7のズームはひとくせあるみたいで、いま調査中です。絶対配置あたりのズームがチョーヤバい。

div.sectionの相対配置、絶対配置系は恐れず使う

見出し以下の本文やらは若干paddingが付いてるレイアウトってたくさんあると思います。いちいちcssでひとつひとつpadding入れたり、classにpadと入れるのも面倒で複雑です。そのときにdiv.section内の見出しを絶対配置！なんもこわくないです。思い出したら使ってみてください。

たぶん、みなさんも似たような魂なりポリシーは持っていると思います。僕よりもっとすばらしいポリシーを持っているひともたくさんいますね。そういう人はソースからプンプン臭ってくるのですぐわかります。