HTML+CSSコーディングベストプラクティス

『HTML+CSSコーディングベストプラクティス』はかなりの良書だと思う。
Web サイトの制作に携わるひとは必ず読むべきと思う。


以下、読みながらのメモ。



HTML はあくまで文章のみ
アクセシビリティとは環境やデバイスに依存しないということ
プログレッシブエンハンスメント



■CSS について...


カスケーディング=上書き


div は複数の要素をグループ化する


id 属性は文章内に一意、アンカーとしても動作し、要素の特定が必要な場合に使う


class 属性は複数の要素に同じ属性値を指定可能、ひとつの要素に複数の class 属性を指定可能、共通化する場合に使う


スタイルの優先度を意識するような設計はダメな設計
これを回避するのに id 属性を基点にして有効範囲を限定する
id 属性は共通の機能とデザインを持つものに対してのみ同じ属性名とするべし
class 属性は div を使ってまとめて指定するパターンと個々の要素に記述するパターンがあるが、前者は保守性が低く後者は手間がかかる


コンポーネント化、パーツ化
個々のパーツの width は auto、margin を予め指定しておく
対してオブジェクト指向では目的別に指定


id,class 名には HTML5 の要素を参考に
※スタイルのためでなくコンテンツの分析に使うとよい


IE は条件付きコメントと CSS ハックの2パターンある


IE8 の IE7 モードは zoom の動作が IE7 と異なるので気を付ける



■高速化するには...


『httpリクエストを減らす』
『並行ダウンロードを有効利用』


CSS ファイルが多いと時間かかる
@import は並行 DL が有効でないため時間かかる
@import は使わず link 要素を使うべし


セレクタの組み合わせが多くなると時間がかかる


js のキャッシュのためにもバージョンなどをファイル名に含めて管理する
画像、CSS、JS は別ホスト(サブドメイン)から配信、クッキーを使用しない


画面描画系 JS は head 内、それ以外は </body> 直前
head 内に必ずしも記述する必要はない
js や CSS が処理されるタイミングを考慮した順番に記述する
つまり、並行ダウンロードを阻害しないような順番が大切


画像の縦横の未指定はレイアウトのリフローが発生するため体感的に遅く感じる


gzip で圧縮する



■その他...


共通部分をインクルードする場合は小分けにするとページ毎のカスタマイズが容易


GIF JPEG PNG を適切に使い分ける


モーダルウィンドウ(LightBoxとかそういうのの総称)



かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』