Zenn
📘

モダンCSS、これだけ覚えれば大丈夫！2025年版まとめ

に公開
CSS
HTML
tech

最近ようやくCSSが楽しくなってきたので、
「これ、最初に知っていたらもっとラクだったな〜」と思う、
モダンCSSのポイントをまとめてみました✍️

2025年現在、主要モダンブラウザでしっかり対応しているCSSの中から、
特に実務でよく使うプロパティや記法を表にまとめています。

✅ モダンCSSまとめ表

🧩カテゴリ ✨モダン記法 💬ひとこと解説
レイアウト display: grid 2次元レイアウトが直感的にできる！
gap marginなしで要素の間を調整できる
place-items: center 縦横中央揃えがたった1行でOK！
aspect-ratio: 16 / 9 比率でサイズを管理。YouTube埋め込みも簡単
inset: 0 top, right, bottom, leftを一括指定（positionと併用）
サイズ・スケーリング clamp(1rem, 2vw, 2rem) レスポンシブな文字サイズに◎
min() / max() 値を条件で出し分けできる！
マージン margin-inline: auto 横方向だけの中央寄せに便利
色指定 rgb(255 255 255 / 0.5) rgbaよりスマートで読みやすい
hsl(210 100% 50% / 0.3) デザインカラーツールと相性◎
アクセント accent-color: pink チェックボックスやラジオボタンもカスタム可
セレクタ :is(h1, h2, h3) 複数セレクタを短くまとめられる。
:where(section > h2) 特異性0のセレクタ。リセットやユーティリティ向け。
:has(img) 親要素が特定の子を持つ場合にスタイル適用。親セレクタ実現！
状態 :focus-visible キーボードフォーカス時のみ強調。アクセシビリティ対策に必須。
:checked + :has() チェック状態に応じた親兄弟要素の表示切替が可能。JSなしUIも◎
テキスト装飾 text-underline-offset 下線と文字の間隔を調整できて見やすくなる
スタイル管理 @layer コンポーネント単位でCSS整理しやすい
テキスト表示 text-wrap: balance キレイな改行で読みやすくなる

🔄 :is() と :where() の違い

:is() :where()
特異性 高い（対象セレクタに準ずる） 0（最も優先度が低い）
用途 本番スタイルに適用 リセットCSSやユーティリティ用

🔍 詳細解説と実例コード

それでは、上の表で紹介した機能を、実例コードを交えて詳しく見ていきましょう。

📐 レイアウト

display: grid - 2次元レイアウト

フレックスボックスが1次元のレイアウトなら、グリッドレイアウトは2次元のレイアウトシステムです。複雑なレイアウトも直感的に組めます。

.grid-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

このコードだけで、レスポンシブな複数カラムレイアウトが完成します。auto-fitとminmaxを組み合わせることで、画面幅に応じて自動的に列数が調整されます。

gap - 要素間のスペース

従来は子要素にmarginを設定していましたが、gapプロパティを使えば親要素側から間隔を指定できます。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 行と列の間隔を一括指定 */
}

.flex-container {
  display: flex;
  gap: 10px; /* フレックスボックスでも使用可能 */
}

place-items: center - 簡単中央揃え

垂直・水平方向の両方を中央揃えにするショートハンドプロパティです。

.center-container {
  display: grid;
  place-items: center; /* これだけで完全中央揃え！ */
  height: 100vh;
}

これはalign-items: center; justify-items: center;の短縮形です。たった1行で完全中央揃えができるのは革命的です。

aspect-ratio: 16 / 9 - アスペクト比の指定

特定の縦横比を保ちたい要素に便利です。YouTubeの埋め込みやカード型UIに最適です。

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.profile-card {
  width: 300px;
  aspect-ratio: 1 / 1; /* 正方形 */
}

inset - 要素の位置を一括指定

position: absoluteやposition: relative、position: fixedなどと組み合わせて、要素の配置を簡潔に指定できるショートハンドプロパティです。top、right、bottom、leftを一括で指定できます。

/* 従来の書き方 */
.old-positioning {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* モダンな書き方 */
.full-overlay {
  position: absolute;
  inset: 0; /* 上下左右すべて0に設定 */
}

/* 値を個別に指定することも可能 */
.custom-position {
  position: absolute;
  inset: 1rem 2rem 3rem 4rem; /* top right bottom left */
}

/* 上下と左右を別々に指定 */
.centered-popup {
  position: fixed;
  inset: 50% auto auto 50%; /* 左上隅を中央に配置 */
  transform: translate(-50%, -50%); /* 完全中央に補正 */
}

/* 特定の辺だけを指定し、他はautoにする */
.bottom-sheet {
  position: fixed;
  inset: auto 0 0 0; /* 下端に固定（top以外すべて0） */
}

📏 サイズ・スケーリング

clamp(1rem, 2vw, 2rem) - 最小値、最適値、最大値

レスポンシブなサイズ調整が1行で書けます。最小値、推奨値、最大値の3つの値を指定します。

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* 少なくとも1.5rem、ビューポート幅に応じて変化、最大で3rem */
}

