前提知識
Updated
Cascading Style Sheets(カスケーディングスタイルシート)機構を扱うために必要な基本知識の解説。
- CSS概論
- Cascading Style Sheets(カスケーディングスタイルシート)とは何か・何ができるのかということから、基本的な使い方を説明します。
- セレクタ(selector)
- CSS はスタイルを適用する対象であるセレクタ(selector)とスタイル情報を設定する宣言ブロックの2つから成り立ちます。CSS2.1のセレクタには全称セレクタ,クラスセレクタ,IDセレクタ,子孫セレクタ,子供セレクタ,隣接セレクタ,属性セレクタなどがあります。
- 擬似クラスと擬似要素
- 擬似クラスは要素が特定の状態にある場合にスタイルを指定するもので、擬似要素は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン(:)をつけて用います。
- 段階化の順序
- Cascading Style Sheets の Cascade とは順序立てられたリストのスタイルシートという意味から名付けられたもので、スタイルシートが段階的に継承していく働きを表しています。そして、順序立てられたリストの中で記述されている位置やセレクタの違いにより、段階化の順序(スタイル情報が反映される優先順位)は異なります。
- 適用要素
- 各CSS のプロパティを適用できる対象要素の区分けについて。
- @規則(アットルール)
- アットルール(@規則)は、セレクタ(selector)とプロパティだけでは指定できない機能を補うために用意されています。
- CSSの単位
- CSS で使われる単位には長さ, パーセンテージ値, 色, URI などがあります。長さは「絶対単位」と「相対単位」の2種類の単位に大別され、絶対単位には cm, mm, in, pt, pc があり、相対単位には em, ex, px があります。
- 継承(Inheritance)
- 継承(Inheritance)とは、(X)HTML文書はすべて樹形図のような構造(木構造)になっていることから、記述するスタイル情報を軽量化し、合理化を図るためにプロパティの値が親要素から子要素へ、子要素から孫要素へと引き継がれていく仕組みのことです。
- ボックスモデル
- CSSでは各要素が生成する矩形領域の範囲がボックス(Box)のように見立てられることから、この概念をボックスモデル(Box model)と呼びます。
- 包含ブロック
- 包含ブロックとは、祖先要素のうち、もっとも近い祖先の要素にあたるブロックボックスを形成する要素の内容領域を指します。つまり、当該要素の親要素をさかのぼっていっていってブロックボックスを形成する要素があれば、そのブロックボックスを形成する要素の内容領域が包含ブロックということになります。
- プロパティ名 発音ガイド
- CSS2.1 の仕様で定義されているプロパティ名の発音(フリガナ、読み方)について。CSS の各プロパティ名は、単語をあてはめただけの形をとる。