modern-css

Name: modern-css
Author: caidanw

github.com/caidanwデザイン・UI1161 回インストール11 週間前に更新

リポジトリ

modern-css について

CSSを作成・レビューする開発者向けのガイダンススキルです。ブラウザー対応状況や旧環境の要件を踏まえ、最新のネイティブCSS技術を提案します。

主な機能

01古い記述に代わる最新CSS技術
02ブラウザー対応状況に基づく技術分類
03フォールバックと段階的拡張の指針
04レイアウト、セレクター、色、タイポグラフィを網羅

活用シーン

01古いCSSパターンのリファクタリング
02新しいUIに使うCSS技術の選定
03新しいCSSの採用前に対応ブラウザーを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/caidanw/skills --skill modern-css

インストール後、Claude Code で/modern-cssを入力して読み込まれたか確認します。

詳細

モダン CSS

CSS の仕様は大きく進化しました。絶対配置による中央揃え、padding-top を使ったアスペクト比、JavaScript のスクロールリスナー、Sass の色関数といった古いハックには、今ではすっきりとしたネイティブの代替手段があります。このスキルを使えば、常にモダンな手法を優先できます。

参考資料： modern-css.com — すべての手法はこのサイトを参考にしています。ライブデモや詳しい解説は、各ページをご覧ください。

サポートデータ： ブラウザーのサポート率は、caniuse.com による世界のユーザー利用率を示しており、最終更新日は2026 年 2 月です。ブラウザーのアップデートに伴い数値は変動するため、プロジェクトで正確さが重要な場合は、caniuse でご確認ください。

このスキルの使い方

CSS を記述またはレビューする際は、次のようにしてください。

広く利用可能な段階の手法（サポート率 90% 以上）は、確認せずに必ず使用してください。古いパターンを見つけた場合は、モダンな同等手法にリファクタリングしてください。
新たに利用可能な段階の手法（サポート率 80～90%）は、提案してください。新たに利用可能になったことを伝え、ユーザーに判断してもらいます。必要に応じてフォールバックも提示してください。
利用範囲が限られる手法（サポート率 80% 未満）を使う前には、必ず確認してください。ブラウザーのサポート状況について警告し、段階的な拡張方法やフォールバックを提案してください。
ユーザーに古いブラウザーの要件（古い Safari、企業内ブラウザーなど）がある場合は、広く利用可能な手法であっても、使用前に確認してください。サポート率は最新のブラウザーを前提としているためです。フォールバックには @supports を使用してください。

既存のコードに古い CSS パターンがある場合は、それを指摘し、モダンな代替手段とその利点を簡潔に説明してください。

広く利用可能（サポート率 90% 以上） — 常に使用

これらの手法は十分に確立されており、すべてのモダンブラウザーで動作します。ためらわずに使用してください。

レイアウト

要素の中央揃え — `place-items: center`

/* OLD: absolute + transform hack (5 declarations, 2 selectors) */
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* MODERN: grid centering (2 declarations, 1 selector) */
.parent {
  display: grid;
  place-items: center;
}

参考資料 →

要素間の間隔 — `gap`

/* OLD: margin hacks with :last-child override */
.grid > * { margin-right: 16px; }
.grid > *:last-child { margin-right: 0; }

/* MODERN: gap on the container */
.grid {
  display: flex;
  gap: 16px;
}

参考資料 →

アスペクト比 — `aspect-ratio`

/* OLD: padding-top percentage hack */
.wrapper { padding-top: 56.25%; position: relative; }
.inner { position: absolute; inset: 0; }

/* MODERN: aspect-ratio property */
.video-wrapper {
  aspect-ratio: 16 / 9;
}

参考資料 →

位置指定の短縮形 — `inset`

/* OLD: four separate properties */
.overlay { top: 0; right: 0; bottom: 0; left: 0; }

/* MODERN: inset shorthand */
.overlay {
  position: absolute;
  inset: 0;
}

参考資料 →

スティッキーヘッダー — `position: sticky`

/* OLD: JS scroll listener + getBoundingClientRect */
// add/remove .fixed class based on scroll position

/* MODERN: sticky positioning */
.header {
  position: sticky;
  top: 0;
}

参考資料 →

レスポンシブ画像 — `object-fit`

/* OLD: background-image with background-size */
.card-image {
  background-image: url(...);
  background-size: cover;
  background-position: center;
}

/* MODERN: object-fit on an img element */
img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

参考資料 →

利用可能なスペースを埋める — `stretch`

/* OLD: calc workaround */
.full { width: calc(100% - 40px); }

/* MODERN: stretch keyword */
.full { width: stretch; }
/* fills container, respects margins */

参考資料 →

スクロールチェーンの防止 — `overscroll-behavior`

/* OLD: JS wheel event preventDefault */
// modal.addEventListener('wheel', e => e.preventDefault(), { passive: false })

/* MODERN: overscroll-behavior */
.modal-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

参考資料 →

