こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSは長年「条件分岐が弱い言語」と言われてきました。
レスポンシブ対応といえばメディアクエリ、状態分岐といえばクラスの付け替え。
JavaScriptに頼らないと表現できない場面も多かったと思います。
そんなCSSに、ついにif() 関数という概念が登場しました。
これにより「もしこの条件ならこの色」「この値ならこちらを使う」といった分岐を、CSS単体で記述できる時代が始まります。
本記事では、CSS if() 関数の基本構文から、従来手法との違い、実務での使いどころまでをカタログ形式で整理します。
新しいCSSの思考法を、ぜひここで掴んでください。
CSS if() 関数とは
CSS if() 関数は、条件式に応じて値を切り替えるための新しい関数です。JavaScriptのif文に近い考え方を、CSSの値レベルで実現します。
color: if(condition, value1, value2);条件が真の場合は value1、偽の場合は value2 が適用されます。
ポイント
メディアクエリやクラス切り替えを使わず、値そのものを条件分岐できます。
なぜ if() 関数が注目されているのか
従来のCSSでは、条件分岐を行うために次のような手法が必要でした。
- メディアクエリによる画面幅分岐
- クラス付け替えによる状態管理
- JavaScriptによるスタイル制御
基本構文カタログ
最小構成
color: if(true, red, blue);常に red が適用されます。
比較条件を使う
color: if(var(--theme) == dark, #fff, #000);CSS変数と組み合わせることで、テーマ分岐が可能です。
数値条件による分岐
font-size: if(100vw > 600px, 18px, 14px);画面幅に応じた値切り替えも記述できます。
メディアクエリとの違い
- メディアクエリはルール単位で分岐
- if() 関数は値単位で分岐
- if() は1行で完結する
考え方の違い
レイアウトはメディアクエリ、細かな値切り替えは if() が得意です。
実務で使える if() 活用カタログ
テーマカラーの自動切り替え
background: if(var(--mode) == dark, #111, #fff);アクセント色の条件分岐
border-color: if(var(--active) == 1, red, #ccc);余白やサイズの微調整
padding: if(100vw > 800px, 32px, 16px);ホバー対応の補助
opacity: if(var(--hover) == 1, 1, 0.6);CSS変数との相性
if() 関数は CSS変数と組み合わせることで真価を発揮します。:root { --mode: dark; } body { color: if(var(--mode) == dark, #fff, #000); }状態管理をCSS側に寄せられる点が大きなメリットです。
使用時の注意点
- ブラウザ対応状況を必ず確認する
- 複雑な条件分岐は可読性が下がる
- レイアウト制御の主役にはしない
if() を使うべき場面・使わない場面
使うべき
- 色や余白の条件分岐
- テーマ切り替え
- 状態に応じた微調整
使わない方がよい
- レイアウト全体の切り替え
- 複雑なロジック
- JSの方が明確な処理
まとめ
CSS if() 関数は、CSSに「条件分岐」という新しい武器を与えてくれました。メディアクエリやJavaScriptを置き換えるものではありませんが、
値の切り替えをシンプルに書けるという点で、実務の記述量と可読性を大きく改善します。
これからのCSS設計では、if() を前提にした書き方がスタンダードになるかもしれません。
satokotadesignキャンペーン実施中！
