「CSS if文」を探している方へ。スタイルを条件分岐させるには

By /

はい、承知いたしました。「CSS if文」を探している方へ向けた、スタイルを条件分岐させる方法についての詳細な記事を作成します。約5000語を目指し、代替手段、コード例、メリット・デメリットなどを網羅的に解説します。

「CSS if文」は存在しない？スタイルを条件分岐させる7つの方法を徹底解説

Webサイトやアプリケーションの見た目を柔軟に制御したいと思ったとき、「もし〇〇だったら、スタイルを△△にする」といった条件分岐の処理を書きたいと考えることがあるでしょう。プログラミング言語に慣れている方であれば、「CSSにもif文のようなものはないのだろうか？」と考えるのは自然な流れです。

しかし結論から言うと、CSSそのものには、JavaScriptや他のプログラミング言語にあるような直接的な「if文」構文は存在しません。

これは、CSSが「ドキュメントの構造（HTML）に対して、どのように表示するか（スタイル）を宣言する」ための言語であり、「プログラムのように順序立てて処理を実行したり、状態を保持したりする」役割を持つ言語ではないからです。CSSはあくまで「見た目のルールブック」を記述するものであり、そのルールを適用するかどうかを動的に判断するような「ロジック」の機能は持ち合わせていません。

では、「特定の条件に応じてスタイルを変えたい」というニーズは、どのように実現すれば良いのでしょうか？

幸いなことに、CSS単体、あるいはCSSと他のWeb技術（主にJavaScriptやHTMLの属性）を組み合わせることで、実質的に「条件によってスタイルを変える」様々な方法が存在します。これらの方法を理解し、適切に使い分けることが、現代の柔軟でインタラクティブなWebデザイン・開発においては非常に重要になります。

この記事では、「CSS if文」を探しているあなたが求めているであろう「スタイルを条件分岐させる方法」について、以下の7つの主要な代替手段を徹底的に解説します。それぞれの仕組み、具体的なコード例、メリット・デメリット、そしてどのような状況で使うのが最適かをご紹介します。

  1. JavaScriptを利用したクラスの追加・削除 (最も柔軟)
  2. メディアクエリ (デバイス特性に基づく条件分岐)
  3. 属性セレクターの活用 (JavaScriptと連携)
  4. :has()擬似クラス (親要素の状態に基づく条件分岐)
  5. CSS変数 (Custom Properties) の動的変更 (JavaScriptと連携)
  6. 親セレクターの状態を利用 (:hover, :focusなど)
  7. CSSプリプロセッサーの条件分岐 (@if) (コンパイル時)

これらの方法をマスターすれば、単に見た目を整えるだけでなく、ユーザーのアクションやデバイス環境、アプリケーションの状態に応じた、よりリッチなユーザーインターフェースを構築できるようになるでしょう。

さあ、CSSでスタイルを条件分岐させる世界へ踏み込んでいきましょう。

1. なぜCSSに「if文」はなぜないのか？ その設計思想

まず、「なぜCSSにif文のような機能がないのか？」という根本的な疑問について考えてみましょう。この点を理解することは、CSSという言語の特性を把握し、他の技術との連携をスムーズに行う上で役立ちます。

CSSは、宣言型言語（Declarative Language）として設計されています。これは、「何をしたいか」を記述するスタイルであり、「どうやってそれを実現するか」という具体的な手順（手続き）を記述する手続き型言語（Procedural Language）とは対照的です。

例えば、JavaScript（手続き型言語）で「もし要素Aがクリックされたら、要素Bの色を赤にする」という処理を書く場合、あなたは「要素Aを監視する」「クリックイベントが発生したら関数を実行する」「関数の中で要素Bを探す」「要素Bのスタイルを変更する」といった一連の手順を記述します。

一方、CSS（宣言型言語）は、「要素Bは、要素Aが特定の状態の時に赤くなる」という「状態とスタイルの対応関係」を宣言的に記述します。

CSSの設計思想は、以下の点にあります。

  • 役割の分離: HTMLがコンテンツの構造、CSSが見た目、JavaScriptが振る舞い（インタラクションやロジック）という明確な役割分担をすることで、それぞれのコードの保守性や再利用性を高めます。もしCSSが複雑な条件分岐や状態管理の機能を持ってしまうと、この役割分担が曖昧になり、コードが肥大化・複雑化する可能性があります。
  • 並列処理と効率性: ブラウザはCSSを解析し、要素にスタイルを適用する際に、スタイルシート全体を一度に評価して、各要素にどのルールが適用されるかを効率的に計算します（カスケード処理、詳細度計算など）。もしCSS内に複雑な手続き型のロジックが含まれると、この並列処理や効率的な評価が難しくなる可能性があります。
  • シンプルさと学習コスト: CSSをシンプルに保つことで、Webデザインに関わる多くの人が比較的容易に学習し、利用できるようになっています。プログラミング言語のような高度な制御構造を導入すると、学習コストが跳ね上がる可能性があります。

これらの理由から、CSSは「要素の状態や環境に基づいて、どの宣言を適用するか」を静的に、あるいは比較的単純なメカニズム（セレクターの詳細度、メディアクエリなど）で判断するように設計されています。複雑な実行時の条件判定や状態管理が必要な場合は、その役割はJavaScriptに委ねられるべき、という思想に基づいています。

ただし、CSSも進化しており、近年では以前よりも動的な側面を持つ機能が追加されています。例えば、CSS変数（Custom Properties）を使えば値を動的に操作できますし、:has()擬似クラスは要素間の関係性に基づいてスタイルを適用するという、以前は難しかった条件を指定できるようになりました。これらの進化は、「見た目の宣言」というCSSの基本原則を守りつつ、より柔軟なスタイリングを実現するために行われています。

それでは、CSSに直接のif文がないことを踏まえ、私たちがどのようにしてスタイルを条件分岐させているのか、具体的な方法を見ていきましょう。

2. CSSでスタイルを条件分岐させるための主な代替手段

ここからは、CSSでスタイルを条件分岐させるための具体的な7つの方法を詳しく解説します。それぞれの方法には得意な状況と苦手な状況がありますので、目的や要件に応じて適切な方法を選択することが重要です。

2.1. 方法1: JavaScriptを利用したクラスの追加・削除 (最も柔軟)

この方法は、現代のWeb開発において最も一般的かつ強力なスタイル条件分岐の手法です。条件判定そのものはJavaScriptで行い、その結果に応じてHTML要素にCSSクラスを追加したり削除したりすることで、見た目を変化させます。

2.1.1. 仕組みと基本的な考え方

HTML要素はclass属性を使って複数のクラスを持つことができます。CSSでは、これらのクラスをセレクターとして利用し、特定のクラスが付与されている要素に対してスタイルを適用できます。

JavaScriptは、HTML要素の取得、イベントの監視（クリック、スクロール、フォーム入力など）、条件判定、そして要素のclassListプロパティを使ってクラスを追加 (add())、削除 (remove())、または切り替え (toggle()) する機能を持っています。

この仕組みを組み合わせることで、「ユーザーがボタンをクリックしたら」「フォームの入力値が特定の条件を満たしたら」「Ajaxリクエストが完了したら」など、JavaScriptで判断可能なあらゆる条件に基づいて要素のクラスを操作し、それに紐づいたCSSスタイルを適用したり解除したりすることが可能になります。

