CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説

サイト構築 -CSS

Post on:2025年7月17日

sponsorsr

5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。

新機能なので、実際にどのように使えばよいのか分からないことも多いと思いますので、if()関数の便利な使い方を紹介します。

たとえば下記のCSSだと、ボタンの幅はマウスで操作できるデバイス（デスクトップなど）だと30px、タッチデバイスだと44pxになります。

CSS conditionals with the new if() function

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
if()関数のデモ: インラインのメディアクエリ
if()関数のデモ: インラインのサポートクエリ
if()関数のデモ: UIのステータスを視覚化
終わりに

はじめに

5月にリリースされたChrome 137以降、CSSでif()関数による条件分岐を使用できるようになりました。if()関数を使用すると、スタイルクエリやメディアクエリといった動的スタイルに対して、よりクリーンなデベロッパーインターフェイスを実現できます。

この記事ではCSSのif()関数の基本的な使い方を解説します。

まず知っておきたいことは、CSSのif()関数は一連の条件と値のペアを使用して動作することです。

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

1	property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

もちろん、elseも使用できます。
下記のように記述すると、いずれの条件にも満たされない場合に、elseの値が適用されます。

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

1	property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

現在、if()関数は3種類のクエリに対応しています。

style(): スタイルクエリ
media(): メディアクエリ
supports(): サポートクエリ

スタイルクエリとif()関数内でstyle()を使用することの違いは、if()はスタイルが設定された要素に即座に適用されることです。値をクエリするために親要素に依存しないため、スタイル値を即座にクエリできます。

いくつかのデモを見ながら、解説します。

if()関数のデモ: インラインのメディアクエリ

CSSのif()関数を使用すると、スタイルにインラインのメディアクエリを含めることができます。たとえば、ユーザーのテーマ設定（ライトまたはダーク）をチェックしたり、ビューポート幅のインラインメディアクエリを実行したりできます。

下記のCSSは、ポインターデバイス用のメディアクエリを使用しています。ボタンのデフォルトサイズは、マウスのような細かいボタンを備えたデバイスでは30pxですが、粗いポインタ（指など）を備えたタッチスクリーンのデバイスでは44px（タッチ時の最小推奨サイズ）になります。

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

button {

aspect-ratio: 1;

width: if(media(any-pointer: fine): 30px; else: 44px);

}

上記のCSSは、if()を使用しないと下記のようになります。

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

button {

aspect-ratio: 1;

width: 44px;

}

@media (any-pointer: fine) {

button {

width: 30px;

}

CSSのif()関数を使用することで、ロジックをインラインにすることができ、スタイルのロジックを2つの異なる場所に記述する必要がなくなります。

実際の動作は、デモページでご覧ください。マウスを使用している場合にボタンのサイズは30pxで表示され、タッチの場合には40pxで表示されます。

See the Pen
CSSのif()で、ボタンのサイズ調整 by coliss (@coliss)
on CodePen.

if()関数のデモ: インラインのサポートクエリ

CSSのif()関数の便利なもう一つ使い方は、インラインのサポートクエリです、たとえば、OKLCHのような広色域のサポートをチェックするには、下記のように記述します。

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

body {

background-color: if(

supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);

else: #00adf3;

);

&::after {

content: if(

supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";

else: "Your browser does not support OKLCH";

);

}

上記のCSSで、ブラウザがOKLCH色空間をサポートしている場合、ユーザーはより鮮やかな色で表示され、さらに:after疑似要素で「お使いのブラウザはOKLCHをサポートしています」というメッセージが表示されます。

このコードでは、ブラウザがOKLCH色空間をサポートしている場合、ユーザーはより鮮やかな色を見ることができ、またメッセージも表示されます：「というメッセージが表示されます。

このコードでは、ブラウザが oklch カラースペースをサポートしている場合、ユーザーにはより鮮やかな色が表示され、::after 疑似コンテンツに「お使いのブラウザは OKLCH をサポートしています」というメッセージが表示されます。
実際の動作は、デモページでご覧ください。

See the Pen
CSSのif() はクエリもサポートしています by coliss (@coliss)
on CodePen.

このようなサポートクエリが機能するためには、まずCSSのif()がサポートされている必要があります。そのため、このテクニックはif()関数がブラウザに実装されるには、まずif()もサポートされている必要があります。

if()関数のデモ: UIのステータスを視覚化

CSSのif()関数はステータス（状態）ベースのスタイル設定にも使用できます。たとえば、進捗カードのステータス（保留中または完了）に基づいたスタイルを適用するなどです。ステータスをデータ属性またはカスタムプロパティに格納し、if()を使用してプロパティにインラインでスタイルを適用できます。

下記のHTMLは、ステータスをdata-statusの値に格納しています。

<div class="card" data-status="complete">
  ...
</div>

...

</div>

CSSは、下記の通りです。

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

.card {

--status: attr(data-status type(<custom-ident>));

border-color: if(

style(--status: pending): royalblue;

style(--status: complete): seagreen;

else: gray);

background-color: if(

style(--status: pending): #eff7fa;

style(--status: complete): #f6fff6;

else: #f7f7f7);

}

ステータス（状態）によって、異なるスタイル（カラー）を適用します。実際の動作は、デモページをご覧ください。

See the Pen
CSSのif() 関数でステータスを判別してスタイルを適用 by coliss (@coliss)
on CodePen.

if()関数内でstyle()を使用すると、スタイルクエリのような親要素は必要とせずに、対象の要素に直接スタイルを適用できます。

この記事では、if()関数を使用してCSSの新しいアーキテクチャアプローチをサポートする基本的な使い方を解説しました。classではなくカスタムプロパティを使用する利点は、CSSの更新が簡単になることです。たとえば、メディアクエリは:hoverのような疑似状態を使用して更新することもできます。

終わりに

CSSでif()関数が使用できるようになることは、CSSのデベロッパーに新しいアーキテクチャの機会を提供します。スタイルクエリなどの技術が進化するにつれ、if()関数内で範囲クエリが可能になる可能性が高く、Chrome 139でサポートされるCSSのカスタム関数と組み合わせるとさらに便利になります。

【訳者注】
2025年7月現在、if()関数をサポートしているブラウザは、Chrome, Edgeのみです。Safariなど他のブラウザでも早くサポートされると嬉しいですね。