2026年春、CSS が”レイアウト革命”の新章へ
2026年4月、CSS-Tricks と Smashing Magazine で相次いで興味深い記事が公開されました。
- CSS-Tricks: 「Looking at New CSS Multi-Column Layout Wrapping Features」（4月6日）
- CSS-Tricks: 「Making Complex CSS Shapes Using shape()」（4月2日）
- Smashing Magazine: 「A Practical Guide To Design Principles」（4月1日）
いずれも「CSS でここまでできるようになったのか」という驚きをもたらす内容ですが、特に注目すべきは Chrome 145 で実装された column-wrap と column-height。これまで JavaScript ベースで実装せざるを得なかった縦方向ページングレイアウトが、CSS 数行で実現できるようになります。
本記事では新機能の実装サンプルと、Smashing Magazine が提唱する実務デザイン原則を組み合わせ、2026年春時点で「いま使える」CSS テクニックの地図 を提示します。基礎知識として Web アクセシビリティガイド や Core Web Vitals ガイド も合わせてご参照ください。
1. column-wrap / column-height — 縦ページングの夜明け
何ができるようになったか
CSS の columns プロパティ自体は古くから存在しますが、列が溢れたときに縦方向に折り返す ことができず、横方向にどんどん伸びる問題がありました。Chrome 145 から使えるようになった新プロパティ column-wrap と column-height は、この制約を解消します。
| プロパティ | 役割 | 値の例 |
|---|---|---|
column-wrap | 溢れた列の折り返し方向 | nowrap（従来）/ wrap（新） |
column-height | 列の最大高さ | 100dvh、400px など |
最小サンプル
.paginated {
columns: 3 320px; /* 3列、最小幅 320px */
column-height: 100dvh; /* 列の高さをビューポートに固定 */
column-wrap: wrap; /* 溢れたら縦方向に折り返す */
scroll-snap-type: y mandatory; /* 縦スナップ */
overflow-y: auto;
}
.paginated > * {
scroll-snap-align: start;
}このわずか7行の CSS で、ビューポート高さにピッタリ収まる列ベースの縦ページング UI が完成します。これまで Swiper や Framer Motion で実装していたものが、ブラウザネイティブで動くようになるインパクトは小さくありません。
対応状況と Progressive Enhancement
2026年4月時点での対応状況は以下の通りです。
| ブラウザ | 対応状況 |
|---|---|
| Chrome 145+ | ✅ |
| Edge 145+ | ✅（Chromium 由来） |
| Firefox | ❌ |
| Safari | ❌ |
Firefox・Safari はまだ未対応なので、@supports でフォールバックを必ず用意 してください。
@supports (column-wrap: wrap) {
.paginated {
column-wrap: wrap;
column-height: 100dvh;
}
}
@supports not (column-wrap: wrap) {
.paginated {
/* 従来の1カラム + overflow-y: scroll でフォールバック */
columns: 1;
overflow-y: auto;
}
}ユースケース
実務では以下のようなシーンでハマります。
- カード型ダッシュボードのページング表示
- 長い記事の”紙面ページ”風ビューア
- 画像ギャラリーの縦スワイプレイアウト
- プレゼンテーション風の段組みスライド
2. shape() 関数 — 複雑な図形を CSS 一発で
CSS-Tricks の4月2日記事では、shape() 関数を使って SVG なしで複雑なシェイプをクリッピング する方法が紹介されました。これまで clip-path + polygon() では直線的な切り抜きしかできませんでしたが、shape() では ベジェ曲線・円弧・連続パス が記述できます。
.decorated-section {
clip-path: shape(
from 0 0,
line to 100% 0,
curve to 100% 100% with 80% 50%,
line to 0 100%,
close
);
}ヒーローセクションの装飾・カードの曲線エッジ・マスクアニメーションなど、従来なら SVG を書いていた場面がピュア CSS で置き換えられます。
3. Smashing Magazine “A Practical Guide To Design Principles”
新機能の紹介だけでなく、新機能をどう使いこなすか を考える視点も欠かせません。Smashing Magazine の4月1日記事は、実務で使えるデザイン原則を10項目に整理しており、CSS レイアウト設計の指針としても応用できます。ここでは特に CSS と関係が深い5項目を抜粋します。
原則1: Progressive Enhancement（段階的強化）
新機能を使うときは常に 「使えない環境でも動く」 ことを保証する。column-wrap の例で示したように、@supports を使ったフォールバックは2026 年でも現役です。
原則2: Content First（コンテンツ優先）
CSS の選択肢が増えるほど、装飾過多になる誘惑 も強くなります。新機能を入れる前に「このレイアウトはコンテンツを伝えやすくしているか？」を確認する。
原則3: Performance as Design（パフォーマンスもデザイン）
column-wrap のような新機能はブラウザネイティブで動くため、JavaScript 実装より一般にパフォーマンスが良くなります。デザイン選択そのものが Core Web Vitals に直結する ことを意識する。詳しくは Core Web Vitals ガイド を参照。
原則4: Accessibility by Default
段組みやシェイプの装飾が読み順やフォーカス順を壊していないか、スクリーンリーダーで必ず確認する。column-wrap はスナップスクロールと組み合わせると キーボード操作とタッチ操作の両方 で動くかをテストする必要があります。
原則5: Document the “Why”
新機能を導入するときは、「なぜこのプロパティを選んだのか」 をコメントや設計ドキュメントに残す。半年後にチームメンバーが見たときに、削除判断ができる状態を作っておくことが長期運用の秘訣です。
実務導入マップ
新機能は試したい気持ちが先行しますが、導入の順序 を間違えると負債になります。以下の順で検討するのが安全です。
- まず既存デザインを
@supports前提で整理 — フォールバック可能な箇所を洗い出す - プロトタイプでコスト対効果を測る — 実装工数 vs JS 実装との差を定量化
- A/B テストで Core Web Vitals への影響を確認 — ネガティブ要因がないかチェック
- 段階的ロールアウト — 特定ページから始め、問題がなければ拡大
- 監視 — フィールドデータでフォールバック分岐の比率を観測
まとめ — 2026 年春の CSS は”選択肢の時代”
2026 年春の CSS は、「今まで JS でやっていたことが、CSS で書けるようになる」 方向に確実に進んでいます。column-wrap / column-height / shape() のような新機能は、実装コストとメンテコストの両方を下げる可能性を秘めています。
一方で、新機能を使うだけではユーザー体験は良くなりません。Smashing Magazine の原則にあるように、段階的強化・コンテンツ優先・パフォーマンス・アクセシビリティという基本を押さえたうえで、新しい道具を選んでいくのがプロの仕事です。
手元のプロジェクトでまず試せるのは、ヒーローセクションの装飾 や カードギャラリーのページング です。小さく試して、効果を測り、チームで共有する。この地道なサイクルが、2026 年の CSS を最大限活用する近道になります。
関連記事: Web アクセシビリティガイド / Core Web Vitals ガイド / CSS shape() 関数ガイド
参考ソース
