レスポンシブ対応のためのCSSベストプラクティス

モバイルファーストで設計する

レスポンシブデザインでは「モバイルファースト」が基本です。最小の画面幅（主にスマホ）に合わせてスタイルを記述し、メディアクエリで段階的にスタイルを上書きしていく手法です。

/* ベース（スマホ） */
.container {
    padding: 16px;
}

/* タブレット以上 */
@media (min-width: 768px) {
    .container {
        padding: 32px;
    }
}

/* PC以上 */
@media (min-width: 1024px) {
    .container {
        padding: 64px;
    }
}

メリット：

• CSSの管理がしやすい
• モバイル環境での読み込みが高速になる

相対単位を活用する（%, vw, em, rem）

固定値（px）ではなく、相対単位を活用することで柔軟なレイアウトが実現できます。

.section {
    width: 100%;
    padding: 2rem;
    font-size: 1.2rem;
}

.title {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem); // 画面幅に応じて自動調整
}

よく使う単位の意味：

• %：親要素に対する割合
• vw：ビューポートの幅に対する割合
• rem：ルートのフォントサイズに対する相対値
• em：親要素のフォントサイズに対する相対値

メディアクエリは共通の変数で管理する

SCSSなどのプリプロセッサを使う場合、メディアクエリを変数化するとメンテナンス性が向上します。

// _mediaquery.scss
$breakpoints: (
    "sm": 576px,
    "md": 768px,
    "lg": 1024px,
    "xl": 1280px
);

@mixin respond($breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
    }
}

// 使い方
.card {
    padding: 1rem;

    @include respond("lg") {
        padding: 2rem;
    }
}

フレックスボックスとグリッドで柔軟なレイアウトを構築

従来の float に頼るよりも、flex や grid を活用するとレスポンシブ対応が容易になります。

Flexの例：

.nav {
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
        flex-direction: row;
    }
}

Gridの例：

.grid {
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

画像や動画をレスポンシブにする

メディア要素はそのままだと親要素をはみ出す可能性があります。以下のようなCSSで対応しましょう。

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

また、aspect-ratio を使えばアスペクト比を維持したレイアウトも簡単に構築できます。

.responsive-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

コンテナクエリ（Container Queries）の活用

最近では、親要素のサイズに応じたスタイルを当てる Container Queries が利用できるようになってきました（要ブラウザ対応確認）。

@container (min-width: 600px) {
  .card {
    font-size: 1.5rem;
  }
}

これにより、「画面サイズ」ではなく「要素サイズ」に応じた調整が可能になります。

レイアウトのテストは実機＆DevToolsで

最終的な確認は以下のような手段で行うのがベストです。

• Chrome DevToolsのデバイスモード
• iPhoneやAndroidなどの実機
• スクロール・タップ・ズームなどの操作テスト

UIの崩れや文字の読みにくさがないか、細かく確認しましょう。

まとめ：レスポンシブ対応の鍵は柔軟性と設計力

レスポンシブ対応では、モバイルファースト設計・相対単位・柔軟なレイアウト手法を組み合わせ、管理しやすいCSS設計を行うことが重要です。SCSSやCSS変数を活用して、再利用性と保守性も高めていきましょう。レスポンシブ対応の品質がサイト全体のユーザー体験を大きく左右することを意識して取り組みましょう。