制作に携わるなら『HTML+CSSコーディング ベストプラクティス』
みなさん、こんにちは、まーしーです。
我が家も無事インターネットが開通したようで安定した環境ももうすぐ整いそうです。ネットが問題無くつながるってほんと幸せですね。
さて、先日『HTML+CSSコーディング ベストプラクティス』を読みました。
HTML+CSSコーディング ベストプラクティス目次
『HTML+CSSコーディング ベストプラクティス』の内容はこのような感じです
■1 ［基礎］ basic
1.1 ｜ はじめに 本当のプロに求められるフロントエンド実装
1.2 ｜ そもそもHTMLとは何なのか？
1.3 ｜ Webサイトの過去と現在
1.4 ｜ HTMLによる文書の構造化■2 ［設計］ plan
2.1 ｜ CSS（スタイルシート）の分割
2.2 ｜ スタイルシートのインポート
2.3 ｜ カスケーディングとスタイルの詳細度
2.4 ｜ セレクタによるCSS設計
2.5 ｜ CSSシグネチャ
2.6 ｜ コンポーネント化
2.7 ｜ オブジェクト指向設計■3 ［開発効率］ development efficiency
3.1 ｜ サイトのデザインと意味を考えてコードを共通化する
3.2 ｜ コードの再利用を考える
3.3 ｜ id属性値やclass属性値の命名について
3.4 ｜ 共通部分のコードをテンプレートとして組み合わせる
3.5 ｜ img要素のwidth属性、height属性の有無について考える
3.6 ｜ HTMLやCSSの書き方にガイドラインを設ける
3.7 ｜ CSSの分割・モジュール化
3.8 ｜ デフォルトスタイルのリセット
3.9 ｜ 手戻りの少ない作業の進め方
3.10 ｜ CSSのコメントを記述する
3.11 ｜ 急がば回れのソースコード
3.12 ｜ idとclassを正しく使い分けてCSSにも利用する
3.13 ｜ 思った通りの表示にならないときに確認すること■4 ［高速化］ speed up response
4.1 ｜ 今なぜ高速化が必要なのか
4.2 ｜ HTTPリクエストの数を減らす
4.3 ｜ HTML／CSS／JavaScriptをMinify化する
4.4 ｜ 複数のCSSやJavaScriptはできるだけ結合する
4.5 ｜ CSSのセレクタはできるだけ簡潔に
4.6 ｜ テキストをGzip化し、転送データ量を減らす
4.7 ｜ 更新頻度の少ないファイルに有効期限を設定する
4.8 ｜ DNSルックアップの数は極力減らす
4.9 ｜ 配信ホストは複数に分け、静的リソースはクッキーのないサーバから配信
4.10 ｜ 画面描画に関係ないJavaScriptはの直前で読み込む
4.11 ｜ head要素内の記述順による高速化
4.12 ｜ @importルールを使ったCSSの読み込みを避ける
4.13 ｜ CSS Spriteを使ってHTTPリクエスト数を減らす
4.14 ｜ 高速化のためのimg要素の取り扱い
4.15 ｜ そのほかのパフォーマンス向上のためにできること■5 ［多様な技法］ various techniques
5.1 ｜ CSSハックを使う理由・使わない別の方法
5.2 ｜ floatとclearの活用
5.3 ｜ IEにおけるhasLayoutとは？
5.4 ｜ ネガティブマージンの活用
5.5 ｜ positionの活用
5.6 ｜ さまざまなブラウザに対応する確認環境
5.7 ｜ クロスブラウザ対応
5.8 ｜ 印刷用CSSの利用
5.9 ｜ 適切な画像形式の選定と透過PNGの利用
5.10 ｜ CSSデバッグツールの利用
5.11 ｜ JavaScriptの利用とライブラリの活用
5.12 ｜「 .htaccess」の活用
5.13 ｜ iPhone用のWebサイトの作成
5.14 ｜ data URLスキームの利用
5.15 ｜ HTML5の利用
5.16 ｜ CSS3の利用
5.17 ｜ Subversionを利用したファイル管理HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために - MdN Design Interactive
http://www.mdn.co.jp/di/book/6135/
CSSの設計など
CSSの設計部分については経験に基づきながら、頭の中で組み立てている人が多いのではないかと思います。
絶対にこれが正しいという方法がないだけに、判断基準は難しいところではありますが、切り口をはっきりさせてそれぞれの方法のメリット、デメリットをあげているところは、明文化できていない頭の中を整理してくれると思います。
命名規則なども明文化しないでも問題が無い場合が多いかもしれません。
そういったことを含めてどこまで想定するか、できるか、というのは案件次第なところではありますが、できる限りの可能性を想定をしておきたいところです。
また、最近ですとHTML/CSSとCMSが組み合わさってくるので設計の重要性は増す一方だと思います。
パフォーマンス
それらを踏まえつつパフォーマンスの話になってきます。このあたりはこもりさんがよくブログ記事で書かれているのですが、最後のところまで手を回しきれない時もありそうです。
どうしてもやれないところがあるのは仕方ないですが、できる限りは対応すべきでしょうし、いきなり全てができなくても当然のようにできるところを日々広げていく必要があります。
とはいえ、最適化第一優先で考えると、最初の設計の話などと絡んでくるところもあったりするので、それらを総合的にみて判断していく必要がありそうです。
技法の話
技法のところでは多メディア対応の技法やHTML5,CSS3の話などがあります。設計やパフォーマンスの話よりも変化が激しい領域の話ではないかと思います。
いきなり180度変わってしまうということは滅多にないでしょうが、対応していくタイミングは早くなる一方ではないかと思います。
また、この技法の話がでてくるとCSS設計以前の話も重要になってきそうです。そのあたりでどのくらい考えられているか、サイト全体を設計できているかが重要になりそうです。
ということで
ということで、普遍的でありながら絶対的な答えのない領域と早い変化の中で対応していかないといけない領域。その中にいるということを再認識しつつ、自分自身足りてないところをあぶり出してくれる一冊ではないかと思います。
コーディング段階の話と思われてしまうところでもありますが、サイト全体を設計するときやビジュアルやインタラクションなどを考える際にも考慮してもよいのかもしれないので、制作チームで共通認識としておさえておく必要がある部分だと思いますね。
そういう意味でも制作に関わる全ての人が目を通しておくとチーム内の風通しも良くなりそうです。
MdN ( 2010-08-25 )
ISBN: 9784844361350
おすすめ度:
