モダンCSS完全攻略2025：Flexbox、Grid、Container Queries、Tailwind CSSまで

/* ネイティブCSS Nesting */
.card {
  background: white;
  border-radius: 8px;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  & .body {
    padding: 1rem;

    & p {
      line-height: 1.6;
    }
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* 画像を含むカードのスタイル変更 */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* 無効な入力があるフォーム */
form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* チェックされたチェックボックスの兄弟要素 */
input:checked + label {
  color: green;
}

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

/* レイヤー順序宣言（後が優先） */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.6; }
}

@layer components {
  .btn { padding: 0.5rem 1rem; border-radius: 4px; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}

.flex-container {
  display: flex;

  /* 方向 */
  flex-direction: row;          /* デフォルト：横 */
  flex-direction: column;       /* 縦 */
  flex-direction: row-reverse;  /* 横逆順 */

  /* 折り返し */
  flex-wrap: nowrap;    /* デフォルト：1行 */
  flex-wrap: wrap;      /* 複数行許可 */

  /* 短縮形 */
  flex-flow: row wrap;
}

.flex-container {
  /* 主軸整列 */
  justify-content: flex-start;    /* 開始 */
  justify-content: center;        /* 中央 */
  justify-content: space-between; /* 両端配置、均等間隔 */
  justify-content: space-around;  /* 均等間隔（両端半分） */
  justify-content: space-evenly;  /* 完全均等間隔 */

  /* 交差軸整列 */
  align-items: stretch;     /* デフォルト：伸ばす */
  align-items: center;      /* 中央 */
  align-items: flex-start;  /* 開始 */
  align-items: baseline;    /* テキストベースライン */

  /* 複数行の交差軸整列 */
  align-content: center;
  align-content: space-between;

  /* 間隔 */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

.flex-item {
  /* 拡大比率（残りスペース分配） */
  flex-grow: 1;

  /* 縮小比率 */
  flex-shrink: 0;  /* 縮小防止 */

  /* 基本サイズ */
  flex-basis: 200px;

  /* 短縮形: grow shrink basis */
  flex: 1 0 200px;
  flex: 1;         /* = 1 1 0% */
  flex: auto;      /* = 1 1 auto */
  flex: none;      /* = 0 0 auto */

  /* 個別整列 */
  align-self: center;

  /* 順序 */
  order: -1;  /* 先頭へ */
}

/* パターン1：完全な上下左右中央揃え */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* パターン2：Sticky Footer */
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-layout main {
  flex: 1;
}

/* パターン3：同じ高さのカード */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card-grid .card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}
.card-grid .card .content {
  flex: 1;
}

/* パターン4：ナビゲーションバー */
.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar .logo { margin-right: auto; }
.navbar .actions { display: flex; gap: 0.5rem; }

.grid-container {
  display: grid;

  /* 列定義 */
  grid-template-columns: 200px 1fr 200px;       /* 固定-フレキシブル-固定 */
  grid-template-columns: repeat(3, 1fr);         /* 3等分 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* レスポンシブ */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));   /* レスポンシブ+伸張 */

  /* 行定義 */
  grid-template-rows: auto 1fr auto;

  /* 間隔 */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* モバイルでは単一列 */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* auto-fill：空のトラックを維持（最小サイズで空の列を作成） */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit：空のトラックを縮小（アイテムが残りスペースを埋める） */
.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child-grid {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;  /* 親の列トラックを継承 */
  gap: 1rem;
}

/* 完璧なレスポンシブカードグリッド - メディアクエリ不要 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Grid + Flexbox の組み合わせ */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

.dashboard .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.dashboard .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* コンテナ宣言 */
.widget-container {
  container-type: inline-size;  /* インライン軸（通常は幅）基準 */
  container-name: widget;       /* オプションの名前 */
}

/* コンテナクエリ */
@container widget (min-width: 500px) {
  .widget {
    flex-direction: row;
  }
}

@container widget (max-width: 499px) {
  .widget {
    flex-direction: column;
  }
}

/* inline-size：インライン軸（通常は幅）のみクエリ可能 */
.container { container-type: inline-size; }

