CSS3の基本
本まとめの前段記事が下記。
blog.pepese.com
CSSでいろいろできるのはわかった。だがデザインが思いつかんｗ
CSS3の前にCSSの書き方から。
p {
font-size : 12pt
}上記はp要素・タグのフォントサイズを12ポイントに指定するCSS。
pと書いている部分をセレクタ、font-sizeの部分をプロパティ、12ptの部分を値と言う。
書式は下記。
セレクタ { プロパティ: 値; }「プロパティ: 値」の区切り文字は「;」。
以降、CSS3の機能も含めたセレクタ（疑似クラス、疑似要素）、プロパティ、値の説明。
セレクタ
■ユニバーサルセレクタ
全要素に適用。「*」を使う。
* { プロパティ: 値; }■タイプセレクタ
指定の要素・タグ名だけに適用。「p」とか「h1」とか。
要素名 { プロパティ: 値; }■クラスセレクタ
指定のクラスだけに適用。「.」をつける。
.クラス名 { プロパティ: 値; }クラスとは、要素・タグの「class」属性に指定した値。
<p class="hoge" />
タイプセレクタの組み合わせることもできる。
「p」要素・タグの「hoge」クラスのみであれば下記。
p.hoge { プロパティ: 値; }■IDセレクタ
指定のIDだけに適用。「#」をつける。
#ID名 { プロパティ: 値; }IDとは、要素・タグの「id」属性に指定した値。
<p id="fuge" />
タイプセレクタの組み合わせることもできる。
「p」要素・タグのIDが「fuge」の要素・タグのみであれば下記。
p#fuge { プロパティ: 値; }■子孫セレクタ
「要素x」の内側に含まれている「要素y」だけに限定してスタイルを適用。
「要素x」と「要素y」の間に0個以上要素が存在しても適用される。
要素x 要素y { プロパティ: 値; }■子セレクタ
「要素x」の直接の子要素になっている「要素y」だけに限定してスタイルを適用。「>」を使う。
「要素x」と「要素y」の間に要素が存在したら適用されない。
要素x > 要素y { プロパティ: 値; }■隣接兄弟セレクタ
「要素x」の隣にある「要素y」（子孫関係ではなく、隣接する関係）だけに限定してスタイルを適用。「+」を使う。
要素x + 要素y { プロパティ: 値; }複数繋げることも可能。
要素x + 要素y + 要素z { プロパティ: 値; }この場合は「要素x」の隣にある「要素y」のさらに隣にある「要素z」だけに限定してスタイルを適用する。
■一般兄弟セレクタ
「要素x」の記述位置よりも後に登場する「要素y」だけを対象にスタイルを適用。「~」を使う。CSS3からの機能。
要素x ~ 要素y { プロパティ: 値; }■特定の属性を持つ要素だけに適用するセレクタ
「属性y」を持つ「要素x」に限定して適用。
要素x[属性y] { プロパティ: 値; }■特定の属性値を持つ要素だけに適用するセレクタ
「値z」が指定された「属性y」を持つ「要素x」に限定して適用。
要素x[属性y="値z"] { プロパティ: 値; }■特定の属性値が指定の値で始まる要素だけに適用するセレクタ
『「z」という文字列から始まる値』が指定された「属性y」を持つ「要素x」に限定して適用。「^」を使う。CSS3からの機能。
要素x[属性y^="z"] { プロパティ: 値; }■特定の属性値が指定の値で終わる要素だけに適用するセレクタ
『「z」という文字列で終わる値』が指定された「属性y」を持つ「要素x」に限定して適用。「$」を使う。CSS3からの機能。
要素x[属性y$="z"] { プロパティ: 値; }■特定の属性値が指定の値を含んでいる要素だけに適用するセレクタ
『「z」という文字列を含む値』が指定された「属性y」を持つ「要素x」に限定して適用。「*」を使う。CSS3からの機能。
要素x[属性y*="z"] { プロパティ: 値; }■特定の属性値が、「指定の文字列」か「指定の文字列にハイフンを加えた文字列」を持つ要素だけに適用するセレクタ
『「z」という文字列』か『「z」＋ハイフン＋「文字列」という形式の文字列』のどちらかが値として指定された「属性y」を持つ「要素x」に限定して適用。「|」を使う
要素x[属性y|="z"] { プロパティ: 値; }■特定の属性値を1つでも含んでいる要素だけを適用するセレクタ
空白文字で区切って複数の値を記述できる「属性y」に「z」という値が1つでも含まれている場合の「要素x」に限定して適用。「~」を使う。
要素x[属性y~="z"] { プロパティ: 値; }
セレクタ（疑似クラス）
通常のセレクタとは異なり、要素名やclass名を指定するだけでは実現できない特殊な状態に限定してスタイルを変化させることができる。
疑似クラスの書き方
要素:疑似クラス { プロパティ: 値; }コロンから始まる「:疑似クラス」の部分が疑似クラス。
また、クラスセレクタに限り、下記のように組み合わせて使用することができる。
p.forest:hover { color: green; }疑似クラスの一覧
- 構造上の疑似クラス
- HTMLの構造を元にして適用対象を限定できる疑似クラス
- :first-child
- 最初の子要素として登場する場合のみに適用
- :last-child
- 最後の子要素として登場する場合のみに適用
- :only-child
- 唯一の子要素として登場する場合のみに適用
- :first-of-type
- 同要素の中で、最初の子要素として登場する場合のみに適用
- :last-of-type
- 同要素の中で、最後の子要素として登場する場合のみに適用
- :only-of-type
- 同要素の中で、唯一の子要素として登場する場合のみに適用
- :nth-child(n)
- 先頭から「n番目」の子要素として登場する場合のみに適用
- :nth-last-child(n)
- 末尾から「n番目」の子要素として登場する場合のみに適用
- :nth-of-type(n)
- 同要素の中で、先頭から「n番目」の子要素として登場する場合のみに適用
- :nth-last-of-type(n)
- 同要素の中で、末尾から「n番目」の子要素として登場する場合のみに適用
- :empty
- 子要素を何も持たない場合のみに適用
- :root
- ルート要素である場合のみに適用
- 否定疑似クラス
- 指定した条件を満たさないすべての要素を対象にして、スタイルを適用できる疑似クラス
- :not(xxx))
- 条件「xxx」が成立しない要素に対してのみ適用
- リンク疑似クラス
- リンク先が「未訪問の場合」か「訪問済みの場合」かでリンクの装飾を分けられる疑似クラス
- :link
- リンク先が未訪問の場合のみに適用
- :visited
- リンク先が訪問済みの場合のみに適用
- ユーザアクション疑似クラス
- マウスやキーボードなどでユーザが操作した際の状況に応じてスタイルを適用できる疑似クラス
- :hoverk
- 要素の上にマウスポインタを載せた際のみに適用
- :activek
- アクティブになった際のみに適用
- :focusk
- フォーカスされている際のみに適用
- ターゲット疑似クラス
- ウェブページの途中にあるアンカーに対してリンクされた際に、その「アンカーの存在する要素」にスタイルを適用できる疑似クラス
- :target
- URLで参照先になっている場合のみに適用
- 言語疑似クラス
- 指定した言語で記述されている（lang要素を使って言語名が指定してある）場合のみにスタイルを適用できる疑似クラス
- lang属性値が「xxx」である場合のみに適用
- UI要素状態疑似クラス
- ユーザインターフェイスの状態に応じてスタイルを適用できる疑似クラス
- :enabled
- 要素が有効な場合のみに適用
- :disabled
- 要素が無効な場合のみに適用
- :checked
- 要素がチェックされている場合のみに適用
- :indeterminate
- 要素の選択状況が不確定の場合のみに適用
セレクタ（疑似要素）
通常のセレクタとは異なり、要素名やclass名を指定するだけでは実現できない特殊な状態に限定してスタイルを変化させることができる。
また、疑似クラスとは異なり、要素の一部分に対してだけスタイルを適用できる。
疑似要素の書き方
要素::疑似要素 { プロパティ: 値; }コロン2つから始まる「::疑似要素」の部分が疑似要素。
また、クラスセレクタに限り、下記のように組み合わせて使用することができる。
p.note::first-line { color: blue; }CSS2以前の仕様ではコロンは1つであった。（疑似クラスと同じ）
過去の仕様との互換性維持のため、コロン1つで認識はされる。
しかしIE8以下などの古いブラウザでは、このコロン2つの書き方が認識されないため、現状ではコロン1つで記述しておく方が無難。
ただし、CSS3以降で新しく追加される疑似要素に関しては、コロン2つでの書き方でしか認識されない。
疑似要素の一覧
- ::first-letter
- 要素内の最初の文字のみを装飾
- ::first-line
- 要素内の最初の行のみを装飾
- ::after
- 要素の内容の後に適用
- ::before
- 要素の内容の前に適用
プロパティ
いっぱいあるので下記参照。
http://teyon.maeda-keiji.com/css3new/css_reference.html
値
長さ・大きさの単位
- cm
- センチメートル
- mm
- ミリメートル
- in
- １インチ＝2.54cm
- pt
- １ポイント＝1/72インチ
- pc
- １パイカ＝12pt
- em
- その範囲のフォントの高さを１とした単位
- ex
- その範囲のフォントの小文字の「x」の高さを１とした単位
- px
- １ピクセルを１とした単位
- %
- あるものを基準とする単位
色（colorプロパティ）の指定
- RGB指定（6ケタ）
- 最初の2ケタはR、次の2ケタはG、最後の2ケタはB
- 例）#FF6699
- RGB指定（3ケタ）
- 最初の1ケタはR、次の1ケタはG、最後の1ケタはB
- 例）#F69（←#FF6699と同じ）
- 「rgb(R,G,B)」指定（1〜255）
- 例）rgb(100,100,100)
- 「rgb(R,G,B)」指定（1〜100%）
- 例）rgb(50%,50%,50%)
