prog*sig

Category_XHTML

■Theme 002　Strictの文法をベースに書く

Strictは文法に厳しいという所もあるが、シンプルで完結なので編集中はStrictで書く事もあり。

■Theme 003　div要素を使いすぎない

1. 構造のタグ
2. div用でグループ化
3. 必要に応じてCSS用のタグ

divタグを使うのは2,3であるが、3はできる限り少なくする。
またdivの入れ子を作りすぎない。3重以上のdiv入れ子ができてしまったらそれは本当に必要が考える。
内容が空のdivタグを作らない。→今は工夫でどうにかなるはずなので不必要なはず

■Theme 004　id属性とclass属性を適切に使う

id属性は文章中の固有の名前を表すもので重複しないため、アンカーの移動先にも指定できる。
class属性はその要素の主対を表す名前を示す属性。
優先度はid > class となる。

■Theme 005　XHTMLに表示の指定を組み込まない

XHTML側で表示の調整を行わないようにする。
brの連続や無意味なスペースを挿入、style属性を安易に使用しない。
styleはCSSの優先度で最も高いため!importantを付けないと後から上書きできないので安易に使うな。

日　時 : 2010年8月9日
場　所 : どこだよ

のように全角スペースを間に入れて文字間隔を調整しない。
音声ブラウザや検索botなどに影響がでるため、letter-spacingのプロパティを使う。

■Theme 006　必ず文法チェックを行う

文法チェックを行う理由。
XHTML側のミスがCSSの表示に影響を与えることがあるため、無駄な作業を増やさないためにもXHTMLはvalidにする癖を付ける。

Category_CSS
Theme 007-009 IE5.5などもはや存在しないので窓から投げ捨てる。
IE6のような隔離したいブラウザはのような条件付コメントで専用のCSSを呼び出すようにする。

■Theme 010　外部スタイルシートのファイルは細かく分割しすぎない

読みづらくなるので、無駄な細分化はしない。

■Theme 011　IE6の表示結果を基準にして作成しない

IE6は未だに(この本は2007年だけど)利用率が高いので一つの基準ではあるが、正しくない事がおおいのでIEだけを基準にしてはいけない。
IEとFirefoxで交互に確認してCSSを書いていくのが無難であるとされている。

■Theme 013　ソースコードは書き方を統一する

スペースとタブを統一、の位置を統一など。
プログラムでも同じですね。

■Theme 015　ソースコードは読みやすく書く

逆にプログラムと違って、ネストの分だけインデントを深くするとCSSは読みにくい。

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

CSSハックは後で取り除くことを前提とする。
同じブロックに普通のCSSとハックを混ぜたものを書かない。
* html {} や*:fist-child+html {}などのCSSハックを行う対象ブラウザを分けたブロックを作り、CSSハックを行う事で後から取り除きやすくなる。

■Theme 017　CSSでテキストを消さない

アクセシビリティの観点から無駄にCSSでテキストを消すのは止めておけ。
text-indent:-9999px;でテキストを画面外に吹き飛ばすのも同様で、CSS有効で画像非表示時に問題が出ることがある。

■Theme 018　アクセシビリティの基本を守る

• 文字色と背景色はセットで指定すべき。(ユーザー側で文字色を変えている人もいるため)
• 文字サイズは相対的な単位で指定(IE6以前でズームが効かない)
• 英単語の大文字小文字はCSSで制御する(XHTML側で書くと音声ブラウザに影響があるので文字は本来の形で埋めておく)