/* size：幅と高さの両方をクエリ可能（コストが高い） */
.container { container-type: size; }

/* normal：クエリ不可、名前のみ使用（スタイルクエリ用） */
.container { container-type: normal; }

/* @media：ビューポート基準 - 画面全体の幅 */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* @container：親コンテナ基準 - 再利用可能 */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

.widget {
  /* cqw：コンテナ幅の1% */
  font-size: clamp(0.875rem, 3cqw, 1.25rem);

  /* cqh：コンテナ高さの1% */
  padding: 2cqw;

  /* cqi：コンテナインラインサイズの1% */
  /* cqb：コンテナブロックサイズの1% */
  margin-inline: 5cqi;
}

/* テキスト入力にフォーカスがあるときフォームのボーダーを変更 */
form:has(input[type="text"]:focus) {
  border-color: blue;
}

/* 空の状態処理 */
.list:has(> :first-child) {
  /* 子がある場合のみ適用 */
}
.list:not(:has(> *)) {
  /* 子がない場合 */
  display: grid;
  place-items: center;
}
.list:not(:has(> *))::after {
  content: "項目がありません";
}

/* ダークモードトグル */
html:has(#dark-mode:checked) {
  color-scheme: dark;
  --bg: #1a1a1a;
  --text: #e0e0e0;
}

/* :is() - 引数の中で最も高い詳細度を継承 */
:is(h1, h2, h3, h4) {
  line-height: 1.2;
  margin-block: 1em 0.5em;
}

/* :where() - 詳細度は常に0（簡単にオーバーライド可能） */
:where(h1, h2, h3, h4) {
  line-height: 1.2;
}

/* 実用的：リセットスタイルに:where()を使用 */
:where(ul, ol) { list-style: none; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }

/* 深いセレクタの簡素化 */
:is(.article, .blog-post, .docs) :is(h1, h2, h3) {
  color: var(--heading-color);
}

/* 最後の項目以外にボーダー */
.list-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* 複数条件の結合 */
input:not([type="submit"]):not([type="button"]) {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

/* 無効なアイテムを除外 */
.nav-link:not(.disabled):hover {
  background: #f0f0f0;
}

.card {
  background: white;
  border-radius: 8px;

  /* 子選択 */
  & .title { font-weight: bold; }

  /* 修飾子 */
  &.featured { border: 2px solid gold; }
  &:hover { transform: translateY(-2px); }
  &::before { content: ""; }

  /* ネストされたメディアクエリ */
  @media (prefers-color-scheme: dark) {
    background: #2a2a2a;
    color: white;
  }

  /* ネストされたコンテナクエリ */
  @container card (min-width: 400px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* デフォルトView Transitionスタイル */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* 個別要素に名前を付与 */
.hero-image {
  view-transition-name: hero;
}

/* その要素のトランジションをカスタマイズ */
::view-transition-old(hero) {
  animation: scale-down 0.4s ease-out;
}
::view-transition-new(hero) {
  animation: scale-up 0.4s ease-in;
}

@keyframes scale-down {
  from { transform: scale(1); }
  to { transform: scale(0.8); opacity: 0; }
}
@keyframes scale-up {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); }
}

// JavaScriptからView Transitionをトリガー
document.startViewTransition(() => {
  updateDOM(); // DOM変更を実行
});

/* スクロール進捗インジケーター */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transform-origin: left;
  animation: grow-width linear;
  animation-timeline: scroll();
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 要素がビューポートに入ったときフェードイン */
.fade-in-section {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

/* transition：状態変化に適切（AからBへ） */
.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* @keyframes：複雑なマルチステップアニメーション */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10px); }
}

.bounce-element {
  animation: bounce 1s ease-in-out infinite;
}

/* GPUアクセラレーションを活用するプロパティ：transform、opacity */
.good-animation {
  /* GPU合成レイヤーを使用 - 高速 */
  transition: transform 0.3s, opacity 0.3s;
}

.bad-animation {
  /* リフロー/リペイントを発生 - 低速 */
  transition: width 0.3s, height 0.3s, top 0.3s;
}

