CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

CSSレスポンシブデザイン

エンジニアのためのWebチートシート

Media QueryやContainer Queryなど、レスポンシブデザインに必要なCSSプロパティをチートシートにまとめました。 モバイルファーストの設計手法や、各ブレイクポイントの使い方を解説しています。

メディアクエリ

メディアクエリの基本

  • 画面サイズに応じてスタイルを切り替えます。

    /* min-width: 指定幅以上で適用 */
@media (min-width: 768px) {
  .container { max-width: 720px; }
}

/* max-width: 指定幅以下で適用 */
@media (max-width: 767px) {
  .sidebar { display: none; }
}

/* 範囲指定 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { max-width: 960px; }
}

/* 新しい範囲構文 (Level 4) */
@media (768px <= width < 1024px) {
  .container { max-width: 960px; }
}

よく使うブレイクポイント

  • 一般的なブレイクポイントの一覧です。

    /* Mobile First Breakpoints */
/* sm */  @media (min-width: 640px)  { ... }
/* md */  @media (min-width: 768px)  { ... }
/* lg */  @media (min-width: 1024px) { ... }
/* xl */  @media (min-width: 1280px) { ... }
/* 2xl */ @media (min-width: 1536px) { ... }

メディア特性

  • 画面サイズ以外のメディア特性です。

    /* ダークモード */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #fff; }
}

/* アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* hover可能デバイス */
@media (hover: hover) {
  .card:hover { transform: scale(1.05); }
}

/* 向き */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }

ビューポート

viewportメタタグ

  • モバイル表示に必須のメタタグです。

    <meta name="viewport"
  content="width=device-width, initial-scale=1.0">

ビューポート単位

  • ビューポートに対する相対的な単位です。

    /* 従来のビューポート単位 */
width: 100vw;   /* ビューポート幅の100% */
height: 100vh;  /* ビューポート高さの100% */
font-size: 5vmin; /* vw/vhの小さい方 */
font-size: 5vmax; /* vw/vhの大きい方 */

/* 新しいビューポート単位 */
height: 100svh; /* Small viewport height */
height: 100lvh; /* Large viewport height */
height: 100dvh; /* Dynamic viewport height */

コンテナクエリ

コンテナクエリの基本

  • 親要素のサイズに応じてスタイルを変更します。

    /* コンテナの定義 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

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

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

コンテナ単位

  • コンテナのサイズに対する相対的な単位です。

    /* cqw: コンテナ幅の1% */
font-size: 5cqw;

/* cqh: コンテナ高さの1% */
height: 50cqh;

/* cqi: コンテナのインラインサイズの1% */
width: 80cqi;

/* cqmin / cqmax */
font-size: 3cqmin;

レスポンシブ単位

相対単位

  • 親要素やルート要素に対する相対的な単位です。

    /* rem: ルート要素のfont-sizeに対する倍率 */
font-size: 1.5rem;   /* 24px (16px * 1.5) */

/* em: 親要素のfont-sizeに対する倍率 */
padding: 2em;

/* %: 親要素に対する割合 */
width: 50%;

/* ch: "0"の文字幅 */
max-width: 65ch;     /* 読みやすい行幅 */

clamp()関数

  • 最小値・推奨値・最大値を指定して流動的なサイズを設定します。

    /* clamp(最小値, 推奨値, 最大値) */

/* 流体タイポグラフィ */
font-size: clamp(1rem, 2.5vw, 2rem);

/* 流体スペーシング */
padding: clamp(1rem, 5vw, 3rem);

/* 流体幅 */
width: clamp(300px, 50vw, 800px);

レスポンシブ画像

レスポンシブ画像

  • 画面サイズに応じて適切な画像を表示します。

    <!-- srcset + sizes -->
<img
  src="small.jpg"
  srcset="small.jpg 480w,
          medium.jpg 800w,
          large.jpg 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 900px) 800px,
         1200px"
  alt="Responsive image"
>

<!-- CSS -->
<style>
img { max-width: 100%; height: auto; }
</style>

レスポンシブパターン

モバイルファーストデザイン

  • モバイルを基準にして、大きい画面向けにスタイルを追加します。

    /* モバイル（ベース） */
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* タブレット以上 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* デスクトップ以上 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

レスポンシブGrid

  • CSS Gridを使ったレスポンシブレイアウトです。

    /* auto-fit: メディアクエリ不要のレスポンシブ */
.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* auto-fill: 空スペースにもカラムを追加 */
.grid {
  grid-template-columns:
    repeat(auto-fill, minmax(200px, 1fr));
}