位置決めもサイズ計算もCSSだけで。「State of CSS 2026」で見る注目機能と軽量フレームワーク

「新発見！フロントエンド技術の今」の連載。第20回のテーマはCSSの最新トレンドです。

CSSに関するサーベイであるState of CSSは、どのような機能が注目されていて、実際にどれくらい使われていて、今後はどのようになっていくのか、そういったトレンドを読み取るのに最適なサイトです。ここでは、2026年7月に公開された2026年版を俯瞰しながら、今後伸びていきそうな機能、ツールをピックアップして紹介します。

State of CSSとは

State of CSSとは、CSSエコシステムの最新動向を調査・分析し、世界中の開発者に共有するための年次レポートです。本連載では、これまでも「モダンCSS」（第5回）、「CSSフレームワーク」（第10回）でこのサーベイの結果を引用してきました。そして、第18回では前年度のサーベイであるState of CSS 2025の結果を解説しました。

最新のサーベイの結果は、2026年7月に2026年版として公開されました。全体の構成は2025年版から変わらず、エントリーしている機能も大きく変化していないのですが、それでもよく眺めるといくつかの注目ポイントがあります。今回は、これらの機能やツールにフォーカスし、その概要を紹介していきます。

機能—全機能（Features—All Features）から

機能（Features）にエントリーしている機能は2025年版と変わるものではなく、むしろ数が絞られています。利用者上位の:has()やCSS Nesting、Subgridなどもおなじみの機能です。そこで今回はアプローチを変えて、BaselineがLimited Availability（ブラウザによって利用に制限がある）にもかかわらず、サーベイ回答者のSentiment（感情）がPositive（好意的）であるものをピックアップします。利用に制限がある中で好意的に迎えられているのは、機能の有効性が認められている証左と言えるためです。以下の機能をピックアップしました。

• Anchor Positioning：JavaScriptに頼らずに位置決めできる便利機能
• calc-size()：サイズ指定キーワードを使ったサイズ計算が可能なCSS関数
• Gap Decoration：ギャップ装飾の新しい方法
• accent-color：UI要素にアクセントカラーを指定できる

以降、これらについて見ていきます。

JavaScriptに頼らずに位置決めできる―Anchor Positioning

Anchor Positioningとは、ある要素の配置を、別の要素の位置を基準にできる機能です。たとえば、ボタンの近くにツールチップやポップオーバー、メニューなどを表示したい場合、従来はJavaScriptでボタンの座標を取得して位置を計算するなどの処理が必要でした。Anchor Positioningを使うと、こうした位置決めをCSSだけで実現できます。

Anchor Positioningの使い方はシンプルです。まず、基準にしたい要素を「アンカー」としてanchor-nameプロパティを使って名前付けします。そして、配置したい要素側で、position-anchorプロパティでそのアンカーを参照し、anchor()関数でアンカー要素のどこを参照するかを指定します。

.button {
  anchor-name: --button;    /* アンカーの名前をbuttonとする */
}

.tooltip {
  position: absolute;
  position-anchor: --button;    /* アンカー名を参照する */
  top: anchor(bottom);        /* 上端はアンカー要素の下端とする */
  left: anchor(right);        /* 左端はアンカー要素の右端とする */
}

このように、Anchor Positioningを使うと以下のメリットが生まれます。

• JavaScriptによる座標計算を減らせる
• ツールチップやポップオーバーをCSS中心で実装できる
• アンカー要素との位置関係をCSS上で明示できる
• レイアウト変更に強いUIをつくることができる

このようにAnchor Positioningは、「この要素を、あの要素の近くに置きたい」という指定を、JavaScriptではなくCSSで扱えるようにでき、UIコンポーネントの位置決めをより宣言的に記述できるようになる機能といえます。

サイズ指定キーワードを使った計算が可能なCSS関数―calc-size()

calc-size()は、autoやmin-content、max-content、fit-contentといったサイズ指定キーワードを、計算式の中で扱えるようにするためのCSS関数です。計算のための関数としてはcalc()がありますが、この関数は100% - 2remといった計算には使えますが、autoなどのサイズ指定キーワードには使えません。calc-size()は、サイズ指定キーワードを元にした計算を可能にする関数です。