基本的な流れは以下の通りです。

  1. HTML: 条件によってスタイルを変えたい要素を用意する。
  2. CSS: 条件が満たされたときに適用したいスタイルを、特定のクラスに対するルールとして記述しておく。
  3. JavaScript: 条件を判定し、その結果に基づいて対象のHTML要素にCSSクラスを追加または削除する。
2.1.2. 具体的なコード例

例：ボタンをクリックするとボックスの色が変わる

HTML:

“`html






JavaScriptでクラス操作



“`

CSS (style.css):

“`css
.box {
width: 100px;
height: 100px;
background-color: blue; / デフォルトの色 /
transition: background-color 0.3s ease; / 色の変化を滑らかに /
}

/ 条件が満たされたときに適用するスタイル /
.box.is-active {
background-color: red; / 条件が満たされた色 /
}

button {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
“`

JavaScript (script.js):

“`javascript
// 要素を取得
const boxElement = document.querySelector(‘.box’);
const toggleButton = document.getElementById(‘toggleButton’);

// ボタンがクリックされた時の処理
toggleButton.addEventListener(‘click’, function() {
// boxElementに’is-active’クラスが付いているか判定
if (boxElement.classList.contains(‘is-active’)) {
// 付いていれば削除する（青に戻す）
boxElement.classList.remove(‘is-active’);
console.log(‘クラス削除: is-active’);
} else {
// 付いていなければ追加する（赤にする）
boxElement.classList.add(‘is-active’);
console.log(‘クラス追加: is-active’);
}

// または、もっとシンプルにclassList.toggle()を使う
// boxElement.classList.toggle('is-active');
// console.log('クラス切り替え: is-active');

});
“`

この例では、JavaScriptがボタンのクリックというイベントを監視し、クリックされるたびに.box要素にis-activeというクラスを付けたり外したりしています。CSSでは、.boxクラスを持つ要素のデフォルトスタイル（青い背景）と、.boxクラスかつis-activeクラスを持つ要素に適用されるスタイル（赤い背景）を定義しています。これにより、JavaScriptの条件判定結果（この場合はボタンのクリック回数、または現在の状態）に基づいてスタイルが切り替わります。

クラス名の命名規則として、状態を表すクラスにはis-やhas-といったプレフィックスを付けることが推奨されることがあります（例: is-active, has-error, is-hiddenなど）。これにより、そのクラスがスタイルのための状態を示すクラスであることを明確にできます。

2.1.3. 主なユースケース
  • ユーザーの操作に基づくスタイル変更: ボタンの押下、リンクのクリック、フォーム入力、ドラッグ＆ドロップなどに応じた要素のハイライト、アクティブ状態表示、入力エラー表示など。
  • UIの状態管理: モーダルウィンドウの表示/非表示、ドロップダウンメニューの開閉、アコーディオンパネルの展開/折りたたみ、タブ切り替えなど。
  • アプリケーションの状態に基づく表示: データのロード中、送信成功/失敗、ユーザーのログイン状態、特定の条件を満たしたアイテムの強調表示など。
  • フォームのバリデーション: 入力フィールドが有効か無効か、必須項目が入力されているかなどに合わせて、フィールドや関連メッセージのスタイルを変える。
  • テーマ切り替え: テーマの名前（例: theme-dark, theme-light）をボディ要素などの親要素にクラスとして付与し、そのクラスセレクターを使って子孫要素のスタイル（色、背景など）をまとめて切り替える。
2.1.4. メリット・デメリット

メリット:

  • 非常に柔軟: JavaScriptで判定可能なあらゆる条件に基づいてスタイルを制御できます。
  • 強力: 複雑なロジックやアプリケーションの状態変化にも対応できます。
  • CSSとJavaScriptの役割分担が明確: CSSは「特定の状態のときの見た目」を定義し、JavaScriptは「いつその状態になるか」を制御します。
  • 保守性が高い: スタイルの変更はCSSファイルに、状態管理のロジックはJavaScriptファイルに集約できます。
  • 再利用性が高い: 定義したクラスは、異なる要素や異なる条件判定ロジックから再利用できます。

デメリット:

  • JavaScriptの知識が必要: HTMLとCSSだけでは完結せず、JavaScriptによるDOM操作の知識が必須になります。
  • パフォーマンスに影響の可能性: 大量の要素に対して頻繁にクラス操作を行う場合、パフォーマンスに影響を与える可能性があります（ただし、ほとんどのユースケースでは問題になりません）。
  • 開発の手間: CSSの記述だけでなく、それを操作するためのJavaScriptコードも書く必要があります。

JavaScriptによるクラス操作は、最も表現力が高く、現代のインタラクティブなWebサイトやSPA（Single Page Application）開発においては不可欠な手法です。ほとんどの実行時条件に基づくスタイル変更は、この方法で実現できます。

2.2. 方法2: メディアクエリ (デバイス特性に基づく条件分岐)

メディアクエリは、CSSの標準機能であり、主にデバイスの特性（画面の幅や高さ、解像度、表示の向きなど）に基づいてスタイルを条件分岐させるために使用されます。レスポンシブWebデザインの基盤となる技術です。

2.2.1. 仕組みと基本的な考え方

メディアクエリは、@mediaルールを用いて記述します。このルールの後ろにメディアタイプ（例: screen, printなど）と、そのルールブロック内のスタイルを適用するためのメディア特性（例: min-width, max-width, orientationなど）を指定します。指定した条件が満たされる場合のみ、@mediaブロック内のCSSルールが有効になります。

ブラウザはビューポートのサイズ変更など、デバイスの特性が変化した際にメディアクエリの条件を再評価し、必要に応じてスタイルを動的に切り替えます。

2.2.2. 具体的なコード例

例：画面幅によってボックスの色とサイズを変える

CSS:

“`css
.box {
width: 100px;
height: 100px;
background-color: blue; / デフォルト（狭い画面） /
margin: 20px;
}

/ 画面幅が600px以上の場合に適用されるスタイル /
@media screen and (min-width: 600px) {
.box {
width: 150px;
height: 150px;
background-color: green; / 幅広画面での色 /
}
}

/ 画面幅が900px以上の場合にさらに適用されるスタイル /
@media screen and (min-width: 900px) {
.box {
width: 200px;
height: 200px;
background-color: orange; / さらに幅広画面での色 /
}
}

/ 印刷時のみ適用されるスタイル /
@media print {
.box {
border: 1px solid black;
background-color: white;
color: black;
}
}
“`

この例では、画面幅が狭いときは青い100x100pxのボックスが表示されます。画面幅が600px以上になると緑の150x150pxのボックスに変わり、さらに900px以上になるとオレンジの200x200pxのボックスに変わります。また、ページを印刷しようとした場合は、背景色が白になり枠線が付加されます。

一般的なメディア特性：

  • width, min-width, max-width: ビューポートの幅
  • height, min-height, max-height: ビューポートの高さ
  • resolution, min-resolution, max-resolution: 出力デバイスの解像度
  • orientation: デバイスの向き (portrait 縦向き, landscape 横向き)
  • prefers-color-scheme: ユーザーがOSで設定しているテーマ (light 明るい, dark 暗い)
  • prefers-reduced-motion: ユーザーがアニメーションを控える設定にしているか (no-preference, reduce)