スクロールバーによるレイアウトシフトの防止 — `scrollbar-gutter`

/* OLD: force scrollbar or hardcode padding */
body { overflow-y: scroll; }

/* MODERN: reserve scrollbar space */
body { scrollbar-gutter: stable; }

参考資料 →

グリッドテンプレート領域 — 名前付き領域

/* OLD: grid line numbers or floats */
.item { grid-column: 1 / 3; grid-row: 2; }

/* MODERN: named grid areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

参考資料 →

モーダルダイアログ — `<dialog>` 要素

/* OLD: fixed overlay + JS open/close/ESC/focus-trap */
.overlay { position: fixed; z-index: 999; }

/* MODERN: native dialog with ::backdrop */
dialog { padding: 1rem; }
dialog::backdrop { background: rgb(0 0 0 / .5); }
/* JS: dialog.showModal() / dialog.close() */

参考資料 →

方向に応じたレイアウト — 論理プロパティ

/* OLD: physical properties + RTL overrides */
margin-left: 1rem;
padding-right: 1rem;
[dir="rtl"] .box { margin-right: 1rem; }

/* MODERN: logical properties */
margin-inline-start: 1rem;
padding-inline-end: 1rem;
border-block-start: 1px solid;

参考資料 →

レスポンシブコンポーネント — `@container`

/* OLD: viewport-based media queries */
@media (min-width: 768px) {
  .card { grid-template-columns: auto 1fr; }
}

/* MODERN: container queries */
.wrapper { container-type: inline-size; }
@container (width > 400px) {
  .card { grid-template-columns: auto 1fr; }
}

参考資料 →

スクロールスナップ — `scroll-snap`

/* OLD: Slick/Swiper carousel or touch handlers */
// $('.carousel').slick({ ... })

/* MODERN: CSS scroll snap */
.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.carousel > * { scroll-snap-align: start; }

参考資料 →

セレクター

親要素の選択 — `:has()`

/* OLD: JavaScript el.closest('.parent').classList.add(...) */

/* MODERN: :has() parent selector */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

参考資料 →

グループ化セレクター — `:is()`

/* OLD: repeat the full selector for each match */
.card h1, .card h2, .card h3, .card h4 { margin-bottom: 0.5em; }

/* MODERN: :is() grouping */
.card :is(h1, h2, h3, h4) { margin-bottom: 0.5em; }

したいこと...	これを使います
要素を中央に配置する	`display: grid; place-items: center`
子要素を均等に配置する	flex/grid の `gap`
アスペクト比を維持する	`aspect-ratio: 16 / 9`
スクロール時にヘッダーを固定する	`position: sticky; top: 0`
レスポンシブなコンポーネントを作る	`@container` クエリ
モーダルを作る	`<dialog>` 要素
ドロップダウンを作る	`[popover]` 属性 🟡
子要素に基づいて親要素を選択する	`:has()` セレクター
キーボードフォーカス時のみスタイルを設定する	`:focus-visible`
流動的なフォントサイズを設定する	`clamp(min, preferred, max)`
複数行のテキストを省略する	`line-clamp: N`
見出しの折り返しを整える	`text-wrap: balance` 🟡
スクロールに合わせてアニメーションする	`animation-timeline: view()` ⚠️
ページ遷移を実装する	View Transitions API 🟡
表示時にアニメーションさせる	`@starting-style` 🟡
1 色からカラーパレットを作る	明度を調整した `oklch()`
2 色を混ぜる	`color-mix(in oklch, ...)` 🟡
ダークモードの色を設定する	`light-dark()` + `color-scheme` 🟡
スタイルをコンポーネントにスコープする	`@scope (.component)` 🟡
カスケードの順序を制御する	`@layer`
セレクターをネストする	ネイティブ CSS ネスト `& selector`
カスタムプロパティに型を設定する	`@property`
ツールチップを配置する	CSS アンカーポジショニング ⚠️

modern-css

modern-css について

主な機能

活用シーン

インストール

詳細

モダン CSS

このスキルの使い方

広く利用可能（サポート率 90% 以上） — 常に使用

レイアウト

要素の中央揃え — place-items: center

要素間の間隔 — gap

アスペクト比 — aspect-ratio

位置指定の短縮形 — inset

スティッキーヘッダー — position: sticky

レスポンシブ画像 — object-fit

利用可能なスペースを埋める — stretch

スクロールチェーンの防止 — overscroll-behavior

スクロールバーによるレイアウトシフトの防止 — scrollbar-gutter

グリッドテンプレート領域 — 名前付き領域

モーダルダイアログ — <dialog> 要素

方向に応じたレイアウト — 論理プロパティ

レスポンシブコンポーネント — @container

スクロールスナップ — scroll-snap

セレクター

親要素の選択 — :has()

グループ化セレクター — :is()

詳細度の低いリセット — :where()

キーボード操作時のみのフォーカス — :focus-visible

色

フォームコントロールのスタイリング — accent-color

知覚的に均一な色 — oklch()

