もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.
Tips
2025年注目のCSS実装手法
2025年に注目されているCSSの新機能のうち、5つの注目機能を解説します。これらの機能により、より柔軟で効率的なWebデザインが可能になっています。
1. CSS Subgrid
Subgridは、CSSグリッドレイアウトの拡張機能で、親グリッドのトラック定義を子要素に継承させることができます。
主な特徴
- 親グリッドの行・列の定義を子グリッドに継承
- ネストされた要素を親グリッドのラインに合わせて配置可能
- 複雑なフォームやカードレイアウトの作成が容易に
/* 使用例 */
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
.child {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
2. Container Queries
Container Queriesは、親コンテナのサイズに基づいてスタイルを適用できる機能です。従来のメディアクエリが画面サイズに依存していたのに対し、コンポーネント自体のコンテキストに応じたスタイリングが可能になります。
主な特徴
- 親コンテナのサイズに基づくスタイル変更
- レスポンシブコンポーネントの作成が容易に
- 再利用可能なUI要素の柔軟性向上
/* 使用例 */
.container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
3. 新しいカラーフォーマット: LCHとOKLCH
LCH（Lightness, Chroma, Hue）とOKLCH（Oklab Lightness, Chroma, Hue）は、人間の視覚により適した新しい色空間です。
主な特徴
- 視覚的に均一な色表現
- より広い色域と鮮やかな色の表現
- 色の遷移が自然で滑らか
- 明度を保ったまま色相や彩度を変更可能
/* 使用例 */
.vibrant-element {
color: lch(50% 80 20);
background-color: oklch(85% 0.2 150);
}
.gradient {
background: linear-gradient(to right, lch(50% 80 20), lch(50% 80 120));
}
4. スクロールアニメーションの簡易化
スクロール駆動アニメーション（Scroll-driven Animations）により、JavaScriptを使わずにCSSだけでスクロールに連動したアニメーションが作成できるようになりました。
主な特徴
- scroll()タイムライン関数によるスクロール連動アニメーション
- パフォーマンスの向上（メインスレッドを占有しない）
- 視差効果やスクロールトリガーアニメーションの実装が簡単に
/* 使用例 */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-item {
animation: fade-in linear;
animation-timeline: scroll(root);
animation-range: entry 10% cover 40%;
}
5. has()擬似クラス
:has()擬似クラスは、指定したセレクタを持つ要素を選択できる「親セレクタ」として機能します。
主な特徴
- 子要素の状態に基づいて親要素のスタイルを変更可能
- フォームの検証状態表示など、インタラクティブな要素の制御が向上
- 複雑なセレクタの簡略化
/* 使用例 */
/* 画像を含むカードには余白を追加 */
.card:has(img) {
padding: 1rem;
}
/* チェックされた入力フィールドを含むフォームグループのスタイル */
.form-group:has(input:checked) {
background-color: #f0f8ff;
}
/* 空でない段落を持つセクションの表示を変更 */
section:has(p:not(:empty)) {
display: block;