複数の条件を組み合わせることもできます (and, or (level 4+), not).

css
/* 画面で、かつ幅が480pxから768pxの間の場合 */
@media screen and (min-width: 480px) and (max-width: 768px) {
/* ... */
}

2.2.3. 主なユースケース（レスポンシブデザイン）
  • レイアウトの調整: 画面幅に応じてカラム数を変更したり、要素の並び順を変えたり、要素の表示/非表示を切り替えたりする。
  • フォントサイズや余白の調整: 画面サイズに合わせて読みやすいフォントサイズや適切な余白を設定する。
  • 画像の切り替え: 画面サイズや解像度に合わせて異なるサイズの画像を読み込む（HTMLの<picture>要素や<img>タグのsrcset/sizes属性と組み合わせて使用）。
  • 特定の要素の非表示: モバイルでは不要な要素を非表示にするなど。
  • プリンター用のスタイル定義: 印刷時に不要な要素（ナビゲーション、フッターなど）を非表示にしたり、背景色をなくしたりする。
  • ユーザー設定の反映: ダークモードに対応したり、アニメーションを減らしたりする。
2.2.4. メリット・デメリット

メリット:

  • CSS単体で実現可能: JavaScriptを必要としないため、パフォーマンスが高く、実装がシンプルです。
  • レスポンシブデザインの標準: デバイスの特性に応じたスタイリングには最も適しており、広くサポートされています。
  • 状態の自動更新: デバイスの特性が変化すると、ブラウザが自動的にスタイルを再適用します。
  • パフォーマンス: ブラウザによる効率的な処理が行われます。

デメリット:

  • デバイスの特性に限定される: ユーザーの操作やアプリケーションの状態といった、実行時の動的な条件には対応できません。
  • 特定のHTML要素の状態に基づいた条件には不向き: 例えば、「この入力フィールドがエラー状態の場合」といった、個別の要素の状態による条件分岐は直接できません（一部:has()で可能になる場合もありますが、限定的です）。

メディアクエリは、デバイスや環境といった比較的大局的な条件に基づいてスタイルを変える場合に非常に強力です。レイアウトや基本的な見た目を画面サイズに合わせて調整する際には、まずメディアクエリの使用を検討すべきです。

2.3. 方法3: 属性セレクターの活用 (JavaScriptと連携)

HTML要素には様々な属性（id, class, href, src, type, data-*など）があります。CSSの属性セレクターを使えば、これらの属性の存在や値に基づいてスタイルを適用できます。JavaScriptを使って要素の属性値を動的に変更することで、属性セレクターをスタイル条件分岐の仕組みとして利用できます。

2.3.1. 仕組みと基本的な考え方

CSSの属性セレクターは以下のようになります。

  • [attribute]: 指定した属性を持つ要素
  • [attribute="value"]: 指定した属性を持ち、その値が”value”である要素
  • [attribute~="value"]: 指定した属性を持ち、その値がスペース区切りのリストであり、リスト中に”value”を含む要素
  • [attribute|="value"]: 指定した属性を持ち、その値が”value”であるか、”value-“で始まる要素
  • [attribute^="value"]: 指定した属性を持ち、その値が”value”で始まる要素
  • [attribute$="value"]: 指定した属性を持ち、その値が”value”で終わる要素
  • [attribute*="value"]: 指定した属性を持ち、その値に”value”を含む要素

特に、HTML5から導入されたdata-*属性は、カスタムデータを要素に持たせるために使われます。data-status, data-state, data-themeなどの属性を定義し、JavaScriptでその属性値を変更することで、属性セレクターを使った条件分岐を実現できます。

基本的な流れは、JavaScriptによるクラス操作と似ていますが、クラス名の代わりに属性名と属性値を使います。

  1. HTML: 条件によってスタイルを変えたい要素にdata-*属性などを追加しておく。
  2. CSS: 条件が満たされたときに適用したいスタイルを、属性セレクターに対するルールとして記述しておく。
  3. JavaScript: 条件を判定し、その結果に基づいて対象のHTML要素の属性値（例: dataset.status）を変更する。
2.3.2. 具体的なコード例

例：データ属性の値によってメッセージの色を変える

HTML:

“`html






属性セレクターで条件分岐

これは情報メッセージです。



“`

CSS (style.css):

“`css
.message-box {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}

/ data-status=”info” の場合 /
.message-box[data-status=”info”] {
background-color: #e0f7fa;
border-color: #00bcd4;
color: #006064;
}

/ data-status=”success” の場合 /
.message-box[data-status=”success”] {
background-color: #e8f5e9;
border-color: #4caf50;
color: #1b5e20;
}

/ data-status=”warning” の場合 /
.message-box[data-status=”warning”] {
background-color: #fffde7;
border-color: #ffeb3b;
color: #f57f17;
}

/ data-status=”error” の場合 /
.message-box[data-status=”error”] {
background-color: #ffebee;
border-color: #f44336;
color: #c62828;
}

button {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
“`

JavaScript (script.js):

“`javascript
const messageBox = document.querySelector(‘.message-box’);
const changeStatusButton = document.getElementById(‘changeStatusButton’);

const statuses = [‘info’, ‘success’, ‘warning’, ‘error’];
let currentStatusIndex = 0;

changeStatusButton.addEventListener(‘click’, function() {
// 現在のステータスを次のステータスに更新
currentStatusIndex = (currentStatusIndex + 1) % statuses.length;
const nextStatus = statuses[currentStatusIndex];

// data-status属性の値を変更
messageBox.dataset.status = nextStatus;
// または messageBox.setAttribute('data-status', nextStatus);

console.log('ステータス変更:', nextStatus);

});
“`

この例では、data-statusという属性の値をJavaScriptで変更することで、CSSの属性セレクターによって異なる背景色やボーダーカラーが適用されます。datasetプロパティを使うと、data-*属性に簡単にアクセスできます (data-statusはdataset.statusとしてアクセス可能)。

2.3.3. 主なユースケース
  • コンポーネントの状態表示: ボタンがdisabledかどうか ([disabled]), チェックボックスがcheckedかどうか ([checked]), フォームフィールドがrequiredかどうか ([required]), カスタム要素の内部状態（例: data-expanded="true"）など。
  • テーマやモードの切り替え: 全体または特定の要素のdata-theme属性やdata-mode属性（例: data-theme="dark"）を切り替えることで、テーマを一括変更する。
  • フィルタリングやソート状態の表示: リストアイテムにdata-category="electronics"のような属性を付けておき、JavaScriptで表示/非表示を切り替えたり、特定の属性を持つアイテムを強調表示したりする。
  • 国際化（i18n）: 表示言語を示すlang属性や、テキストの方向を示すdir属性（[dir="rtl"]など）に基づいてスタイルを調整する。
  • フォームバリデーション: 入力フィールドにdata-valid="false"のような属性を付け、エラーがある場合にスタイルを適用する。
2.3.4. メリット・デメリット

メリット:

  • クラス操作と同様の柔軟性: JavaScriptで属性値を操作することで、様々な条件に対応できます。
  • 意味付け: クラス名よりも属性名・属性値の方が、その状態が何を表しているかを意味的に分かりやすく表現できる場合があります（例: data-status="error"は.is-errorよりも状態が明確）。
  • 複数の状態を属性で表現: 複数の状態を表現したい場合、複数のクラスを使う代わりに、1つの属性で異なる値を使い分けることができます（例: data-state="loading", data-state="loaded", data-state="error"）。

