[CSS]CSSの書式と記述、セレクタの種類と使い分け

はじめに

今日はCSSを記述するための基本書式と、その記述方法を勉強しました。さらに代表的なセレクタの種類と、使い分け方について学びました。

CSSの基本書式

セレクタ｛プロパティ：値;｝

h1 {color: ＃FF0000;}

• セレクタ：範囲を指定
• プロパティ：属性を指定
• 値：属性の値を指定

以上をスタイルシートに記述すると、見出しh1が赤色に設定されます。

CSSで使う単位

長さ(webでは主に相対単位を使用)

相対単位	絶対単位
px:ピクセル（画素）	pt:ポイント(1/72インチ)
%:パーセント（割合）	pc:パイカ(12ポイント)
em:大文字Mの高さを1単位	mm/cm:ミリ、センチ
ex:小文字xの高さを1単位	in:インチ(2.54センチ)

色指定

CSSでの詳しい色指定には、16進数(hexadecimal)色コードを使います。

• 16進数(0123456789ABCDEF)
• #000000(黒)〜#FFFFFF(白)
• #,00,00,00→No,Red,Green,BlueViolet
• #,0,0,0,0,0,0→No,R明度,R彩度,G明度,G彩度,B明度,B彩度

３つのセレクタ

タイプセレクタ　要素名{…

要素に対してスタイル指定します。
見出し(h)、段落(p)、リスト(ul)、リンク(a)、画像(img)、グループ(div)、範囲指定(span)など…

idセレクタ　#ID名{…

id属性で固有名を付けられた要素をセレクタとします。

• ページ内で識別したい要素に対する一意性のもの
• 同じページ内で同じIDを複数の要素に指定できない
• HTML文書内で１つずつ確定していくもの
• とくにグループを囲む外枠として、div要素に適用される

classセレクタ　.クラス名{…

class属性で任意の名前を付けられた要素をセレクタとします。

• 同じ要素の中で特定の部分だけスタイルを適用したいときに使う
• 同じページ内の複数の箇所に指定できる

組み合わせによるセレクタ

シンプルセレクタ

単一に指定します。
h1{color:#FFF};→h1にスタイル指定

グループセレクタ

複数のセレクタをカンマでつないで一括指定します。
h1,h2,h3{color:#FFF}→h1,h2,h3にスタイル指定

子孫セレクタ

要素の親子関係を利用して、親要素→子要素→孫要素と半角スペースで区切りながら絞り込んで指定します。
#hoge ul li｛color:#FFF}→ID・hoge内のリスト(li)にスタイル指定

その他のセレクタ

セレクタ	名称	意味
*	ユニバーサルセレクタ	全ての要素を選択
E F	子孫セレクタ	親Eに含まれる子Fを選択
E>F	子セレクタ	親E直下の子のFを選択※
E+F	隣接セレクタ	兄要素Eに隣接する弟要素Fを選択

※子セレクタは孫要素(Fの子要素)を対象に含まない

属性セレクタ

角括弧で指定された属性の値から判別して、個別の要素を選択します。属性値に規則性があるとき活用できます。

セレクタ	意味	例
E[attr]	属性attrを持つ要素Eを選択	a[href]
E[attr="value"]	属性attrの値がvalueである要素Eを選択	a[target="_blank"]

擬似セレクタ

• 一定の条件を満たす状況に応じてスタイルを設定
• リンクを設定した要素にカーソルを乗せたときのアクションなど
• :link(未訪問)、:visited(訪問済み)、:hober(カーソルオン)、:active(実行時)

擬似要素

• 実際に要素が存在しない箇所を擬似的に要素があるとみなしてスタイルを設定
• :first-letter　要素の最初の１文字を選択
• :first-line　要素の最初の１行を選択
• :before　要素内の先頭にコンテンツを生成
• :after　要素内の末尾にコンテンツを生成