/* will-changeでブラウザにヒント */
.will-animate {
  will-change: transform;
}
/* 注意：乱用するとメモリの無駄遣い。実際のアニメーション直前にのみ使用 */

/* app.css - tailwind.config.jsの代わりにCSSで設定 */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-family-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

<!-- コンテナ宣言 -->
<div class="@container">
  <!-- コンテナサイズベースのレスポンシブ -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4">Item 1</div>
    <div class="p-4">Item 2</div>
    <div class="p-4">Item 3</div>
  </div>
</div>

<!-- 新しいグラディエント -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">
  グラディエント背景
</div>

<!-- 3Dトランスフォーム -->
<div class="rotate-x-12 rotate-y-6 perspective-800">
  3D効果
</div>

<!-- 新しいバリアントの組み合わせ -->
<button class="hover:not-disabled:bg-blue-600 disabled:opacity-50">
  スマートボタン
</button>

<!-- グループバリアントの改善 -->
<div class="group">
  <p class="group-has-[img]:text-sm">
    画像がある場合小さいテキスト
  </p>
</div>

# v3からv4への自動マイグレーション
npx @tailwindcss/upgrade

// Panda CSS - ゼロランタイム
import { css } from '../styled-system/css'

function Button() {
  return (
    <button className={css({
      bg: 'blue.500',
      color: 'white',
      padding: '8px 16px',
      borderRadius: 'md',
      _hover: { bg: 'blue.600' }
    })}>
      クリック
    </button>
  )
}

// vanilla-extract - ビルドタイムCSS
// styles.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  background: 'blue',
  color: 'white',
  padding: '8px 16px',
  borderRadius: '4px',
  ':hover': {
    background: 'darkblue',
  },
})

/* clamp()を使った流体フォントサイズ */
h1 {
  /* 最小2rem、最大4rem、ビューポートに応じて流動的 */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  line-height: clamp(1.5, 1.2 + 0.5vw, 1.8);
}

/* 流体スペーシング */
.section {
  padding: clamp(1rem, 3vw, 3rem);
  gap: clamp(0.5rem, 2vw, 2rem);
}

/* アスペクト比を維持するレスポンシブ画像/動画 */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square-avatar {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 物理的プロパティ（方向固定） */
.old-way {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-left: 3px solid blue;
  width: 200px;
  height: 100px;
}

/* 論理的プロパティ（方向適応） */
.new-way {
  margin-inline: 1rem;       /* 左右（またはRTLで右左） */
  padding-block: 2rem;       /* 上下 */
  border-inline-start: 3px solid blue;  /* 開始方向 */
  inline-size: 200px;        /* 幅 */
  block-size: 100px;         /* 高さ */
}

<!-- srcsetとsizesで最適な画像を提供 -->
<img
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="image-800.webp"
  alt="レスポンシブ画像"
  loading="lazy"
  decoding="async"
/>

/* Block */
.card {}

/* Element（ブロックの一部） */
.card__title {}
.card__body {}
.card__footer {}

/* Modifier（変形） */
.card--featured {}
.card--compact {}
.card__title--large {}

<!-- Tailwindスタイル：ユーティリティクラスの組み合わせ -->
<div class="flex items-center gap-4 p-4 rounded-lg bg-white shadow-md
            hover:shadow-lg transition-shadow">
  <img class="w-12 h-12 rounded-full object-cover" src="..." alt="..." />
  <div>
    <h3 class="text-lg font-semibold text-gray-900">ユーザー名</h3>
    <p class="text-sm text-gray-500">説明テキスト</p>
  </div>
</div>

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
}

.primary {
  background: #3b82f6;
  color: white;
}

.secondary {
  background: #e5e7eb;
  color: #374151;
}

// 自動的にユニークなクラス名を生成
import styles from './Button.module.css'

function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  )
}

/* レイヤー優先順位：後に宣言されたものが優先 */
@layer reset, base, tokens, components, utilities, overrides;

@layer tokens {
  :root {
    --color-primary: #3b82f6;
    --color-surface: #ffffff;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --radius-md: 8px;
  }
}

@layer components {
  .btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: white;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }
}