デメリット:

  • JavaScriptの知識が必要: クラス操作と同様、JavaScriptによる属性値の操作が必須です。
  • 属性名の重複: 標準HTML属性と同じ名前のdata-*属性は避けるべきです。
  • CSSセレクターの複雑化: 属性セレクターはクラスセレクターに比べて記述が少し長くなる傾向があり、複雑な値の条件指定では可読性が低下する可能性があります。
  • 詳細度: 属性セレクターの詳細度はクラスセレクターと同じですが、複数の属性を組み合わせる場合は詳細度が高くなります。

クラス操作と属性セレクターは、JavaScriptと連携してスタイルを条件分岐させるという点で非常に似ています。どちらを使うかは、表現したい状態の意味合いや、開発チームのコーディング規約によって判断されることが多いです。シンプルにON/OFFを切り替えたい場合はクラス、複数の離散的な状態を表したい場合は属性、といった使い分けが考えられます。

2.4. 方法4: :has()擬似クラス (親要素の状態に基づく条件分岐)

:has()擬似クラスは比較的新しいCSSの機能で、ある要素が特定の条件を満たす子孫要素を持っているかどうか、あるいは兄弟要素が特定の状態であるかどうか、など、要素間の関係性に基づいてスタイルを適用できる強力なセレクターです。「もしこの要素が〇〇を含んでいたら、この要素自身のスタイルや、その中の△△のスタイルを変える」といった、「親セレクター」のような振る舞いが実現できます。

2.4.1. 仕組みと基本的な考え方

:has(relative-selector)の構文で記述し、:has()の直前のセレクター（アンカー要素と呼ばれることが多い）が、括弧内のrelative-selectorにマッチする要素（子孫や兄弟など）を持っている場合に、アンカー要素自身やその中の要素にスタイルを適用できます。

これにより、以前はJavaScriptを使わないと難しかった「コンテナの状態に基づいて中のアイテムのスタイルを変える」といったことがCSS単体で可能になります。

例: 「もし要素Aの中に要素Bがあったら、要素Aの背景色を変える」

css
.container:has(.item) {
background-color: yellow; /* containerの中に.itemがあったら背景を黄色に */
}

例: 「もし要素Aの中に要素Bがあったら、要素B自身の文字色を変える」

css
.container:has(.item) .item {
color: red; /* containerの中に.itemがあったら、その.itemの文字色を赤に */
}

2.4.2. 具体的なコード例

例：フォームグループにエラークラスを持つ入力欄が含まれていたら、ラベルの色を変える

HTML:

“`html






:has()擬似クラス

:has()の使用例



正しいメールアドレスを入力してください。



“`

CSS (style.css):

“`css
.form-group {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333; / デフォルトのラベル色 /
}

.form-group input {
padding: 5px;
border: 1px solid #ccc;
}

.form-group input.error {
border-color: red;
}

.form-group .error-message {
color: red;
font-size: 0.9em;
margin-top: 5px;
}

/ ここが:has()を使う部分 /
/ form-group内に.errorクラスを持つ要素（入力欄など）が含まれている場合、
そのform-group内のlabelの色を赤にする /
.form-group:has(.error) label {
color: red;
}

/ form-group内に.error-messageクラスを持つ要素が含まれている場合、
そのform-groupのボーダー色を赤にする /
.form-group:has(.error-message) {
border-color: red;
}
“`

この例では、JavaScriptを使わずに、CSS単体でフォームグループ内の要素の状態（.errorクラスが付与されているか、.error-messageが表示されているか）に基づいて、親要素である.form-groupのボーダーや、その中のlabelのスタイルを変更しています。以前は、入力フィールドにエラークラスが付いたら、JavaScriptを使って親要素やラベルに別途エラークラスを付与する必要がありました。

2.4.3. 主なユースケース
  • フォームのバリデーション表示: 入力フィールドの状態（:valid, :invalid, :required, またはJavaScriptで付与された.errorクラスなど）に基づいて、親要素（フォームグループ）やラベル、アイコンなどのスタイルを変更する。
  • コンテナ内のアイテムの状態に応じたスタイリング: 特定のアイテムがアクティブ、選択済み、無効などの状態にある場合に、コンテナ全体のスタイルや他のアイテムのスタイルを変更する。
  • リストアイテムのバリエーション: 特定の種類のアイコンや子要素を持つリストアイテムだけスタイルを変える。
  • 空の状態の表示: 要素が空かどうか（:empty擬似クラスと組み合わせて）に基づいて、親要素にスタイルを適用する。
  • 兄弟要素の状態: フォーム入力時に、その直後のエラーメッセージ要素が存在する場合に、入力フィールドのスタイルを変える (input:has(+ .error-message))。
2.4.4. メリット・デメリット・対応ブラウザ

メリット:

  • CSS単体で実現可能: JavaScriptを減らし、HTMLとCSSだけで多くの条件に応じたスタイリングが可能になります。
  • セマンティックなHTML: 状態を表すクラスや属性を、実際に状態を持つ要素（入力フィールドなど）にだけ付ければ良くなり、親要素に状態伝達のためのクラスを付ける必要がなくなる場合があります。
  • 可読性と保守性の向上: スタイルのルールが、条件となる要素の関係性の近くに記述できるため、コードが分かりやすくなることがあります。

デメリット:

  • 対応ブラウザに注意: :has()は比較的新しい機能であり、古いブラウザではサポートされていません（主要なモダンブラウザでは概ね利用可能になってきています）。Can I useなどで確認が必要です。
  • パフォーマンスの懸念: 複雑な:has()セレクターは、ブラウザのスタイル計算に負荷をかける可能性があります。ただし、ほとんどの一般的なユースケースでは大きな問題にはなりません。
  • 表現力に限界: JavaScriptによる完全な条件判定や複雑なアプリケーションの状態管理ほど自由ではありません。要素間の静的な関係性や、CSSで表現できる状態（擬似クラス、属性セレクターなど）に基づく条件に限定されます。

:has()は、JavaScriptのクラス操作の一部をCSSに移譲できる可能性を秘めた強力な機能です。特にフォームのバリデーション表示など、要素間の局所的な状態に基づくスタイル変更においては、コードをシンプルにする有効な手段となり得ます。ただし、対応ブラウザには常に注意が必要です。

2.5. 方法5: CSS変数 (Custom Properties) の動的変更 (JavaScriptと連携)

CSS変数（正式にはCustom Properties）は、CSSファイル内で再利用可能な値を定義するための機能です。このCSS変数の値をJavaScriptを使って動的に変更することで、その変数を使用している要素のスタイルを一括して変更できます。

2.5.1. 仕組みと基本的な考え方

CSS変数は--で始まる名前で定義され、var()関数を使ってその値を参照します。

“`css
:root { / または特定の要素 /
–main-color: blue;
–element-size: 100px;
}

.box {
width: var(–element-size);
height: var(–element-size);
background-color: var(–main-color);
}
“`

JavaScriptからは、要素のstyleプロパティやgetPropertyValue(), setProperty()メソッドを使ってCSS変数の値を読み書きできます。要素のローカルな変数だけでなく、:rootセレクターで定義されたグローバルな変数も変更可能です。

