prog*sig

第二章 少し実践的な内容
Category_XHTML

■Theme 001　特定のページだけに固有の表示指定をするには？

CSSは複数のページで同じCSSファイルを読み込んで使う事で一元管理できるのがメリット。
だけど特定のページ用の記述も入れたい場合にはどうするかという話。
そのページ専用のCSSファイルを用意するのは一元管理の法則から外れてしまうので、あまり推奨はできない。
そのページのXHTMLで決めたidやclassを使うなどで分類しているサイトが多い。
class="com-domain" みたいなシグネチャは流行らなかったそうだ。

■Theme 002　div要素につけるid属性・class属性の値がうまく決められません

よく使われているidやclassの定番。
2カラム、3カラムサイトの参考
よくあるWebのネーミング

■Theme 003　フォームは構造的にはどうタグを付ければよいですか？

formタグの中に入れられるタグは決まっていて、XHTMLだけでの見栄えを考えた場合どのようなフォーム構造がいいのか。
テーブルタグを使うとシンプルにまとまるので使用しているケースも多い、またブロック要素を用いてinput毎に分けていくのも良くある感じ。

■Theme 004　フォームの部品とラベルのテキストを一体化させたい

上の例でも書いたけど、labelとinputを１つの部品として一体化されるときに２つの方法がある。
上ではid="fname"のinputを、labelのfor="fname"で示すことで関連づけであることを示している。

    <tr valign="top" align="left">
	<th><label for="fname">Name:</label></th>
        <th><input type="text" id="fname" /></th>
    </tr>

もう一方は単純にlabelでinputを要素を囲うだけ。ある意味シンプル。

    <tr valign="top" align="left">
	<label>
        Name:<input type="text" id="fname" />
        </label>
    </tr>

ただし、後者のlabelで囲う方法はIE6とIE7が足を引っ張るのでforで関連づけた方が無難。

■Theme 005　IEの特定バージョンだけに外部スタイルシートを読み込ませるには？

IEの条件分岐コメント。
大小の比較演算子もあったらしい

Internet Explorerの条件分岐コメント | 謎解きウェブ | BLOG × WORLD ENDING

■Theme 006　IEの特定バージョンだけにCSSを適用するには？

いわゆるCSSハックは以下が定番の書き方。

/* IE6向け */
 * html {}
/* IE7向け */
 *:fist-child+html {}

Theme 016　CSSハックは厳選したものだけをポイントを押さえて使うも併せて。

■Theme 008　CSSで2段組を行うには？

まずは幅が固定な二段組みを実現する方法。

• floatで同方向に寄せるパターン

floatでmainとsubをleftにしています。
footerにもwidthを指定するとIEで描画のブレが無くなるそうです。

• floatで左右に振り分けるパターン

mainをleftへ、subをrightへfloatしています。
全体を囲う#containerの左右のmarginをautoにすることでcontainerが中央へきます。

floatで同方向に寄せるパターンへ単純でカラムが幾つ増えても同様の方法が取ることができますが、コンテンツがXHTMLの上が順に左になるので、CSS側だけでコンテンツの順序を変更できない。
floatで左右に振り分けるパターンはカラムが増えると、いくつかのカラムをまとめたできた大きなカラムを2個として左右に分け、その中のカラムでまた左右へと少しXHTML側に記述が増えますがコンテンツの順序をある程度制御できます。
実際に3カラムの場合は次

■Theme 009　CSSで3段組を行うには？

• floatで同方向に寄せるパターン

全くと言って良いほどやり方は変わりません。
新たに#extraが追加されただけの単純なもの。

並び順がXHTMLの構造通り、main,sub,extraとなっています。この方法で中央にmainを持ってくる必要があるならmainとsubの場所を書き換える必要があります。
書き換えてmainを中央に持ってきたとき、音声ブラウザでは先にsubが読まれるので、XHTML順でmain,sub,extraを維持するには左右に振り分けるパターンを使います。

• floatで左右に振り分けるパターン

mainとsubを囲うブロック#main-subという構造を書き足す必要がありますが、main,sub,extraという順序を維持した書き方が可能。
2カラムの時と同様の処理を、#main-subと#extraを左右に振って、#main-subの中で同じように#mainと#subを左右に振ることで表示される順番を制御できます。


(この辺の図とHTMLとCSSの関係が綺麗に書いてあるので、とても読みやすい本)