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));
}

引用・参考リンク

Related Cheatsheets

Related Goods

  • シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    詳細をみる
  • 困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    詳細をみる
  • ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。 スタイリッシュなデザインで、Apple製品との相性抜群です。
    詳細をみる
  • お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る