“`javascript
// 要素のCSS変数を設定
element.style.setProperty(‘–main-color’, ‘red’);

// グローバルなCSS変数を設定 (:rootに設定された変数など)
document.documentElement.style.setProperty(‘–main-color’, ‘green’);
“`

JavaScriptで条件判定を行い、その結果に基づいてCSS変数の値を変更することで、その変数を使用しているすべての要素のスタイルを動的に調整できます。

2.5.2. 具体的なコード例

例：ボタンクリックでテーマカラーを切り替える（ダークモード/ライトモード）

HTML:

“`html






CSS変数でテーマ切り替え

タイトル

これは本文です。背景色と文字色が切り替わります。



“`

CSS (style.css):

“`css
/ デフォルトのテーマ（ライトモード）のCSS変数 /
:root {
–background-color: #ffffff;
–text-color: #333333;
–button-bg-color: #eeeeee;
–button-text-color: #333333;
}

/ ダークモードのCSS変数（JavaScriptで:rootにこれらの変数を設定することで切り替える） /
/
.dark-theme {
–background-color: #333333;
–text-color: #ffffff;
–button-bg-color: #555555;
–button-text-color: #ffffff;
}
/

body {
background-color: var(–background-color);
color: var(–text-color);
transition: background-color 0.3s ease, color 0.3s ease; / スムーズな切り替え /
}

.container {
padding: 20px;
border: 1px solid var(–text-color); / 変数を使う /
}

h1 {
color: var(–text-color); / 変数を使う /
}

button {
margin-top: 20px;
padding: 10px 20px;
background-color: var(–button-bg-color); / 変数を使う /
color: var(–button-text-color); / 変数を使う /
border: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease; / スムーズな切り替え /
}
“`

JavaScript (script.js):

“`javascript
const toggleThemeButton = document.getElementById(‘toggleThemeButton’);
const rootElement = document.documentElement; // :root に対応

let isDarkMode = false; // 現在の状態を管理

toggleThemeButton.addEventListener(‘click’, function() {
isDarkMode = !isDarkMode; // 状態を切り替える

if (isDarkMode) {
    // ダークモード用のCSS変数を設定
    rootElement.style.setProperty('--background-color', '#333333');
    rootElement.style.setProperty('--text-color', '#ffffff');
    rootElement.style.setProperty('--button-bg-color', '#555555');
    rootElement.style.setProperty('--button-text-color', '#ffffff');
    console.log('ダークモードに切り替え');
} else {
    // ライトモード用のCSS変数を設定 (初期値に戻す)
    rootElement.style.setProperty('--background-color', '#ffffff');
    rootElement.style.setProperty('--text-color', '#333333');
    rootElement.style.setProperty('--button-bg-color', '#eeeeee');
    rootElement.style.setProperty('--button-text-color', '#333333');
    console.log('ライトモードに切り替え');
}

});
“`

この例では、:rootに定義されたCSS変数の値をJavaScriptで変更することで、サイト全体の背景色、文字色、ボタンの色などを一括で切り替えています。CSS側では、各要素に直接色を指定するのではなく、CSS変数を参照するように記述しておきます。

より洗練された方法として、JavaScriptでボディ要素などにdark-themeのようなクラスを付与し、そのクラスセレクターの中でダークモード用のCSS変数を定義する方法もあります。

CSS (style.css – 別の方法):

“`css
/ デフォルトのテーマ（ライトモード）のCSS変数 /
:root {
–background-color: #ffffff;
–text-color: #333333;
/ …他の変数 /
}

/ .dark-themeクラスがbodyに付与された場合に適用される変数 /
body.dark-theme {
–background-color: #333333;
–text-color: #ffffff;
/ …他の変数 /
}

body {
background-color: var(–background-color);
color: var(–text-color);
/ …他のスタイル /
}
/ …変数を使用する他の要素のスタイル /
“`

JavaScript (script.js – 別の方法):

“`javascript
const toggleThemeButton = document.getElementById(‘toggleThemeButton’);
const bodyElement = document.body;

toggleThemeButton.addEventListener(‘click’, function() {
// body要素にdark-themeクラスを付け外しする
bodyElement.classList.toggle(‘dark-theme’);

const themeState = bodyElement.classList.contains('dark-theme') ? 'ダークモード' : 'ライトモード';
console.log('テーマ切り替え:', themeState);

});
“`

この方法では、JavaScriptはクラスの付け外しだけを行い、CSS変数の具体的な値の定義はCSS側で行います。これにより、スタイルの定義がCSSファイルに集約され、より保守しやすくなります。これは「JavaScriptによるクラス操作」と「CSS変数の動的変更」を組み合わせた効果的なパターンと言えます。

2.5.3. 主なユースケース
  • テーマの切り替え: ライトモード/ダークモード、ユーザーが選択したカラーテーマなど、サイト全体のカラースキームを動的に変更する。
  • 動的なスタイルの調整: ユーザーがスライダーを操作してフォントサイズや余白を変更できるようにするなど、細かなスタイルプロパティの値をJavaScriptの入力に応じて調整する。
  • アニメーション: JavaScriptでCSS変数の値を連続的に変更することで、複雑なアニメーションを実現する。
  • コンポーネントのカスタマイズ: JavaScriptからコンポーネントの特定のCSS変数を変更できるようにすることで、そのコンポーネントの見た目を外部から簡単にカスタマイズできるようにする。
2.5.4. メリット・デメリット

メリット:

  • スタイルプロパティの値を直接操作: 色、サイズ、間隔など、具体的なCSSプロパティの値を動的に変更するのに適しています。
  • 複数のスタイルへの一括適用: CSS変数を参照している複数の場所のスタイルを、変数の値を変更するだけで一括して更新できます。
  • CSSの構造を維持: スタイル定義はCSSファイルに保持したまま、変数という「値」だけをJavaScriptで操作するため、スタイルとロジックの分離が比較的きれいに保たれます。
  • アニメーションとの連携: CSS変数自体は直接アニメーションできませんが、CSSアニメーションやトランジションのプロパティでCSS変数を使うことは可能です。また、JavaScriptでCSS変数の値を高速に書き換えることで、より柔軟なアニメーションを実現できます。

デメリット:

  • JavaScriptの知識が必要: 変数の値を動的に変更するためには、JavaScriptのコードが必要です。
  • 構造的な条件分岐には不向き: 要素の表示/非表示、レイアウトの根本的な変更など、スタイルプロパティの値の変更だけでは難しい条件分岐には適していません。主に色、サイズ、フォント、間隔などの値の変更に使われます。
  • 変数の参照に関する注意: var()関数は、参照する変数が定義されていない場合、そのプロパティは無効になります。フォールバック値を指定できますが、変数のスコープや定義場所には注意が必要です。

CSS変数は、スタイルシート全体の特定の値をJavaScriptから操作したい場合に非常に有効な手段です。テーマ切り替えのような、サイト全体の色やサイズに関する動的な変更には特におすすめです。

2.6. 方法6: 親セレクターの状態を利用 (:hover, :focusなど)

これはCSS単体で実現できる比較的基本的な条件分岐です。特定の要素（通常は親要素やコンテナ要素）の特定の状態（ホバーされているか、フォーカスされているか、アクティブかなど）に基づいて、その要素自身や子孫要素のスタイルを変更します。