.container {
  padding: clamp(1rem, 5%, 3rem);
  /* 狭い画面では1rem、広い画面では3remを超えない */
}

これにより、メディアクエリを使わなくても、画面サイズに応じた調整が可能になります。

min() / max() - 条件による値の選択

複数の値から、状況に応じて適切な方を自動的に選択します。

.container {
  width: min(90%, 1200px);
  /* 90%と1200pxのうち、小さい方を選択 */
  /* 画面が小さいときは90%、大きいときは1200pxで固定 */
}

.font-size-responsive {
  font-size: max(1rem, 3vw);
  /* 1remと3vwのうち、大きい方を選択 */
  /* 小さい画面でも最低1remのサイズを保証 */
}

🎨 色指定

rgb(255 255 255 / 0.5) - モダンなRGB表記

従来のrgba()よりもスッキリした書き方です。透明度の指定も直感的になりました。

/* 古い書き方 */
.old-syntax {
  color: rgba(255, 0, 0, 0.5);
}

/* 新しい書き方 */
.new-syntax {
  color: rgb(255 0 0 / 0.5);
  border: 1px solid rgb(0 0 0 / 0.1);
}

hsl(210 100% 50% / 0.3) - HSL色指定

HSL（色相、彩度、明度）による色指定は、色のバリエーションを作る際に便利です。

:root {
  --brand-hue: 210; /* ブランドカラーの色相 */
}

.button {
  background-color: hsl(var(--brand-hue) 100% 50%); /* 基本色 */
}

.button:hover {
  background-color: hsl(var(--brand-hue) 100% 40%); /* 暗めの同系色 */
}

.button-light {
  background-color: hsl(var(--brand-hue) 90% 80%); /* 明るい同系色 */
}

カラーバリエーションを作るのが非常に簡単です。

🔘 アクセント

accent-color: pink - フォーム要素のカスタマイズ

チェックボックスやラジオボタンなどのフォーム要素の色を変更できます。以前は複雑なスタイリングが必要でしたが、今では一行で解決します。

.custom-form {
  accent-color: #e91e63;
}

/* 個別に指定することも可能 */
input[type="checkbox"] {
  accent-color: hsl(145 50% 50%);
}

input[type="range"] {
  accent-color: rebeccapurple;
}

🧲 セレクタ

:is(h1, h2, h3) - セレクタのグループ化

複数のセレクタに同じスタイルを適用する際に、より簡潔に書けます。特に複雑なセレクタの場合に役立ちます。

/* 従来の書き方 */
header h1, header h2, header h3,
main h1, main h2, main h3,
footer h1, footer h2, footer h3 {
  line-height: 1.2;
}

/* モダンな書き方 */
:is(header, main, footer) :is(h1, h2, h3) {
  line-height: 1.2;
}

:where(section > h2) - 特異性0のセレクタ

:is()と似ていますが、:where()は特異性（詳細度）が0になります。これによりスタイルの上書きが容易になり、リセットCSSやユーティリティクラスと相性が良いです。

/* 特異性が高い（上書きしにくい） */
:is(section > h2) {
  color: blue;
}

/* 特異性が0（上書きしやすい） */
:where(section > h2) {
  color: blue;
}

/* クラスで簡単に上書き可能 */
.title {
  color: red; /* :where()で設定した青を簡単に上書き */
}

:has(img) - 親セレクタ

特定の子要素を持つ親要素にスタイルを適用できます。長年待ち望まれていた「親セレクタ」がついに実現しました。

/* 画像を含む段落にスタイルを適用 */
p:has(img) {
  padding: 1rem;
}

/* 無効な入力フィールドを含むフォームグループにスタイルを適用 */
.form-group:has(input:invalid) {
  background-color: rgb(255 0 0 / 0.05);
}

/* 最後の子要素が段落である場合のみマージンを調整 */
.card:has(p:last-child) {
  margin-bottom: 2rem;
}

🔄 状態

:focus-visible - キーボードフォーカスの強調

キーボード操作によるフォーカス時のみスタイルを適用します。マウスクリックでのフォーカスではスタイルが適用されません。アクセシビリティの向上と見た目の両立が可能です。

