このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則41 スペース、インデント、改行を使って読みやすいCSSを書く

法則41 スペース、インデント、改行を使って読みやすいCSSを書く

スペースを使用して視認性を高める

CSSソース

p.note {
     font-size: 100%;
     color: red;
}
 
p.memo > span {
     font-size: 90%;
     color: blue;
}

インデントを使用して視認性を高める

CSSソース

p.note {
     font-size: 100%;
     width: 50%;
     }
 
@media print {
     p.note {
          font-size: 120%;
          width: 100%;
     }
}

改行も上手に使用して視認性を高める

CSSソース

/* 悪い例 */
p.note,ul.menu,ol.rank {font-size:100%;font-weight:normal;color:black;}
 
/* 良い例 */
p.note,
ul.menu,
ol.rank {
     font-size: 100%;
     font-weight: normal;
     color: black;
}

第2章 CSSの基本法則 一覧

  1. 法則31 CSSの基本的な記述方法を理解する
  2. 法則32 スタイル適用の優先順位を理解する
  3. 法則33 CSSにおけるボックスモデルを理解する
  4. 法則34 レンダリングモードの切り替え条件を把握して表示をコントロールする
  5. 法則35 セレクタと擬似クラスを使いこなして効率的なCSSを記述する
  6. 法則36 :hover擬似クラスは:link/:visited擬似クラスよりあとに記述する
  7. 法則37 インラインボックスの高さの値には単位を指定しない
  8. 法則38 文字色と背景色のコントラストに配慮する
  9. 法則39 出力メディアに合わせて適用するスタイルを制御する
  10. 法則40 複数人で管理するCSSはコメントでガイドラインを記述する
  11. 法則41 スペース、インデント、改行を使って読みやすいCSSを書く
  12. 法則42 プロパティの指定順序を統一する
  13. 法則43 ショートハンドプロパティでCSSを効率化する
  14. 法則44 ショートハンドプロパティはポイントを押さえて使用する
  15. 法則45 ベースとなる文字サイズの指定方法を工夫する

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS