【CSS】レスポンシブデザインに役立つプロパティ＆関数一覧

2024年7月4日

PC、タッチパネル、スマホなど、大きさが異なるデバイスに対応するための「レスポンシブデザイン」は今や欠かせません。
本記事では、レスポンシブデザインに便利なCSSプロパティと関数を纏めました。

[1] vh & vw

vh（viewport height）とvw（viewport width）は、ビューポートの高さと幅を基準にした単位です。
ビューポートのサイズに応じて、要素のサイズを動的に調整できます。これにより、どのデバイスでもビューポートに応じたサイズ調整が簡単に行えます。

ビューポート（vierport）とは

ウェブページが表示されるデバイスの表示領域のこと。
具体的には、ブラウザのウィンドウ内で実際にコンテンツが見える部分で、ツールバーやスクロールバーなどを除いた部分になる。（画面全体のサイズとは異なる。）

.element {
  height: 100vh; // ビューポートの高さの100%をヘッダーの高さに設定
}

.box {
  width: 100vh; // ビューポートの幅の100%をボックスの幅に設定
}

.container {
  // 高さをビューポートの50%、幅をビューポートの75%に設定
  height: 50vh;
  width: 75vw;
}

[2] calc()

calc()は、複雑なサイズ計算をシンプルに行うための関数です。
異なる単位の値や数値演算を組み合わせて使えるのがポイントで、これにより動的で柔軟なレイアウトを構築できます。

例えば、あるコンテナ要素の幅を「ビューポートの半分（50%）＋100px（固定値）」としたい場合、次のように記述します。

.container {
  width: calc(50vw + 100px);
}

calc()内では加算（+）だけでなく、減算（-）、乗算（*）、除算（/）も使用できます。

.box {
  // 左右のマージンを、ビューポート幅の10%から20px引いた値
  margin-left: calc(10vw - 20px);
  margin-right: calc(10vw - 20px);
}

ヘッダーの高さがある値で固定されている場合、それを除いてコンテンツエリアの高さを設定するには次のように記述します。

.content {
  height: calc(100vh - 60px); /* ヘッダーの高さが60pxの場合 */
}

[3] clamp()

clamp()関数を使うと、要素のサイズや値を「最小値」「理想値」「最大値」の範囲内に制限できます。
画面サイズに応じて動的に変化するが、一定の範囲内に収まる（小さくなりすぎたり大きくなりすぎたりしない）スタイル設定が可能になります。

clamp(最小値, 理想値, 最大値)

フォントサイズをビューポート幅に応じて変化させつつ、最小値と最大値を制限する場合、次のように記述します：

p {
  // フォントサイズがビューポート幅の2%（2vw）に基づいて変化
  // ただし、サイズは最小でも1rem、最大でも2.5remに制限
  font-size: clamp(1rem, 2vw, 2.5rem);
}

clamp()についてはこちらの記事で詳しく紹介しています

【CSS】clamp()を使ったレスポンシブデザイン clamp()はCSSで使われる関数。フォントサイズなどの値に最小値と最大値を設けたうえで、理想値を指定できるツールです。特にレスポンシブデザインでは、メディアクエリ…

[4] aspect-ratio

要素の縦横比（アスペクト比）を設定できるプロパティで、要素サイズが変わっても、画像や動画、コンテナの比率を一定に保つことができます。

例えば、動画コンテナに16:9のアスペクト比を設定する場合、次のようにCSSを記述します

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

aspect-ratioについてはこちらの記事で詳しく紹介しています

【CSS】aspect-ratioを使って画像や動画の縦横比を簡単指定 CSSのaspect-ratioプロパティを使って、画像や動画などのメディア要素の縦横比（アスペクト比）を一定に保つ方法を紹介します。特にレスポンシブデザインにおいては、メ…

[5] フレックスボックス（Flexbox）

レスポンシブデザインだけでなく、レイアウトや要素同士のサイズを決めるときには必須とも言えるCSSプロパティ。
主軸（メイン軸）と交差軸（クロス軸）という2つの軸を使用して、コンテナ内の要素の配置や揃えをコントロールでき、レスポンシブデザインにも対応しやすくなります。

Flexboxコンテナを作成するには、まず親要素にdisplay: flex;を適用します。
これにより、子要素（フレックスアイテム）は自動的にフレックスコンテナの内部で配置されます。
以下のようなプロパティを使うことで、子要素の並ぶ向きや揃えを自由に設定できます。

justify-content（主軸に沿った揃え）
align-items（交差軸に沿った揃え）
flex-direction（主軸の方向設定）
flex-wrap（アイテムの折り返し設定）

など。詳しくは以下記事にて紹介しています。

[6] グリッド（Grid）

Flexboxは主に1次元のレイアウト（行または列）で使われるのに対し、Gridは行と列を組み合わせた2次元のレイアウトで使われるCSSプロパティ。ダッシュボードのような複数の行と列が存在するレイアウトに使われ、レスポンシブデザインにも対応しやすくなります。

Gridコンテナを作成するには、まず親要素にdisplay: grid;を適用します。
さらに以下のようなプロパティを設定して行または列のサイズやスペース、グリッド内アイテムの配置を設定します。

grid-template-columns（列のサイズと数を指定）
grid-template-rows（行のサイズと数を指定）
grid-gapまたはgap（行と列の間のスペースを設定）
grid-area（要素をグリッドの特定の領域に配置）
justify-items、align-items（グリッド内のアイテムの配置を設定）

minmax()

グリッドレイアウトの列や行のサイズを指定する際に使用します。
レスポンシブデザインにおいて非常に便利なツールで、グリッド内の要素サイズが画面サイズに応じて動的に調整されます。

minmax(min, max)

min: 最小サイズ。絶対値（px, emなど）や相対値（%, frなど）を指定できます。
max: 最大サイズ。min同様、絶対値（px, emなど）や相対値（%, frなど）を指定できます。

[7] メディアクエリ（Media queries）

メディアクエリはCSSの機能の一つで、特定の条件（例：画面の幅、高さ、解像度、向きなど）に基づいてスタイルを適用することができます。これにより、異なるデバイスや画面サイズに応じて異なるスタイルを適用でき、ユーザーが利用するデバイスに最適なレイアウトやスタイルを提供できます。

メディアクエリは、本記事で紹介している他のプロパティや関数よりも詳細なレスポンシブデザインを設計できるというメリットがあります。一方で、個々の条件にスタイルを設定する必要があるため、コードが長く煩雑になりがちというデメリットもあります。
例えば、デスクトップ、タブレット、モバイルそれぞれに対して異なるレイアウトを提供するには、それぞれに合ったスタイルを適用する必要があります。（ただし、スタイルが共通する部分は省略可能です。）

メディアクエリについては別記事で詳しく説明しているので、そちらをご覧ください。