【2025年保存版】モダンCSSに移行すべき6つの古い書き方

2025年1月25日2025年1月30日

はじめに

こんなコードを書いていませんか？

.header {
  height: 80px;
}
@media (max-width: 768px) {
  .header {
    height: 60px;
  }
}

.sidebar {
  width: 300px;
}
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}

2025年、CSSの開発現場は大きく変化しています。

例のようなビューポートに依存したメディアクエリの乱用は、コードの可読性を下げ、将来的な変更への対応を困難にします。

新しいプロジェクトでこのような実装を続けることは、技術的負債の蓄積になってしまいます。

コンテナクエリやカスケードレイヤーといった新しい仕様は、これらの問題を根本的に解決します。

結果として、より柔軟で保守性の高いコードベースを実現できます。

この記事では、まだ古い実装で悩んでいる開発者に向けて、モダンなCSS実装手法と具体的な移行手順を解説します。パフォーマンスと保守性を意識した、実践的なコード改善の方法をご紹介しますので、ぜひ参考にしてみてください。

リセットCSSからの脱却

最近では、リセットCSSの全面的な初期化が非推奨となっています。

これまでブラウザの互換性を確保するために使われてきた手法が、むしろパフォーマンスとアクセシビリティを損なう原因となっていたためです。

/* 過去のリセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, div, span /* ... */ {
  margin: 0;
  padding: 0;
  border: 0;
}

このような全体リセットは、ブラウザが持つ有用な最適化を無効化し、特にフォームやテーブルなど、アクセシビリティに配慮されたデフォルトスタイルを失わせてしまいます。

さらに、将来のブラウザアップデートへの対応も困難になります。

現在では、以下のようなOpen Propsを使用したモダンなアプローチが推奨されています。

@import "open-props/normalize";

:root {
  --min-tap-target: 44px;
  --page-width: 1100px;
  --space-inline: clamp(1.5rem, 4vw, 2rem);
  --radius-conditional: clamp(0px, 
    (100vw - var(--page-width)) * 999, 8px);
}

button {
  min-height: var(--min-tap-target);
  border-radius: var(--radius-conditional);
}

.card {
  padding: var(--space-inline);
  border-radius: var(--radius-conditional);
  background: var(--surface-2);
}

Open Propsは、ブラウザの最適化を活かしながら一貫性のあるスタイリングを実現します。

CSS変数を活用することで、効率的なプロパティの継承とカスタマイズが可能になり、デザインシステムの構築も容易になります。また、ダークモードなど新しい機能への対応も迅速に行えます。

Open Propsについては、以下の記事で詳しく解説していますので、あわせて参考にしてみてください。

りょうまオンライン

現役エンジニアが教えるOpen Props入門現役SEがOpen Propsの基本概念から実践的な活用方法まで分かりやすく解説。CSS変数を活用した効率的な開発手法と、実際のプロジェクトでの導入ポイントを、具体的なコード…

CSSクラスの依存関係を整理する

スタイルの詳細度の管理は、長年CSSの課題でした。

従来のアプローチでは、セレクタの組み合わせや!importantの使用により、予測不可能な振る舞いを引き起こしていました。

/* 従来の実装での複雑な詳細度の戦い */
#header .nav ul li a {
  color: blue;
}

.navigation-link {
  color: red !important;
}

.theme-dark #header .nav ul li a {
  color: white;
}

このような実装は、新しい機能の追加やスタイルの変更が必要になるたびに、より強力なセレクタや!importantの追加を必要としました。

結果として、CSSの保守性は著しく低下していきます。

カスケードレイヤーを使用した新しいアプローチでは、明示的な優先順位付けが可能になります：

/* カスケードレイヤーによる秩序ある管理 */
@layer reset, base, theme, components, utilities;

@layer base {
  a { color: blue; }
}

@layer theme {
  /* テーマごとのスタイル定義 */
  .theme-dark {
    --text-color: white;
    --bg-color: #1a1a1a;
  }
}

@layer components {
  /* コンポーネント固有のスタイル */
  .nav-link {
    color: var(--text-color);
    text-decoration: none;
  }
}