calc-size()の用途は、要素が本来持つサイズを基準にして、そこへ余白分を足したり、少し引いたりするということです。たとえば、コンテンツに応じた高さに少し余裕を持たせたい場合は、height: calc-size(auto, size + 2rem)のように書けます。このとき、第1引数はサイズ指定キーワード、第2引数は計算式で、第1引数の実際の値はsizeで参照します。

このcalc-size()関数ですが、使いどころとしては、アコーディオンのような高さや幅が変化するようなコンポーネントが考えられます。以下のように、普段は高さゼロのコンポーネントにしておき、チェックボックスがチェックされたら高さを自動計算して設定するといった具合です。

.content {
  height: 0;        /* 普段は高さゼロ（見えない） */
  overflow: hidden;    /* あふれた分は不可視 */
}
.size-calc:checked + .content {    /* チェックボックスがチェックされた場合 */
  height: calc-size(auto, size + 1rem);    /* 高さを自動計算し1remを加える */
}

このような動作はJavaScriptによるコードを追加しないと実現が難しいものでしたが、calc-size()関数によりCSSだけで動的なサイズ変更が可能になり、UI設計の自由度が高まるでしょう。

ギャップ装飾の新しい方法―Gap Decoration

Gap Decorationとは、フレックスボックス、グリッド、マルチカラムレイアウトにおけるギャップ装飾の新しい方法です。従来、ギャップ（間隔）を装飾するには、ボーダーや疑似要素を通じて行う必要がありました。この方法には、アクセシビリティやパフォーマンスの低下を招くというデメリットがあり、特にレスポンシブレイアウトでは使いにくいという評価がありました。この問題を解決するものとしてChromeとEdgeの開発チームにより策定されたのがGap Decorationです。

Gap Decorationの正体は、column-ruleプロパティとrow-ruleプロパティです。このうち、column-ruleプロパティについては見覚えがあるかもしれません。これは、段組などに使用されるマルチカラムレイアウトで段間罫のために使われていたプロパティで、それがフレックスボックスやグリッドにも適用され、行方向のギャップに関する指定も可能になったというのがGap Decorationです。

指定は簡単で、フレックスボックスやグリッドにプロパティを指定するのみです。画面は、薄い水色の背景がflex-wrapを指定したフレックスボックス、薄い赤色の背景がグリッドです。

.gap-style {
  column-rule-width: 2px;        /* 列間の罫線を2pxに */
  column-rule-style: dashed, solid;    /* 列間の罫線を破線と実線の繰り返しに */
  column-rule-color: #d4d0c8;        /* 列間の罫線の色を薄いグレージュに */
  row-rule-width: 2px;            /* 行間の罫線を2pxに */
  row-rule-style: dashed, solid;    /* 行間の罫線を破線と実線の繰り返しに */
  row-rule-color: #d4d0c8;        /* 行間の罫線の色を薄いグレージュに */
}

このように、ギャップに対するスタイル指定を行うだけで、装飾が自動で適用される点が便利です。上の例のように、線種を交互に適用したり、フレックスボックスの折り返しで装飾の適用が切り替わったりと、ボーダーや疑似要素では実現しにくい動作も簡便に指定できるので、ブラウザのサポートが広がればより使われるようになるでしょう。

UI要素にアクセントカラーを指定できる―accent-color

accent-colorとは、一部のUI要素にアクセントカラーを設定するCSSプロパティです。アクセントカラーとは、Webページの配色における背景色や前景色と対照的な、一般的に明るい色のことをいいます。アクセントカラーをUI要素に設定することで、視覚的に注目されやすくなるという効果を生みます。

accent-colorプロパティが有効になるのは、以下のUI要素です。

• チェックボックス：<input type="checkbox">
• ラジオボタン：<input type="radio">
• 範囲：<input type="range">
• 進行：<progress>

accent-colorプロパティの値には、自動でカラーを付与するauto、そして任意の色（色名、カラーコードなど）を指定できます。以下は、マークアップの一例です。