2.6.1. 仕組みと基本的な考え方

CSSの擬似クラス (Pseudo-classes) を利用します。擬似クラスは、要素の特別な状態を指定するためのセレクターです。

よく使われる擬似クラス：

  • :hover: 要素がマウスカーソルによってホバーされている状態
  • :focus: 要素がフォーカスされている状態（キーボード操作やクリックなど）
  • :active: 要素がクリック（押下）されている間など、アクティブな状態
  • :checked: チェックボックスやラジオボタンなどがチェックされている状態
  • :disabled: 要素が無効化されている状態
  • :enabled: 要素が有効な状態
  • :first-child, :last-child, :nth-child(): 兄弟要素の中での位置に基づく状態
  • :only-child: 親要素の中で唯一の子要素である状態
  • :empty: 子要素（テキストノードや要素ノード）を持たない状態
  • :target: URLのフラグメント識別子と一致するIDを持つ要素

これらの擬似クラスを親要素や特定のトリガー要素に指定し、それに続いて子孫セレクターや兄弟セレクターを組み合わせることで、「親要素がホバーされたら、子要素の色を変える」といった条件分岐を実現できます。

2.6.2. 具体的なコード例

例：親要素をホバーすると、子要素のテキストの色が変わる

HTML:

“`html






親要素の状態

親要素の状態利用

カードタイトル

このテキストは親要素がホバーされると色が変わります。


“`

CSS (style.css):

“`css
.card {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
transition: background-color 0.3s ease;
}

/ cardクラスを持つ要素がホバーされたら /
.card:hover {
background-color: #f0f0f0;
}

/ cardクラスを持つ要素がホバーされたら、その中のdescriptionクラスを持つ要素の色を変える /
.card:hover .description {
color: blue; / ホバー時の色 /
font-weight: bold;
}

/ フォーカス可能な要素（ボタンなど）のスタイル例 /
.styled-button {
padding: 10px 15px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
cursor: pointer;
outline: none; / デフォルトのフォーカスアウトラインを消す場合 /
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/ styled-buttonがホバーされたら /
.styled-button:hover {
background-color: #0056b3;
border-color: #004085;
}

/ styled-buttonがフォーカスされたら /
.styled-button:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); / フォーカスリング /
}

/ styled-buttonがアクティブ（押下中）されたら /
.styled-button:active {
background-color: #004085;
border-color: #002752;
}
“`

この例では、.card要素がホバーされたときに、その要素自身の背景色が変わると同時に、その子要素である.descriptionの文字色と太さが変わるようにスタイルを定義しています。また、ボタンに対して:hover, :focus, :active擬似クラスを使って、それぞれ異なる視覚的なフィードバックを与えています。

2.6.3. 主なユースケース
  • インタラクティブな要素: ボタン、リンク、メニューアイテムなどがホバーされたり、フォーカスされたり、アクティブになったりしたときのスタイル変更。
  • カードやリストアイテムの強調: マウスオーバー時に背景色を変えたり、影を付けたりして、インタラクティブであることを示す。
  • フォーム要素のフィードバック: 入力フィールドがフォーカスされたときに枠線の色を変えたり、エラー/成功などの状態を擬似クラスや属性セレクター（:invalid, :valid, [required]など）と組み合わせて表示したりする。
  • ナビゲーションメニュー: 現在表示しているページに対応するメニューアイテムに:target擬似クラスを使ってアクティブなスタイルを適用する（URLフラグメントリンキングと組み合わせる場合）。
  • 空の状態の要素: 要素が空の場合は非表示にする、あるいは「コンテンツがありません」といったメッセージを表示する（スタイルでメッセージを表示するのは難しいですが、空の状態の要素のサイズやボーダーを調整するなどは可能です）。
2.6.4. メリット・デメリット

メリット:

  • CSS単体で実現可能: JavaScriptを必要とせず、実装がシンプルです。
  • パフォーマンスが高い: ブラウザによる効率的な処理が行われます。
  • 基本的なインタラクションに最適: ホバーやフォーカスといったユーザーの直接的な操作に対するフィードバックの実装に広く使われています。

デメリット:

  • 限られた条件: 対応する擬似クラスで表現できる状態に限定されます。アプリケーションの状態や複雑なロジックに基づく条件には対応できません。
  • DOM構造への依存: 親要素の状態に基づいて子要素のスタイルを変える場合、HTMLのDOM構造に強く依存します。構造が変わるとCSSのセレクターも変更する必要が出てきます。
  • :has()がない場合の制約: かつては「子要素の状態に基づいて親要素のスタイルを変える」ことがCSS単体では非常に困難でしたが、:has()の登場により、この制約は緩和されつつあります。しかし、まだ完全に置き換えられるわけではありません。

親要素の状態を利用する方法は、ユーザーの直接的な操作に対する視覚的なフィードバックを実装する上で非常に重要かつ基本的な手法です。多くのインタラクティブな要素で当たり前のように使われています。

2.7. 方法7: CSSプリプロセッサーの条件分岐 (@if) (コンパイル時)

SassやLess、StylusといったCSSプリプロセッサーを使用している場合、これらの言語自体がプログラミング言語ライクな機能を提供しており、その中に条件分岐（@if, @else if, @elseなど）が含まれます。しかし、これは非常に重要な違いなのですが、この条件分岐はCSSファイルが生成される「コンパイル時」に評価されるものであり、ユーザーがブラウザでページを見ている「実行時」に動的にスタイルが変わるものではありません。

「CSS if文」を探している方が、もしSassのような環境で「開発効率のために特定の条件でスタイルを生成したりしなかったりしたい」という意味でif文を求めているのであれば、この方法が該当します。しかし、ユーザーの操作や状態に応じてリアルタイムにスタイルを変えたいのであれば、前述のJavaScriptやメディアクエリを使った方法を検討する必要があります。

2.7.1. 仕組みと基本的な考え方

CSSプリプロセッサーは、独自の構文で書かれたファイルを読み込み、それを標準のCSSファイルに変換（コンパイル）するツールです。プリプロセッサー言語は、変数、ミックスイン（関数のよう）、継承、そして条件分岐などの機能を提供します。

Sassの場合、@if, @else if, @elseディレクティブを使って条件分岐を記述できます。条件として使えるのは、Sassの変数や関数の評価結果など、コンパイル時に確定できる値や論理式です。

“`scss
// Sassの例
$theme: dark; // または light

.header {
padding: 20px;

@if $theme == dark {
background-color: #333;
color: white;
} @else if $theme == light {
background-color: #f0f0f0;
color: #333;
} @else {
// デフォルト
background-color: blue;
color: white;
}
}

// 変数を使ってオン/オフを切り替える例
$enable-debug-border: true;

.debug-element {
@if $enable-debug-border {
border: 1px solid red;
}
}
“`

このSassコードは、$theme変数の値がdarkかlightかによって、.headerの背景色と文字色が異なるCSSとして出力されます。また、$enable-debug-borderがtrueの場合のみ、.debug-elementに赤いボーダーが付くCSSが出力されます。

重要なのは、コンパイルが完了した後のCSSファイルには、上記の@ifディレクティブは含まれず、条件に基づいて生成された最終的なCSSルールだけが含まれるということです。

2.7.2. 具体的なコード例 (Sassの場合)

