ホームページの基礎（2. CSS 編）

文書ライブラリ Web版トップ

http://hitp.konjiki.jp/

文書ライブラリ Blog版トップ

http://hitp-tc.blogspot.com/

この文書の版

http://hitp.konjiki.jp/css/

この文書の元原稿

http://poem.kagebo-shi.com/

著者

HIROTAKA YAMASHITA

目 次

1. 2.1 スタイルシートとHTML
   1. 2.1.1 スタイルシートって何だろう？
   2. 2.1.2 文書の物理構造と論理構造
   3. 2.1.3 スタイルシートの種類
   4. 2.1.4 CSSとは何か？
   5. 2.1.5 用語の定義
2. 2.2 スタイルシートを適用する
   1. 2.2.1 スタイルシート適用前のソース文書
   2. 2.2.2 スタイルシート適用の方法
   3. 2.2.3 style属性によるスタイル指定
   4. 2.2.4 style要素によるスタイル指定
   5. 2.2.5 link要素によるスタイル指定（外部スタイルシート）
3. 2.3 CSSの構文規則
   1. 2.3.1 CSSの文
   2. 2.3.2 @規則
   3. 2.3.3 規則集合
   4. 2.3.4 値の種類
      1. 2.3.4.1 キーワードと文字列
      2. 2.3.4.2 数 値
      3. 2.3.4.3 長 さ
      4. 2.3.4.4 パーセント値
      5. 2.3.4.5 URI
      6. 2.3.4.6 色
4. 2.4 セレクタの構文規則
   1. 2.4.1 セレクタ
   2. 2.4.2 ユニバーサルセレクタ
   3. 2.4.3 タイプセレクタ
   4. 2.4.4 子孫セレクタ
   5. 2.4.5 子セレクタ
   6. 2.4.6 隣接セレクタ
   7. 2.4.7 属性セレクタ
      1. 2.4.7.1 [属性名]
      2. 2.4.7.2 [属性名="属性値"]
      3. 2.4.7.3 [属性名~="属性値"]
      4. 2.4.7.4 [属性名|="属性値"]
   8. 2.4.8 クラスセレクタ
   9. 2.4.9 IDセレクタ
   10. 2.4.10 疑似要素
       1. 2.4.10.1 :first-line疑似要素
       2. 2.4.10.2 :first-letter疑似要素
   11. 2.4.11 疑似クラス
       1. 2.4.11.1 :first-child疑似クラス
       2. 2.4.11.2 :link疑似クラス
       3. 2.4.11.3 :visited疑似クラス
       4. 2.4.11.4 :hover疑似クラス
       5. 2.4.11.5 :active疑似クラス
       6. 2.4.11.6 :focus疑似クラス
       7. 2.4.11.7 :lang疑似クラス
5. 2.5 その他の規則
   1. 2.5.1 継 承
   2. 2.5.2 指定値，計算値，実際値
   3. 2.5.3 スタイルシートの優先順位
   4. 2.5.4 スタイルの競合
6. 2.6 前景色と背景色
   1. 2.6.1 プロパティ定義の表記法法
   2. 2.6.2 前景色（colorプロパティ）
   3. 2.6.3 背景色（background-colorプロパティ）
7. 2.7 フォント
   1. 2.7.1 フォント関連の用語
   2. 2.7.2 font-familyプロパティ
   3. 2.7.3 font-styleプロパティ
   4. 2.7.4 font-weightプロパティ
   5. 2.7.5 font-sizeプロパティ
   6. 2.7.6 fontプロパティ
8. 2.8 テキスト
   1. 2.8.1 text-indentプロパティ
   2. 2.8.2 text-alignプロパティ
   3. 2.8.3 text-decorationプロパティ
   4. 2.8.4 white-spaceプロパティ
9. 2.9 ボックスモデルの概要
   1. 2.9.1 要素の分類によるボックスモデルの違い
      1. 2.9.1.1 ブロックレベル要素のボックスモデル
      2. 2.9.1.2 インライン要素のボックスモデル
      3. 2.9.1.3 匿名ボックス
   2. 2.9.2 ボックスの構造
   3. 2.9.3 包含ブロック
10. 2.10 ボックスモデル（マージン）
    1. 2.10.1 マージン幅のプロパティ
    2. 2.10.2 margin-topプロパティ，margin-bottomプロパティ
    3. 2.10.3 margin-leftプロパティ，margin-rightプロパティ
    4. 2.10.4 marginプロパティ
11. 2.11 ボックスモデル（パディング）
    1. 2.11.1 パディング幅のプロパティ
    2. 2.11.2 padding-top，padding-bottom，padding-left，padding-rightプロパティ
    3. 2.11.3 paddingプロパティ
12. 2.12 ボックスモデル（ボーダー）
    1. 2.12.1 ボーダー幅のプロパティ
    2. 2.12.2 ボーダー色のプロパティ
    3. 2.12.3 ボーダー形状のプロパティ
    4. 2.12.4 ボーダー幅，色，形状の一括指定
13. 2.13 背景画像
    1. 2.13.1 background-imageプロパティ
    2. 2.13.2 background-repeatプロパティ
    3. 2.13.3 background-attachmentプロパティ
    4. 2.13.4 background-positionプロパティ
    5. 2.13.5 backgroundプロパティ
14. 2.14 視覚表現
    1. 2.14.1 widthプロパティ
    2. 2.14.2 heightプロパティ
    3. 2.14.3 line-heightプロパティ
    4. 2.14.4 vertical-alignプロパティ
    5. 2.14.5 displayプロパティ
15. 2.15 視覚整形
    1. 2.15.1 ボックスの配置方法
    2. 2.15.2 positionプロパティ
    3. 2.15.3 top，right，bottom，leftプロパティ
    4. 2.15.4 floatプロパティ
    5. 2.15.5 clearプロパティ
16. 2.16 視覚効果
    1. 2.16.1 overflowプロパティ
    2. 2.16.2 visibilityプロパティ
17. 2.17 リスト
    1. 2.17.1 list-style-typeプロパティ
    2. 2.17.2 list-style-imageプロパティ
    3. 2.17.3 list-style-positionプロパティ
    4. 2.17.4 list-styleプロパティ
18. 2.18 テーブル
    1. 2.18.1 表に関係するdisplayプロパティ
    2. 2.18.2 caption-sideプロパティ
    3. 2.18.3 table-layoutプロパティ
    4. 2.18.4 border-collapseプロパティ
    5. 2.18.5 border-spacingプロパティ
    6. 2.18.6 empty-cellsプロパティ
19. 2.19 @規則
    1. 2.19.1 @media規則
    2. 2.19.2 @import規則
    3. 2.19.3 @charset規則
20. 2.20 スタイルコンテナ
    1. 2.20.1 スタイルコンテナ
    2. 2.20.2 div要素
    3. 2.20.3 span要素
21. 2.21 レイアウト（１）
    1. 2.21.1 マージンの調整
    2. 2.21.2 センタリング
    3. 2.21.3 リストのレイアウト
    4. 2.21.4 回り込み
22. 2.22 レイアウト（２）
    1. 2.22.1 回り込みの応用
    2. 2.22.2 上下ブロックと2段組み
    3. 2.22.3 多段組レイアウト