広色域カラー — display-p3 / oklch

すりガラス効果 — backdrop-filter

タイポグラフィ

可変タイポグラフィ — clamp()

複数行テキストの切り詰め — line-clamp

ドロップキャップ — initial-letter

フォントの読み込み — font-display: swap

可変フォント — すべてのウェイトを1つのファイルに

アニメーション

独立したトランスフォーム

型付きカスタムプロパティ — @property

レスポンシブなクリップパス — shape()

ワークフロー

CSSネスティング — プリプロセッサー不要

カスケードレイヤー — @layer

テーマ変数 — カスタムプロパティ

ダークモードのデフォルト — color-scheme

遅延レンダリング — content-visibility

新たに利用可能（サポート率80～90％）— ユーザーに提案

レイアウト

ドロップダウンメニュー — [popover]（86％）

サブグリッド — ネストされたグリッドを親のトラックに揃える（88％）

カスタマイズ可能なセレクト — appearance: base-select（86％）

ホバー時のツールチップ — popover=hint + interestfor（86％）

アニメーション

登場時のアニメーション — @starting-style（85％）

display: none のアニメーション — transition-behavior: allow-discrete（85％）

ページ遷移 — View Transitions API（89%）

色

色の混合 — color-mix()（89%）

色のバリエーション — 相対色構文（87%）

ダークモードの色 — light-dark()（83%）

セレクター

フォームの検証 — :user-invalid / :user-valid（85%）

ワークフロー

スコープ付きスタイル — @scope（84%）

範囲スタイルクエリ（88%）

タイポグラフィ

バランスの取れた見出し — text-wrap: balance（87%）

対応が限定的（サポート率80%未満）— 使用前に確認してください

レイアウト

モーダルの制御 — commandfor（72%）

ダイアログのライトディスミス — closedby="any"（72%）

アンカー配置 — position-anchor + anchor()（77%）

カルーセルの制御 — ::scroll-button / ::scroll-marker（72%）

コーナー形状 — corner-shape: squircle（67%）

アニメーション

スクロール駆動アニメーション — animation-timeline: view()（78%）

要素の中央揃え — `place-items: center`

要素間の間隔 — `gap`

アスペクト比 — `aspect-ratio`

位置指定の短縮形 — `inset`

スティッキーヘッダー — `position: sticky`

レスポンシブ画像 — `object-fit`

利用可能なスペースを埋める — `stretch`

スクロールチェーンの防止 — `overscroll-behavior`

スクロールバーによるレイアウトシフトの防止 — `scrollbar-gutter`

モーダルダイアログ — `<dialog>` 要素

レスポンシブコンポーネント — `@container`

スクロールスナップ — `scroll-snap`

親要素の選択 — `:has()`

グループ化セレクター — `:is()`

詳細度の低いリセット — `:where()`

キーボード操作時のみのフォーカス — `:focus-visible`

フォームコントロールのスタイリング — `accent-color`

知覚的に均一な色 — `oklch()`

広色域カラー — `display-p3` / `oklch`

すりガラス効果 — `backdrop-filter`

可変タイポグラフィ — `clamp()`

複数行テキストの切り詰め — `line-clamp`

ドロップキャップ — `initial-letter`

フォントの読み込み — `font-display: swap`

型付きカスタムプロパティ — `@property`

レスポンシブなクリップパス — `shape()`

カスケードレイヤー — `@layer`

ダークモードのデフォルト — `color-scheme`

遅延レンダリング — `content-visibility`

ドロップダウンメニュー — `[popover]`（86％）

カスタマイズ可能なセレクト — `appearance: base-select`（86％）

ホバー時のツールチップ — `popover=hint` + `interestfor`（86％）

登場時のアニメーション — `@starting-style`（85％）

`display: none` のアニメーション — `transition-behavior: allow-discrete`（85％）

色の混合 — `color-mix()`（89%）

ダークモードの色 — `light-dark()`（83%）

フォームの検証 — `:user-invalid` / `:user-valid`（85%）

スコープ付きスタイル — `@scope`（84%）

バランスの取れた見出し — `text-wrap: balance`（87%）

モーダルの制御 — `commandfor`（72%）

ダイアログのライトディスミス — `closedby="any"`（72%）

アンカー配置 — `position-anchor` + `anchor()`（77%）

カルーセルの制御 — `::scroll-button` / `::scroll-marker`（72%）

コーナー形状 — `corner-shape: squircle`（67%）

スクロール駆動アニメーション — `animation-timeline: view()`（78%）

高さの自動アニメーション — `interpolate-size: allow-keywords`（69%）

スタッガードアニメーション — `sibling-index()`（72%）

テキストの垂直方向の中央揃え — `text-box`（79%）

自動で拡張するテキストエリア — `field-sizing: content`（73%）

スクロールスパイ — `:target-current`（48%）

CSS 関数 — `@function`（67%）

型付き属性値 — 型を指定した `attr()`（42%）

インライン条件分岐 — `if()`（35%）