@layer utilities {
  /* ユーティリティクラス */
  .text-bold { font-weight: bold; }
}

カスケードレイヤーの導入により、レイヤー間の優先順位が明確になり、詳細度の衝突を防ぐことができます。

また、新しいスタイルの追加も、適切なレイヤーに配置するだけで済むようになります。これにより、大規模なプロジェクトでもCSSの管理が容易になり、チーム開発での衝突も減少します。

カスケードレイヤーについては、以下の記事で詳しく解説していますので、あわせて参考にしてみてください。

りょうまオンライン

カスケードレイヤーで実現する、保守性の高いCSS設計手法 CSSのカスケードレイヤーを活用した実践的な設計手法を解説。コードの保守性を高めるための具体的なテクニックを徹底解説します。

コンテナ主体のレスポンシブデザイン

従来のビューポート依存型のメディアクエリは、コンポーネントの再利用性と保守性に大きな課題を抱えていました。画面幅に基づくブレイクポイントは、コンポーネントが実際に配置される文脈を考慮できないためです。

/* ビューポート依存のレスポンシブデザイン */
.sidebar {
  width: 300px;
  float: left;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    float: none;
  }
}

/* 同じコンポーネントでも配置場所が異なる場合 */
.modal .sidebar {
  width: 100%;
  float: none;
}

このアプローチでは、サイドバーをモーダル内やドロワー内で再利用する際に、新たなスタイル定義が必要になります。

また、将来的なレイアウト変更にも柔軟に対応できません。

コンテナクエリを使用した新しいアプローチでは、コンポーネントが配置される親要素のサイズに応じて適切なレイアウトを選択できます：

/* コンテナベースのレスポンシブデザイン */
.sidebar-container {
  container-type: inline-size;
  container-name: sidebar;
}

.sidebar {
  width: 300px;
}

@container sidebar (max-width: 400px) {
  .sidebar {
    width: 100%;
  }
}

/* コンテンツ領域に応じたカラムレイアウト */
.content-area {
  container-type: inline-size;
}

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

@container (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 400px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

このアプローチにより、コンポーネントは配置される場所に応じて自律的にレイアウトを最適化できます。

親要素のサイズに基づいて振る舞いが決定されるため、同じコンポーネントを異なる文脈で再利用する際の柔軟性が大きく向上します。

コンテナクエリについては、以下の記事で詳しく解説していますので、あわせて参考にしてみてください。

りょうまオンライン

【実装例付き】コンテナクエリ完全ガイド – 現場で使える実践テクニックフロントエンド開発者のための実践的なコンテナクエリ活用ガイド。基本的な使い方から現場ですぐに使える知識を詳しく解説します。メディアクエリとの使い分けや、既存プロ…

ビューポートの新しい単位

モバイルデバイスでの100vhの問題は、多くの開発者を悩ませてきました。

特にモバイルブラウザでは、アドレスバーの表示・非表示によってビューポートの高さが動的に変化するため、100vhを使用したレイアウトが意図しない表示崩れを起こしていました。

/* 従来の実装での問題 */
.fullscreen-section {
  height: 100vh;  /* モバイルでは画面からはみ出る */
  min-height: 100vh;  /* スクロールバーが表示される */
}

/* iOSのアドレスバー対策として使われていた応急処置 */
.fullscreen-section {
  height: 100vh; /* フォールバック */
  height: -webkit-fill-available; /* iOS向けハック */
}

これらの問題を解決するため、新しい単位が導入されました。

dynamic viewport height (dvh)、small viewport height (svh)、large viewport height (lvh) です。

これらの単位は、デバイスの動的な変化を考慮して設計されています：

.fullscreen-section {
  /* 動的なビューポートに合わせて高さが変化 */
  min-height: 100dvh;
}

.hero-section {
  /* アドレスバーが表示された状態での最小の高さ */
  height: 100svh;
}

.splash-screen {
  /* アドレスバーが非表示の状態での最大の高さ */
  height: 100lvh;
}

/* 先進的な実装例 */
.adaptive-height {
  /* 最小値としてsvhを使用し、利用可能な空間があれば拡大 */
  min-height: 100svh;
  height: 100dvh;
  max-height: 100lvh;
}

これらの新しい単位を使用することで、アドレスバーの表示状態に関係なく、一貫性のある表示を実現できます。

また、ユーザーの操作に応じて自然にレイアウトが調整されるため、より良いモバイル体験を提供できます。

フォントローディングの最適化

Webフォントの読み込みは、ページの表示速度とユーザー体験に大きな影響を与えます。

従来の実装では、フォントの読み込みが完了するまでテキストが表示されない「Flash of Invisible Text (FOIT)」や、フォントの切り替わり時に発生する「Flash of Unstyled Text (FOUT)」が問題となっていました。

/* 従来の実装 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
}

body {
  font-family: 'CustomFont', sans-serif;
  /* フォント読み込みの制御がない */
}