Sass (.scss) ファイル:

“`scss
// _variables.scss (変数を定義するファイルなど)
$use-compact-layout: false;
$base-font-size: 16px;
$is-production: true; // 本番環境かどうかを示す変数

// style.scss
@import ‘variables’; // 変数ファイルをインポート

body {
font-size: $base-font-size;
line-height: 1.5;
}

.container {
padding: 20px;

@if $use-compact-layout {
padding: 10px; // compact-layoutがtrueならpaddingを狭くする
}
}

.info-box {
border: 1px solid blue;
padding: 15px;
margin-bottom: 15px;

// デバッグ情報など、本番環境では不要なスタイル
@if not $is-production {
background-color: yellow; // 開発環境でのみ背景を黄色にする
}
}

// 特定の条件が満たされる場合のみ、特定のミックスインをインクルードする
@mixin rounded-corners($radius: 5px) {
border-radius: $radius;
}

$apply-rounded-corners: true;

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;

@if $apply-rounded-corners {
@include rounded-corners(8px);
} @else {
border-radius: 0;
}
}
“`

このSassファイルをコンパイルすると、例えば$use-compact-layout: false;かつ$is-production: true;かつ$apply-rounded-corners: true;の場合、以下のようなCSSが出力されます。

コンパイル後のCSSファイル:

“`css
body {
font-size: 16px;
line-height: 1.5;
}

.container {
padding: 20px;
}

.info-box {
border: 1px solid blue;
padding: 15px;
margin-bottom: 15px;
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 8px;
}
“`

もし$use-compact-layout: true;かつ$is-production: false;かつ$apply-rounded-corners: false;に変更して再度コンパイルすると、出力されるCSSは以下のようになります。

“`css
body {
font-size: 16px;
line-height: 1.5;
}

.container {
padding: 10px; / compact-layoutがtrueになった /
}

.info-box {
border: 1px solid blue;
padding: 15px;
margin-bottom: 15px;
background-color: yellow; / is-productionがfalseになった /
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 0; / apply-rounded-cornersがfalseになった /
}
“`

このように、Sassの@ifは開発者が変数の値を変更してコンパイルし直すことで、異なるスタイルセットを含むCSSファイルを生成するために使用されます。

2.7.3. 主なユースケース
  • 開発環境/本番環境ごとのスタイル調整: デバッグ用のボーダーや背景色を開発環境でのみ表示する。
  • 機能のオン/オフによるスタイル切り替え: 特定のコンポーネントや機能のスタイルを、変数一つで一括して有効/無効にする。
  • レイアウトバリエーションの生成: 変数の値に応じて、コンテナのパディングを変えたり、特定の要素の表示/非表示を切り替えるスタイルを生成したりする。
  • テーマバリエーションの生成: 変数でテーマ（例: dark, light, corporateなど）を指定し、コンパイル時にそのテーマに応じた色やサイズをCSS変数として定義したり、直接要素にスタイルを適用したりする。
  • ベンダープレフィックスの条件付き追加: ベンダープレフィックスが必要な特定のプロパティに対してのみ、ミックスイン内で条件付きでプレフィックス付きのプロパティを出力する（現在はAutoprefixerなどのツールが一般的ですが、プリプロセッサーでも可能です）。
2.7.4. メリット・デメリット

メリット:

  • 開発効率の向上: コンパイル時の変数や条件に基づいてスタイルを生成できるため、手作業でのスタイルの書き換えを減らし、大規模なスタイルシートの管理を効率化できます。
  • スタイルのバリエーション生成: 同じSassコードから、変数の値を変えるだけで異なる見た目のCSSファイルを簡単に生成できます。
  • スタイルシートの軽量化: 実行時には不要なスタイルの定義をコンパイル時に含めないようにすることで、最終的なCSSファイルのサイズを抑えることができます。

デメリット:

  • 実行時の条件には対応不可: ユーザーの操作、アプリケーションの状態、ブラウザのウィンドウサイズ変更など、実行時に変化する条件に基づいてスタイルを動的に変更することはできません。これはコンパイル時に生成される「静的な」CSSであるためです。
  • プリプロセッサーの導入が必要: Sassコンパイラなどのツールを開発環境に導入し、ビルドプロセスに組み込む必要があります。
  • デバッグの複雑化: コンパイル前のSassファイルとコンパイル後のCSSファイルが存在するため、デバッグ時に両方を行き来する必要が出てくる場合があります（Source Mapを使えば緩和できます）。

CSSプリプロセッサーの条件分岐は、開発プロセスを効率化し、コンパイル時に決定される条件に基づいて異なるCSSバリエーションを生成するための強力なツールです。「CSS if文」という言葉で実行時の動的な条件分岐を求めている方にとっては直接の解決策ではありませんが、「CSSライクな構文で開発時に条件付きのスタイル記述をしたい」というニーズには応えられます。

3. どの方法を選ぶべきか？ シナリオ別ガイド

ここまで7つのスタイル条件分岐の方法を見てきました。それぞれに得意なことと苦手なことがあります。では、具体的にどのような状況でどの方法を選ぶのが最適なのでしょうか？目的別に使い分けのガイドラインを示します。

  • 条件が「デバイスの特性」に基づく場合 (画面幅、解像度、向きなど):
    → 方法2: メディアクエリ を使いましょう。これはデバイス特性に基づく条件分岐の標準であり、CSS単体で効率的に実装できます。レスポンシブデザインの基本です。

  • 条件が「ユーザーの操作」や「アプリケーションの状態」に基づく場合 (ボタンクリック、データロード完了、フォーム入力値の検証結果など):
    → 方法1: JavaScriptを利用したクラスの追加・削除 または 方法3: 属性セレクターの活用 を使いましょう。これらの方法はJavaScriptの柔軟な条件判定能力とDOM操作を活かすことで、あらゆる実行時の動的な条件に対応できます。シンプルに状態のON/OFFを切り替えたい場合はクラス、複数の状態を扱いたい場合やセマンティクスを重視したい場合は属性が選択肢になります。

  • 条件が「親要素が特定の子要素や状態を持つか」に基づく場合 (フォームグループにエラー入力欄があるか、コンテナに特定の要素が含まれるかなど):
    → 方法4: :has()擬似クラス を検討しましょう。対応ブラウザの要件を満たすならば、CSS単体で親子の関係性に基づく条件分岐を実現できる強力な方法です。ただし、複雑な条件や状態管理には向きません。

  • 条件が「特定のスタイルプロパティの値を動的に変更したい」場合 (テーマカラーの切り替え、ユーザー設定に応じたフォントサイズ調整など):
    → 方法5: CSS変数 (Custom Properties) の動的変更 (JavaScriptと連携) を使いましょう。JavaScriptでCSS変数の値を書き換えることで、その変数を参照している複数のスタイルを一括で変更できます。特に色やサイズなど、値レベルの動的な変更に適しています。JavaScriptによるクラス操作と組み合わせて、クラスの付け外しでCSS変数のセットを切り替えるパターンも非常に有効です。

  • 条件が「ユーザーの直接的なマウスやキーボード操作」に基づく場合 (:hover, :focus, :activeなど):
    → 方法6: 親セレクターの状態を利用 しましょう。CSSの擬似クラスを使うことで、これらの基本的なインタラクションに対する視覚的なフィードバックをCSS単体で簡単に実装できます。

  • 条件が「開発時/コンパイル時に決定される静的な設定」に基づく場合 (開発モード/本番モード、特定の機能フラグなど):
    → 方法7: CSSプリプロセッサーの条件分岐 (@if) を使いましょう。これは実行時の条件分岐ではなく、コンパイル時に異なるCSSを生成するための機能です。開発効率の向上やスタイルシートのバリエーション管理に役立ちます。

