モダンCSSテクニック2024

Css は急速に進化しています。2024 年に使える最新の css テクニックを紹介します。

1. コンテナクエリ

コンポーネントベースのレスポンシブデザイン：

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

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

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

2. カスケードレイヤー

スタイルの優先順位を明確に管理：

@layer reset, base, components, utilities;

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

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: var(--primary);
  }
}

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

3. 論理プロパティ

国際化対応が簡単に：

/* 従来の方法 */
.card {
  margin-left: 1rem;
  padding-right: 2rem;
}

/* 論理プロパティ */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
}

/* ボーダーも論理的に */
.sidebar {
  border-inline-end: 1px solid #ccc;
}

4. :has() セレクタ

親要素を子要素の状態で選択：

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

/* エラーを含むフォーム */
form:has(.error) {
  border: 2px solid red;
}

/* チェックされたチェックボックスを持つラベル */
label:has(input:checked) {
  font-weight: bold;
  color: var(--primary);
}

5. Css Nesting

Sass のようなネストが標準 css で：

.card {
  background: white;
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;

    & span {
      color: var(--accent);
    }
  }

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

  &.featured {
    border: 2px solid gold;
  }
}

6. カスタムプロパティの高度な使用

.theme {
  --primary-h: 220;
  --primary-s: 90%;
  --primary-l: 60%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));

  /* 色の派生 */
  --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);

  /* スペーシングシステム */
  --space-unit: 0.25rem;
  --space-xs: calc(var(--space-unit) * 2);
  --space-sm: calc(var(--space-unit) * 3);
  --space-md: calc(var(--space-unit) * 4);
}

7. サブグリッド

親グリッドのトラックを継承：

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 1rem;
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

パフォーマンスのヒント

/* content-visibilityで描画を最適化 */
.article {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* will-changeで最適化（慎重に使用） */
.animated {
  will-change: transform;
}

これらのモダンな css テクニックを使うことで、より柔軟で保守性の高いスタイルシートを作成できます。ブラウザサポートを確認しながら、プログレッシブエンハンスメントで導入していきましょう！