この実装では、ユーザーは数秒間テキストを読むことができない、もしくは急激なフォントの切り替わりによって読んでいた位置を見失うといった問題が発生していました。

現在の手法ではfont-displayプロパティを使用して、フォントの読み込み戦略を細かく制御します：

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
  /* テキストをすぐに表示し、フォントは準備できたら適用 */
  font-display: swap;

  /* パフォーマンスのための最適化 */
  font-weight: 400 700; /* 必要な太さのみ指定 */
  unicode-range: U+0020-007F; /* 英数字のみの場合 */
}

/* 重要なテキストには即時表示が必要 */
.headline {
  font-family: 'CustomFont', system-ui;
  font-display: swap;
}

/* 装飾的なテキストは遅延読み込みでも可 */
.decorative-text {
  font-family: 'DecorativeFont', cursive;
  font-display: optional;
}

さらに、リソースヒントを使用することで、ブラウザにフォントの読み込み優先度を伝えることができます：

<link rel="preload" href="/fonts/CustomFont.woff2" as="font" type="font/woff2" crossorigin>

これらの最適化により、テキストの即時表示とスムーズなフォント切り替えの両立が可能になります。

結果として、ユーザーは待機することなくコンテンツを読み始めることができ、かつ視覚的な一貫性も保たれます。

Webフォントの読み込みについては、以下の記事で詳しく解説していますので、あわせて参考にしてみてください。

りょうまオンライン

実践で使えるWebフォント最適化テクニック Webフォントの実装における最適化テクニックを、実際のプロジェクト事例とともに解説。Font Loading APIやfont-displayプロパティの活用方法から、パフォーマンス改善のた…

アニメーションの新時代

アニメーションはユーザー体験の重要な要素ですが、従来のキーフレームベースのアニメーションには大きな制限がありました。特に、アニメーションの途中での制御や状態の遷移が困難でした。

/* 従来のキーフレームアニメーション */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.3s ease-out;
  /* 一度開始すると制御が困難 */
}

このアプローチでは、アニメーションの一時停止や逆再生、進行状況の制御が難しく、複雑なインタラクションを実現するにはJavaScriptに頼らざるを得ませんでした。

CSS Custom PropertiesとCSS @propertyを組み合わせた新しいアプローチでは、アニメーションをより細かく制御できます：

/* アニメーション可能なカスタムプロパティの定義 */
@property --slide-position {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@property --fade-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.animated-element {
  /* カスタムプロパティを使用した複数の変形 */
  transform: translateX(calc(-100% + var(--slide-position)));
  opacity: var(--fade-opacity);

  /* 個別のトランジション制御 */
  transition: 
    --slide-position 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --fade-opacity 0.3s ease-in;
}

/* 状態に応じたアニメーション制御 */
.animated-element.visible {
  --slide-position: 100%;
  --fade-opacity: 1;
}

.animated-element.half-visible {
  --slide-position: 50%;
  --fade-opacity: 0.5;
}

この実装により、アニメーションの各プロパティを独立して制御でき、状態の遷移もスムーズに行えます。

JavaScriptからも容易に制御できるため、スクロール位置やユーザーインタラクションに応じたアニメーションも実現できます。