input.auto, progress.auto {
  accent-color: auto;
}
…略…
<input type="checkbox" class="auto" checked />Auto accent color

以下は、前述の4つのUI要素にaccent-colorプロパティを使用してみた例です。それぞれ左から指定なし、自動（auto）、赤（red）を指定しています。

なお、この例から分かるようにautoは指定なしと同じになります。OSで決められているアクセントカラーが使用され、Chromeでは青色になります。autoは、色を明示的に指定した後に、既定値に戻すときに指定するという使い分けになります。

accent-colorを使うと統一された強調表示が可能になるので、UIの一貫性を保持するのに役立つでしょう。

その他のツール—CSSフレームワーク（Other Tools—CSS Frameworks）から

その他のツール（Other Tools）カテゴリのCSSフレームワーク（CSS Frameworks）では、大きく顔ぶれは変わらないものの、いくつかのプロダクトが利用者を増加させています。第18回では紹介しなかったこれらのプロダクトshadcn/ui、Pico.cssを紹介します。

いずれも、取り回しの容易さやマークアップのコンパクトさを重視しており、軽く、簡便に、それでも効果的なUIを演出したいというニーズに対応しているのが特徴です。

必要なUIコンポーネントのみをインストールしてカスタマイズできるshadcn/ui

shadcn/ui（https://ui.shadcn.com/）はTypeScript、React、Tailwind CSS、Radix UIのほか、Next.jsなどのReactベースのフレームワークを前提にしたUIコンポーネント集です。

一般的なコンポーネントライブラリとは異なり、コンポーネントを「ライブラリとして参照する」のではなく、必要なコンポーネントのソースコードのみをプロジェクトに取り込み、自由に編集・拡張して使うことができるのが特徴です。

追加されたコンポーネントは通常のソースコードなので、見た目や振る舞いを直接カスタマイズできます。Radix UIでアクセシビリティを考慮したUI設計を行い、Tailwind CSSでデザインを調整するといった使い方が中心になるでしょう。

ボタン、カード、ダイアログ、フォーム、ドロップダウンメニューなど、Webアプリでよく使うUI部品が用意されていますが、それらをそのまま使うだけではなく、プロジェクトに合わせてカスタマイズしていくことができます。「すぐ使えるUI部品」と「自由に編集できる自前コード」の中間に位置するコンポーネント集といえましょう。

HTMLを書くだけでOK！ミニマムで軽量なPico.css

Pico.css（https://picocss.com/）は、シンプルにHTMLを書くだけで見た目が整う、軽量なCSSフレームワークです。BootstrapやTailwind CSSのように多数のクラスを指定してレイアウトしていくというより、article、table、form、buttonなどのHTML要素に、あらかじめ用意されたスタイルを適用してくれる点が特徴です。

たとえば、次のようなHTMLでも、Pico.cssを読み込むだけでフォームやボタンの外見が簡単に整います。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
…略…
<main class="container">
  <h1>お問い合わせ</h1>
  <form>
    <label>お名前<input type="text" name="name" placeholder="山田 太郎"></label>
    <label>メールアドレス<input type="email" name="email" placeholder="example@example.com"></label>
    <button type="submit">送信</button>
  </form>
</main>

この例では、クラスを指定していませんが、Pico.cssによって入力欄、ラベル、ボタン、余白、文字サイズなどが自動的に整えられています。BootstrapのRebootをさらに突き詰めた「HTMLを書くだけで、最低限きれいなUIになる」ことを重視したフレームワークといえましょう。小規模なWebサイト、管理画面のプロトタイプ、ドキュメントページ、簡単なフォーム画面などで活用できます。

おわりに

今回は、CSSエコシステムのサーベイであるState of CSSの2026年版を、サポートは限定的であるがおおむね好意的に見られている機能に絞って紹介しました。改めて紹介してみると、好意的に評価されている理由が分かる機能ばかりといえます。ブラウザのサポートが広がれば、人気機能になるのは間違いないでしょう。サーベイの2027年版登場の折には、改めて紹介する予定です。