CSSの適用方法
スタイルルールをDOMに反映させる手法は、以下の3つが主流です。
- 外部スタイルシート: .cssファイルを分離し、HTML側で<link>タグ経由で読み込む。保守性とキャッシュ効率に優れるため、本番環境での標準手法です。
- <head>内インライン定義: <style>タグ内に直接記述する。デバッグや軽量なプロトタイピングに適しています。
- タグ属性インライン: HTMLタグのstyle属性として埋め込む。優先度は最も高いものの、再利用性が低く推奨されません。
基本セレクタ
要素セレクタ（Type Selector）
section {
background-color: #f5f5f5;
}ページ内の特定のタグ名に一律で適用されます。
クラスセレクタ（Class Selector）
.card-main {
color: #1a73e8;
}class属性に指定された値に対応する複数の要素をターゲットとします。
IDセレクタ（ID Selector）
#header-nav {
display: flex;
}一意のid属性を持つ単一の要素を特定します。JavaScriptとの連携やアクセシビリティでもよく使われます。
全体セレクタ（Universal Selector）
* {
box-sizing: border-box;
}文書内のすべての要素を対象とし、初期化やリセットCSSで頻繁に使用されます。
コンバイナ（結合子）
要素間の階層や位置関係を指定し、より精密なマッチングを実現します。
子孫選択（Descendant Selector）
nav anav要素内に存在する全ての子孫要素（深さに制限なし）を取得します。
直接子供選択（Child Selector）
ul > li親要素の直下にある子供要素のみを抽出します。入れ子の影響を排除したい場合に有効です。
隣接兄弟選択（Adjacent Sibling Selector）
h2 + p同じ階層にあり、指定要素の直後に配置される最初の兄弟要素を参照します。
一般兄弟選択（General Sibling Selector）
h2 ~ span同レベルで先頭の指定要素以降に現れる、全ての条件一致兄弟要素を選択します。
属性セレクタ
カスタムデータやフォーム属性など、DOMのメタ情報に基づいてフィルタリングできます。
属性名の存在チェック
[data-role]指定した属性名さえあれば値の有無に関係なくマッチします。
属性値の完全一致
[data-role='admin']属性名と値の両方が完全に一致する場合のみ適用されます。
要素と属性の複合指定
button[data-role='admin']特定のタグ種類かつ特定の属性値を持つノードに限定してスタイリングします。
多重選択（グループ化）
重複するスタイル定義を回避するため、カンマ区切りで一度に宣言できます。
h1, h2, h3 {
font-family: 'Noto Sans JP', sans-serif;
}擬似クラス
ドキュメントの静的構造ではなく、ユーザ操作や要素の状態に応じて動的に適用されるセレクタです。
未訪問リンク
a:link { color: #0066cc; }カーソル重ね時
a:hover { color: #cc0000; cursor: pointer; }アクティブ押下時
a:active { transform: scale(0.98); }訪問済みリンク
a:visited { color: #660066; }フォーカス取得時
input:focus { outline: 2px solid #4a90e2; background: #fafafa; }擬似要素
実際のDOMツリーには存在しない仮想的なセクションに対して、コンテンツの装飾や追加を行います。
先頭文字の修飾
p:first-letter {
font-size: 2em;
color: #d32f2f;
}内容挿入（前方）
blockquote::before {
content: '\201C';
font-size: 3rem;
color: #aaa;
}内容挿入（後方）
blockquote::after {
content: '\201D';
font-size: 3rem;
color: #aaa;
}