CSS @functionとalpha()、Grid Lanesの最新動向
CSSは日々進化している。2026年6月半ば、CSSの関数定義を刷新する@functionや、透明度操作をシンプルにするalpha()、レイアウトの可能性を広げるGrid Lanes、対話要素の使い勝手を高める<dialog>の改良など、実務に直結する話題が相次いでいる。
これらの機能は、現時点ではブラウザ対応が完了していないものも含まれるが、開発体験を大きく変えるポテンシャルを持つ。とくに@functionは今年中にBaseline入りする可能性が高い機能として注目されている。この記事では、それらの仕組みと現場での活用イメージをまとめた。
CSS @functionの基礎と開発体験
CSSのカスタムファンクションを定義できる@functionルールが、2026年の大きなトピックの一つだ。従来のプリプロセッサ（Sassなど）に頼らず、ブラウザ上で直接再利用可能な関数を記述できる点が画期的である。Jane Ori氏が執筆した解説記事は、初心者にも理解しやすいステップバイステップ形式で、CSS-TricksのAlmanacにもドキュメントが用意されている。
@functionの書き方と基本構造
@functionは、入力値を受け取り、計算や変換を経て新たなCSS値を返す仕組みだ。基本的な構文は以下のようになる。
@function --my-function(--param1, --param2) {
result: calc(var(--param1) + var(--param2));
}この例では、2つのパラメータを受け取り、calc()で合計を返すだけのシンプルな関数だが、より複雑な条件分岐やループ処理に相当するロジックも記述できるようになる見込みだ。開発者は、これまでJavaScriptやビルドツールに頼っていたスタイルロジックを、CSSのレイヤーで完結させられる。
実践で役立つユースケース
@functionが威力を発揮するのは、テーマのカラーパレット管理やレスポンシブな余白計算などの局面だ。たとえば、ブランドカラーをベースに明度や彩度を動的に調整する関数を定義すれば、ダークモードへの切り替えも数行で済む。
@function --tint(--color, --amount) {
result: oklch(from var(--color) l, calc(c * var(--amount)), h);
}@functionの概念を視覚化したイメージです。実際の動作はブラウザの対応状況を確認してください。@functionと@ifや@forといった制御ルールを組み合わせれば、Sassの関数に匹敵する表現力が手に入る。ビルドステップを減らせるため、サイトパフォーマンスの向上にも寄与するだろう。
alpha()関数がもたらす色指定の簡素化
CSSの色操作で長年煩わしかったのが、透明度（アルファチャンネル）の指定方法だ。alpha()関数は、このストレスを大幅に軽減する。これまで相対色構文で必須だった長い記述が、直感的な構文に置き換わる。
従来の相対色構文との比較
カスタムプロパティで色を管理している場合、透明度を変更するにはoklch(from var(--color) l c h / 0.5)のように、色空間とチャンネルを明示しなければならなかった。--colorに値だけを格納する回避策もあるが、結局はoklch()を毎回書く手間が残る。
/* 値だけを格納する方式 */
--color-values: 0.65 0.23 230;
color: oklch(var(--color-values));
color: oklch(var(--color-values) / 0.5);/* 関数ごと格納する方式 */
--color: oklch(0.65 0.23 230);
color: var(--color);
color: oklch(from var(--color) l c h / 0.5); /* 冗長 */alpha()を使えば、色空間やチャンネルを意識せずに済む。Jason Leo氏のコメントにもあるように、コードの意図が明確になり、宣言も短くなる。
color: alpha(from var(--color) / 0.5);oklch(from var(--color) l c h / 0.5)alpha(from var(--color) / 0.5)alpha()はAdam Argyle氏が言及した機能で、色フォーマットに依存しない透過度の指定を実現する。カラーデザインシステムを扱うプロジェクトでは、可読性と保守性の両面でメリットが大きい。
Grid Lanesで広がるレイアウトの選択肢
WebKitが公開した「Field Guide to Grid Lanes」は、以前「CSS Masonry Layout」と呼ばれていたレイアウト手法の解説サイトだ。一見するとCSSグリッドの応用に見えるが、要素を自然な流れで敷き詰めるPinterest風のレイアウトを実現する。
Grid Lanesの仕組みと実装例
グリッドレーンは、カラムは固定しつつ、アイテムの高さを内容に応じて自動調整し、空きスペースを詰めて表示する。従来のCSSグリッドでは、各アイテムの行トラックを手動で調整するか、JavaScriptで高さを計算する必要があった。
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
}grid-template-rows: masonryを疑似的に再現したイメージです。ブラウザのサポート状況を確認してください。WebKitのガイドには、写真ギャラリー、レシピ一覧、新聞スタイル、メガメニュー、タイムライン、ピンボードといった6つの実例デモが含まれている。各デモは最小限のコードで構築されており、実務への応用がしやすい。
レスポンシブ対応とフォールバック
グリッドレーンはまだ実験的な機能だが、プログレッシブエンハンスメントの考え方で導入できる。@supportsを使えば、非対応ブラウザでは従来のグリッドレイアウトにフォールバックさせることも可能だ。
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@supports (grid-template-rows: masonry) {
.gallery {
grid-template-rows: masonry;
}
}WordPressのブロックエディタで動的に生成されるコンテンツ一覧にも、このレイアウトを適用すれば、よりリッチなデザインを提供できる。とくにポートフォリオサイトやECサイトの商品一覧で効果を発揮するだろう。
<dialog>要素の品質向上テクニック
モーダルダイアログやポップアップを実装する<dialog>要素が、さらに使いやすくなる。Una Kravets氏が紹介したclosedby属性とoverscroll-behavior: contain、Chris Coyier氏が解説したアニメーションテクニックを合わせて見ていこう。
closedby属性とスクロール制御
closedby属性は、ダイアログ外のクリック（ライトディスミス）やESCキー押下でダイアログを閉じる動作を制御する。従来はJavaScriptで一つひとつ実装していたが、closedby="any"を指定するだけで標準動作として利用できる（Safariは未対応）。
<dialog closedby="any">
閉じる操作を簡略化したモーダル
</dialog>さらに、overscroll-behavior: containを併用すると、ダイアログ表示中に背面コンテンツがスクロールするのを防げる。コメントではscrollbar-gutter: stableでスクロールバーの有無によるレイアウトシフトを防ぐテクニックも紹介されている。
ダイアログのアニメーション実装
Chris Coyier氏がFrontend Mastersで公開したシリーズでは、@starting-styleを用いたスムーズな開閉アニメーションの手法を解説している。多くの開発者がつまずくポイントであるだけに、実例付きの解説は貴重だ。
dialog {
transition: opacity 0.3s, transform 0.3s;
}
dialog[open] {
opacity: 1;
transform: scale(1);
}
@starting-style {
dialog[open] {
opacity: 0;
transform: scale(0.9);
}
}このアニメーションは実際に約0.3秒かけて連続的に実行される。@starting-styleで初期状態を定義することで、ブラウザが自動的に終了状態との間を補間する。ログインフォームやクッキー同意バナーなど、モーダルの表示が必要なコンポーネントで即座に活用できるテクニックだ。
CSS Day 2026とコミュニティの最新動向
毎年恒例のCSSコミュニティカンファレンス「CSS Day」が、2026年6月11日と12日にアムステルダムで開催された。今年はライブストリーミングがなかったものの、Bluesky上で多くの参加者がリアルタイムに情報を共有している。
講演スライドと舞台裏の共有
発表者のスライドや会場の様子は、#CSSDayのハッシュタグで検索できる。CSS-Tricksの記事には、登壇者のポートレート写真も掲載されており、イベントの雰囲気が伝わってくる。
現地参加できなかった日本の開発者にとっては、6月下旬に公開予定の録画が待ち遠しいところだ。新しい@functionや相対色構文に関するセッションがあったかどうかも気になるところで、動画公開後に改めて重要なポイントを整理したい。
CSS Wordleで遊びながらスキルアップ
学習ツールとして面白いのが、Sunkanmi Fafowora氏が作成した「CSS Wordle」だ。CSSのプロパティ名をWordle形式で当てるゲームで、CSS-Tricksの著者が「ここ一週間ずっとハマっている」と絶賛するほどの中毒性がある。
ゲームの仕組みと学習効果
CSS Wordleは、CSSプロパティのスペルを数回の試行で推測する。正解すると、そのプロパティの簡単な説明やブラウザ対応状況も表示されるため、遊びながら知識が広がる仕組みだ。
実務でCSSを扱うエンジニアはもちろん、これからCSSを学ぶ初心者にも最適なツールだ。隙間時間に数ラウンド遊ぶだけで、プロパティのスペルミスが減り、あまり使ったことのないプロパティにも触れるきっかけになる。
新たにBaseline入りしたCSS機能
2026年6月時点で、いくつかのCSS機能が新たにBaseline（主要ブラウザで安定利用可能）に到達した。Chrome 149に含まれるこれらの機能は、実務への導入のハードルが大きく下がっている。
gap装飾と画像レンダリング
グリッドやフレックスアイテム間の溝に装飾を追加できる「Gap decorations」がBaseline入りし、image-rendering: crisp-edgesによるピクセルアートの鮮明表示も安定して使えるようになった。また、rect()関数とxywh()関数もBaselineに追加され、シェイプの定義が簡素化されている。
一方で、path()を用いたshape-outsideやshape()はまだSafari・Firefoxでの対応が進んでいない。導入する際は@supportsでフォールバックを用意するのが無難だ。
この記事のポイント
@functionで独自のCSS関数を定義でき、ビルドツールへの依存を減らせる。alpha()は色の透明度指定を短く直感的に書ける関数である。- Grid LanesはPinterest風のレイアウトをCSSだけで実現する新しい手法だ。
closedbyやoverscroll-behaviorで<dialog>のUXが大幅に改善される。- CSS Day 2026の録画は6月下旬公開予定、Blueskyでスライドや写真を確認できる。
- CSS Wordleは楽しみながらCSSプロパティのスペルや知識を習得できるゲームだ。
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
CSSの@functionルール入門。カスタム関数でスタイルを動的に管理
CSSに@functionというルールが導入されつつある。これはCSSで独自の関数を定義し、引数を受け取り、複雑な計算や条件分岐を経て値を返す仕組みだ。Sassの@mixinや@functionに似ているが、プリプロセッサを介さずにブラウザが直接解釈する点が新しい。
CSS-Tricksの記事によると、この機能は「CSS Custom Functions and Mixins Module Level 1」仕様の一部であり、カスタムプロパティ（変数）をさらに動的にした存在として位置づけられる。2026年6月現在は実験的機能だが、Chromeなど一部ブラウザでプレビューが始まっている。
本記事では@functionの基本構文、引数の扱い方、型チェック、カスケーディング、そして使用時の注意点までを整理する。
@functionとは何か、なぜ必要なのか
これまでCSSで動的な値を扱うにはカスタムプロパティ（--name）とcalc()の組み合わせが主だった。しかしcalc()だけでは条件分岐や複数ステップの演算が難しく、複雑な処理はSassに頼っていた。
@functionはこのギャップを埋める。CSSネイティブで「関数」を定義できるようになり、引数のバリデーション、デフォルト値、型チェック、メディアクエリに基づく分岐までを同一のスタイルシート内で完結させられる。
具体的には、色の透明度を動的に変えたり、画面幅に応じてフォントサイズを切り替えたり、複数の値をリストで受け取って最大値や最小値を計算したりといった処理が、プリプロセッサなしで可能になる。
このデモが示すように、@functionは単なる短縮記法ではなく、ブラウザのレンダリングエンジンが直接解釈するため、将来はパフォーマンス面でも恩恵が出ると期待されている。
基本構文を分解する
関数の定義とresult記述子
@functionの基本形は以下のようになる。関数名はカスタムプロパティ同様、ダッシュ2つで始める必要がある。
@function --half(--size <length>) {
result: calc(var(--size) / 2);
}この例では--sizeという引数に<length>型を指定し、受け取った値を2で割った結果を返している。使用時は--half(20px)のように呼び出し、10pxが解決値となる。
result記述子は関数の戻り値を定義する必須要素だ。もしresultを書かないと、関数は常に「保証無効値（guaranteed invalid value）」を返し、実質的に機能しない。
returnsによる出力型の指定
returnsキーワードを使うと、関数が返す値の型を明示できる。これはバリデーションに役立つ。
@function --progression(--current <number>, --total <number>) returns <percentage> {
result: calc(var(--current) / var(--total) * 100%);
}上記では引数2つを数値型で受け取り、パーセンテージ型を返すことを宣言している。returnsを省略するとtype(*)相当となり、任意の型を受け入れる。
こうした型チェックは大規模なコードベースでバグの早期発見に寄与する。JavaScriptのTypeScriptのように、CSSでも型安全性を確保できるわけだ。
複数型の許容とリスト引数
引数に複数の型を許容したい場合はtype()と|を使う。
@function --transparent(--color <color>, --alpha type(<number> | <percentage>));さらに、カンマ区切りで複数の値を1つの引数として受け取りたい場合、型の後ろに#を付与する。呼び出し側は波括弧{}で値を囲む。
@function --get-range(--list <length>#, --n <length>) {
result: calc(max(var(--list)) - min(var(--list)) + var(--n));
}
div {
padding-block: --get-range({10px, 100px, 50px, 25px}, 200px); /* 290px */
}これはグラフのレンジ計算や、複数のスペーシング値から最適なマージンを導く際に便利だろう。
カスケードと条件分岐を活用する
@functionのresultはCSSカスケードのルールに従う。つまり、複数のresultを記述した場合、最後にマッチした有効な値が採用される。
この性質を利用すれば、@mediaや@container、@supportsといった条件付きグループルールと組み合わせて、レスポンシブな値を関数内で完結できる。
@function --suitable-font-size() returns <length> {
result: 16px;
@media (width > 1000px) {
result: 20px;
}
}
body {
font-size: --suitable-font-size();
}この例では画面幅1000px以下なら16px、超えれば20pxを返す。従来はメディアクエリをスタイル宣言側で何度も書く必要があったが、関数に集約できるため保守性が向上する。
ただし、カスケードの「後勝ち」ルールには注意が必要だ。result: 16px;を@mediaブロックより後に書くと、メディアクエリの結果に関わらず常に16pxが返る。記述順序を誤ると意図しない挙動になる。
ローカルスコープのカスタムプロパティ
@function内で定義したカスタムプロパティは、その関数内でのみ有効なローカルスコープとなる。グローバルに漏れ出さないため、命名の衝突を気にせず使える。
@function --spacing-scale(--multiplier) {
--base-unit: 8px;
result: calc(var(--base-unit) * var(--multiplier));
}ここで定義された--base-unitは--spacing-scaleの外部からは参照できない。大規模なCSS設計で名前空間の汚染を防ぐ手段として有効だ。
関数のネスト
ある@functionの中で別の@functionを呼び出すことも可能だ。これにより、単一責務の小さな関数を組み合わせて複雑な計算を構築できる。
@function --square(--n) {
result: calc(var(--n) * var(--n));
}
@function --circle-area(--radius) {
--pi: 3.14159;
result: calc(var(--pi) * --square(var(--radius)));
}
.blob {
width: calc(--circle-area(10) * 1px); /* 314.159px */
}このネスト構造のおかげで、関数をレゴブロックのように組み立てられる。Sassで培われたモジュール設計の考え方を、そのままネイティブCSSに持ち込める未来が見える。
使用上の制約と注意点
副作用の禁止
@functionは値を返すことだけが許されており、プロパティの変更や複数宣言の生成といった副作用は起こせない。これは関数型プログラミングの「純粋関数」に近い制約だ。
もし複数行のCSSプロパティをまとめて出力したい場合は、仕様策定中の@mixinルールを待つ必要がある。@functionと@mixinが揃えば、Sassの主要機能がCSSネイティブで再現されることになる。
循環依存の厳格な防止
CSSは循環参照に極めて厳しい。関数Aが関数Bを呼び、関数Bが関数Aを呼ぶような構造はブラウザが即座に検出し、両方の関数を無効化する。
これはカスタムプロパティの循環参照と同様の挙動だ。意図せず再帰を作り込まないよう、関数同士の呼び出し関係は明確に設計する必要がある。
–func-b が –func-a を呼び出す
ブラウザサポートとプログレッシブエンハンスメント
2026年6月時点で@functionは実験的機能であり、未対応ブラウザでは単に無視される。そのため、フォールバックの記述が重要になる。
理想的には@supports (at-rule(@function))でサポートを判定したいが、この@supportsのat-rule評価機能自体がChrome 148以降でしか動作しないという皮肉な状況がある。
現実的な対策としては、従来のカスタムプロパティとcalc()で書いたスタイルをフォールバックとして先に宣言し、その下に@functionを使ったスタイルを記述する方法が考えられる。ブラウザが@functionを解釈できれば上書きされ、できなければ従来の記述が適用される。
/* フォールバック */
.container {
margin-inline: 10px;
}
/* @function対応ブラウザでは上書き */
.container {
margin-inline: --half(20px);
}Sassの@functionとの違い
Sassにも同名の@functionがあるが、両者は動作の仕組みが根本的に異なる。Sassの@functionはコンパイル時にサーバーサイドで処理され、出力されるCSSには関数の痕跡が残らない。
一方、CSSネイティブの@functionはブラウザが実行時に解釈する。スタイルシート内に関数定義がそのまま存在し、ユーザーの画面幅やコンテナサイズに応じて動的に値が解決される。
この違いはパフォーマンス特性やデバッグのしやすさにも影響する。Sassの場合、コンパイル後のCSSしか確認できないが、ネイティブ@functionならブラウザのDevToolsで関数の解決過程を追えるようになる可能性がある。
なお、SassプロジェクトにCSSネイティブの@functionを混在させることは技術的には可能だが、同名の関数が競合する可能性があるため命名規則の整理が推奨される。
この記事のポイント
- @functionはCSSネイティブでカスタム関数を定義するルールである
- 引数、型チェック、デフォルト値、メディアクエリ分岐を1つの関数に集約できる
- result記述子はカスケードに従い、複数記述時は後勝ちのルールが適用される
- 副作用は禁止で、複数宣言の生成には@mixinの正式化を待つ必要がある
- 循環依存は厳格に防止され、未対応ブラウザ向けのフォールバックが必須だ
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験