多くの場合、これらの方法は単独ではなく、組み合わせて使用されます。例えば、レスポンシブデザイン（メディアクエリ）の中で、特定の画面サイズになったらJavaScriptで要素のクラスを操作して詳細な表示を切り替える、といった具合です。

4. 実践的なヒントと注意点

スタイルを条件分岐させるこれらの方法を効果的に使うための追加のヒントと注意点です。

  • CSSとJavaScriptの役割分担を明確に:
    基本的には「見た目のルールはCSSで、振る舞いや状態管理はJavaScriptで」という原則を守りましょう。JavaScriptは「いつ」スタイルを変えるかを決め、CSSは「どう変わるか」を定義します。JavaScriptで直接要素のstyleプロパティを書き換えることも可能ですが、これは緊急時や非常に局所的な変更に限るべきです。可能な限りクラスや属性を介してCSSにスタイルを委ねる方が、保守性や管理性が高まります。

  • パフォーマンスへの配慮:
    特にJavaScriptを使ったDOM操作（クラスや属性の変更）は、大量の要素に対して頻繁に行うとパフォーマンスに影響を与える可能性があります。アニメーションなどで高速にスタイルを変えたい場合は、CSSアニメーションやトランジション、あるいはCSS変数の操作などを検討しましょう。また、スクロールイベントなど頻繁に発生するイベント内で複雑な条件判定やDOM操作を行う場合は、デバウンスやスロットリングといった最適化手法を検討してください。

  • 可読性とメンテナンス性:
    条件分岐が複雑になるほど、CSSやJavaScriptのコードは読みにくく、メンテナンスが難しくなります。

    • クラス名や属性名を分かりやすく命名する（例: is-open, data-state="loading"）。
    • 関連するCSSルールをまとめて記述する。
    • JavaScriptのロジックを関数などに分割する。
    • :has()などの新しい機能を使う場合は、対応ブラウザを考慮し、必要に応じて代替手段も検討する。
    • プリプロセッサーを使う場合は、変数の命名やファイルの分割を適切に行う。

  • 詳細度の管理:
    様々なセレクターを使って条件付きスタイルを記述していくと、CSSの詳細度が複雑になり、意図しないスタイルが適用されてしまうことがあります。詳細度を意識し、可能な限りフラットなセレクター構造を保つように努めましょう。BEM（Block, Element, Modifier）などのCSS設計手法は、詳細度を管理しやすくするのに役立ちます。クラスセレクターと属性セレクターの詳細度は同じです。

  • アクセシビリティへの配慮:
    スタイルを条件分岐させる際は、アクセシビリティも考慮する必要があります。

    • キーボード操作で要素にフォーカスが当たったときの:focusスタイルを必ず定義する（視覚的なフォーカスインジケーターは必須です）。
    • 要素の表示/非表示を切り替える際は、スクリーンリーダーのユーザーに適切に情報が伝わるか確認する（例: display: none;は要素を完全に隠しますが、visibility: hidden;やopacity: 0;はスペースを保持し、スクリーンリーダーにも読み上げられる場合があります。完全に隠したい場合はdisplay: none;や[hidden]属性+CSSを使うのが一般的です）。
    • 状態の変化（例: エラーメッセージの表示）を、スタイルだけでなくWAI-ARIA属性（例: aria-invalid, aria-live）でも伝えることを検討する。
    • ユーザーがOSレベルで設定している「アニメーションを減らす」「ハイコントラストモード」といった設定に対応するメディアクエリ (prefers-reduced-motion, prefers-contrastなど) も考慮に入れる。

  • 将来的なCSSの進化:
    CSSは常に進化しています。:has()のように、以前はJavaScriptが必要だった機能がCSS単体で実現できるようになることもあります。将来的に、より高度な条件分岐や状態管理に関するCSS機能が追加される可能性もあります。新しいセレクターや擬似クラス、プロパティが登場した際は、それらがどのようにスタイル条件分岐に利用できるか注目しておきましょう。例えば、コンテナクエリ (Container Queries) は、ビューポートサイズではなく親コンテナのサイズに基づいてスタイルを適用できる機能で、これは特定のコンポーネントの内部的なレイアウトをコンテナの利用場所に応じて変えたい場合に非常に強力な条件分岐手段となります。

これらのヒントを参考に、効率的で保守性の高い、そしてアクセシブルなスタイル条件分岐を実装してください。

5. まとめ：「CSS if文」は存在しないが、目的に合った条件分岐を選ぼう

この記事では、「CSS if文」というキーワードで条件によってスタイルを変える方法を探していたあなたに向けて、CSSに直接的なif文がない理由と、代わりに利用できる7つの主要な代替手段を詳しく解説しました。

CSSにif文のような構文がないのは、CSSが宣言型言語であり、HTMLの見た目を定義することに特化しているという設計思想に基づいているためです。複雑なロジックや実行時の動的な状態管理は、JavaScriptなどのスクリプト言語の役割とされています。

しかし、HTMLの属性、CSSの擬似クラスやメディアクエリ、CSS変数、そしてJavaScriptとの連携といった様々な技術を組み合わせることで、要求されるほとんど全ての条件に基づいてスタイルを柔軟に変更することが可能です。

この記事で紹介した主な方法を振り返ってみましょう。

  • JavaScriptによるクラス/属性操作: ユーザー操作やアプリケーション状態など、最も柔軟で強力な動的条件分岐の手段。
  • メディアクエリ: デバイスの特性（画面幅など）に基づく条件分岐の標準。レスポンシブデザインの基盤。
  • :has()擬似クラス: 要素間の関係性（親が特定の子を持つかなど）に基づくCSS単体での条件分岐（モダンブラウザ限定）。
  • CSS変数の動的変更: 色やサイズなどのスタイルプロパティの値をJavaScriptで動的に制御。テーマ切り替えなどに有効。
  • 親セレクターの状態利用: :hover, :focusなどの擬似クラスによる基本的なインタラクションのフィードバック。CSS単体で実現可能。
  • プリプロセッサーの@if: コンパイル時の静的な条件に基づき、異なるCSSを生成。開発効率向上に寄与するが、実行時には無効。

これらの方法から、あなたの実現したい「条件」がどのような性質のものなのかを見極め、目的に最も合った、あるいは複数の方法を組み合わせた最適なアプローチを選択することが重要です。

現代のWeb開発では、静的な見た目だけでなく、ユーザーとのインタラクションや様々なデバイス・環境への適応が不可欠です。CSSの基本的な仕組みを理解し、JavaScriptをはじめとする他のWeb技術と効果的に連携させることで、「〇〇だったら△△なスタイルにする」という条件付きスタイリングの要求に自信を持って応えられるようになるでしょう。

この記事が、「CSS if文」を探求するあなたの手助けとなれば幸いです。これらの知識を活かして、より表現力豊かでユーザーフレンドリーなWeb体験を構築してください。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール