LP3で使用したコーディングデータ
CSS Nite LP, Disk 3で使用したコーディングデータを以下にアップしました。
HappyLifeCompany
HappyLifeマシン｜製品情報｜HappyLifeCompany
Liveコーディング時に補足できなかった点だけ書いておきます。
ディレクトリ
/shared/に画像、CSS、JSファイルなどまとめて格納しています。さらに背景に指定する画像については、/shared/img/bg/に格納し、img要素の画像と区別して管理しています。
画像はカテゴリごとに別途ディレクトリを作成して管理することが多いのですが（例えば「製品情報」で使う画像だったら/products/img/といったように）、今回はどの画像をどのカテゴリで使い回すか、デザインの2枚だけでは判断しにくかったので、とりあえずひとつにまとめておきました。
clear.css
clear.cssはいつも作るわけではないのです。今回デザインを見て、段組風のデザインが多そうだなと思ったので、煩雑にならないよう別ファイルにまとめてみました。
それと、セレクタを随時追加していくのではなく、場合によっては<div class="section01 clearfix">といったように、一定のクラスを付与して回り込みの解除を行う場合もあります。これは例えば、汎用的に使われるsection01のボックスの最後で、毎回必ずしも回り込みの解除を行っても良いとは限らなかったりするためです。
フォーム
コンテストでは定義リストの方が多かったのですが、僕はレイアウトしやすさも考慮してテーブルを使ってマークアップしておきました。あと、デザイン上右側にあるはずの「（全角カタカナ）」とかのテキストはひとまず削除しました。位置が良くないのと、全角/半角などはサーバー側で変換してあげられる範囲のことも多いので、作業する前に要確認ということにしときます。
見出しレベル
「製品情報」のほうは、「HappyLifeマシン」のページだと思われるので、ここをh1としたい気もするのですが、その前にカテゴリ名である「製品情報」という見出しもあるわけで。そもそもページの情報構成が妙なんですよね。そのため、ページを量産する段階で破綻しないよう、どのページも常にサイト名から順に見出しレベルを振り分ける想定にしています。
HTMLのコメント（2007/5/17追記）
終了タグの直前に入れるルールにしています。実はこれまで、人になんと言われようと終了タグの直後に入れるポリシー（要素の終了を示すという感覚）を頑なに守り続けていたのです。ですが、IE7のセレクタのバグに遭遇するというのが最近発覚したため、今後のことを考えてやむなく内側に入れるという方針に変更したのが今回からです。
そのほか、もっと書くべきポイントがある気もしますが、思いついたらまた追加いたします。ひとまずデータ公開までに。
このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/657
liの中にh3とかpって入れても大丈夫なんでしょうか？
文法上おかしいと言う声も聞いた事があるのですが・・・
初歩的な質問でしたらごめんなさい
投稿者 SB : May 17, 2007 01:44 AM
SBさん、ご質問ありがとうございます。
構造上これが最適かは別として、仕様的には正しいです。
dt要素などはインライン要素のみですが、li要素はブロック要素もインライン要素も入れられます。
<!ELEMENT li %Flow;>
（%Flowというのはブロック要素とインライン要素両方）
HTML4.01でも同様に入れられます。
ほかにまた疑問点がありましたらお聞きください。
投稿者 kawachi : May 17, 2007 02:35 AM
こんにちは、僕は日頃から
id名の命名に関して疑問があるのですが
W3Cではセマンティックなクラス名をというくだりがありますが
headerやfooterなどをid名で使用するのは
位置や視覚情報を元に命名してるのではと考えております。
Naming Conventionという形で非常に古くからEric MeyerやAndy Clarkeなどが語っていますがいかがでしょうか？
僕としてはheader部分にはよく、ロゴなどが含まれていますのでbrandigというブランドを形成するセクションとして
命名しております。
また、footer部分にはサイトの情報が
含まれてることが多いので
site_infoと命名しております。
いかがでしょう・・？
ご意見を伺えればとおもいます。
投稿者 kikuchi : May 17, 2007 11:50 AM
kikuchiさん、コメントありがとうございます。
headerやfooterというid/クラス名については妥当かどうか一度考えたことがあります。
しかし、上から下に文章を読む限り、その視覚的な出現位置（というか順序？）を元に命名が決まるのは自然に思います。先頭にあるべき情報だからheader、末尾にあるべき情報だからfooterです。そういう意味ではhn要素のheadingやhead要素のheadと似たような感覚で捉えています。
もっと具体的に内容を示して、brandingやsite_infoといった名前を付けることにも同意です。どちらでも問題もないと思いますし、クラスであれば両方付けても良いと思います。
いかがでしょうか。
投稿者 kawachi : May 17, 2007 12:30 PM
河内さん、御多忙中にも関わらず御回答有難うございます。
なるほど、文章を上から下に読む限りという文書構造の観点からheaderやfooterの命名をするということですね。
仮にCSSのfloatやpositionを適用し、header部分が横にある場合を考える場合やfooterに含まれるべき情報が右横にある場合などもあるかと思います。
議論の分かれるところですが、面白いとことは個人的には思っております。
少し具体例をご紹介できればと思います。
投稿者 kikuchi : May 19, 2007 02:02 PM
ちょっとこねくり回した表現をしてしまいましたが、単にヘッダ情報ならheaderと命名するのが妥当というだけの話ですね。
なので、headerと命名したブロックが、CSSレイアウト後に、左にあろうが右にあろうが、それは構わないと思っています。
投稿者 kawachi : May 19, 2007 05:02 PM