/* 従来は全てのフォーカスにスタイルが適用されていた */
button:focus {
  outline: 2px solid blue;
}

/* キーボード操作時のみフォーカススタイルを適用 */
button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

:checked + :has() - チェック状態に応じた表示切替

チェックボックスの状態に応じて表示を切り替える場合、従来はJavaScriptが必要でした。しかし、:has()と:checkedを組み合わせれば、CSSだけで実装可能です。

/* チェックされた場合に内容を表示 */
.toggle-container:has(input:checked) .toggle-content {
  display: block;
}

.toggle-content {
  display: none;
}

このテクニックを使えば、アコーディオンやタブUIなど、JavaScriptなしで実装できるインタラクションが増えます。

📚 スタイル管理

@layer - レイヤー化したスタイル管理

スタイルをレイヤー（層）に分けて管理することで、カスケーディングの制御が容易になります。優先順位を明示的に設定でき、コードの後ろにあるスタイルでも優先順位が低いレイヤーであれば上書きされません。

/* レイヤーの宣言と優先順位の設定 */
@layer base, layout, components, utilities;

@layer base {
  /* ベースレイヤーのスタイル（最も優先度が低い） */
  button {
    padding: 0.5rem 1rem;
    border: none;
  }
}

@layer layout {
  /* レイアウトレイヤーのスタイル */
  .container button {
    margin: 0.5rem;
  }
}

@layer components {
  /* コンポーネントレイヤーのスタイル */
  .button {
    background-color: blue;
    color: white;
  }
}

@layer utilities {
  /* ユーティリティレイヤーのスタイル（最も優先度が高い） */
  .mt-4 {
    margin-top: 1rem;
  }
}

これにより、CSSの管理がより構造化され、予測可能になります。

📝 テキスト表示

text-wrap: balance - バランスの良い改行

テキストの行の長さをバランス良く調整し、視覚的に美しい改行を実現します。見出しなどに最適です。

h1, h2, h3 {
  text-wrap: balance;
}

.card-title {
  text-wrap: balance;
  max-width: 20ch;
}

text-wrap: pretty - 読みやすい改行

文章の意味を考慮し、読みやすい位置で改行します。長い文章や段落に最適です。

.article p {
  text-wrap: pretty;
}

これにより、接続詞や前置詞での不自然な改行を避け、読みやすさが向上します。

text-wrap: stable - 安定したレイアウト

テキストの表示が動的に変化しないように最適化します。インタラクティブな要素や、内容が動的に変わる可能性のあるコンテンツに最適です。

.dynamic-content {
  text-wrap: stable;
}

🌐 国際化対応

margin-inline: auto - 論理的プロパティ

物理的な方向（left/right）ではなく、文章の論理的な方向に基づくプロパティです。多言語対応やRTL（右から左）言語にも対応できます。

/* 従来の書き方 */
.container {
  margin-left: auto;
  margin-right: auto;
}

/* モダンな書き方 */
.container {
  margin-inline: auto; /* 両端の余白を自動調整して中央揃え */
}

/* 他の論理的プロパティの例 */
.element {
  padding-inline: 1rem;  /* 左右（またはRTLで反転）のパディング */
  padding-block: 2rem;   /* 上下のパディング */
  margin-block-start: 1rem; /* 上マージン */
  border-inline-start: 2px solid black; /* 左ボーダー（またはRTLで反転） */
}

🧠 コーディングで気をつけたいこと

  • 🧩 jQuery前提の教材が今もあるけど、現場はほぼVanilla JSです。
  • 🧭 margin: 0 auto; は定番だけど、国際対応なら margin-inline: auto のほうがスマート。
  • 🎨 rgba() よりも rgb() / のほうが新しい書き方で主流です。
  • ♿ アクセシビリティ（a11y） も忘れずに！ARIA属性・キーボード操作の配慮が必要な場面も増えてきました。

✨ 最初の一歩におすすめのプロパティ

初心者さんでも扱いやすくて、効果が目に見えるものをピックアップ👇
✅ grid
✅ gap
✅ clamp()
✅ accent-color

CSSってどんどん進化してるから、昔のベストプラクティスが今では非推奨ってこともあるよね。
これからもアップデートをゆる〜くキャッチして、楽しくコーディングしていこ。
この記事で紹介した機能を使いこなせるようになれば、より効率的でモダンなCSSコーディングができるようになるはずです。ぜひ実践してみてください！
「なんか最近のCSSってすごくない？🤯」と思えるほど、CSSは進化しています。これからも楽しくコーディングしていきましょう！

コーディング仲間ゆるく募集中なので、気軽に反応もらえるとうれしいです😊

Discussion