レスポンシブWebデザインとは、PCやスマートフォンなど異なる画面サイズに対応するWebサイトの設計方法です。
メリットや基本的な仕組み、CSSのメディアクエリ・Flexbox・CSS Grid・ブレークポイントを初心者向けに分かりやすく解説します。
レスポンシブWebデザインとは？
レスポンシブWebデザインとは、PC、タブレット、スマートフォンなど、異なる画面サイズに合わせてWebサイトのレイアウトや表示を最適化する設計方法です。
例えば、PCでは横並びに表示しているメニューやコンテンツを、スマートフォンでは縦並びに変更するなど、画面の幅に応じてレイアウトを調整します。
レスポンシブWebデザインの基本
レスポンシブWebデザインでは、画面サイズが変わっても、ユーザーがコンテンツを見やすく操作しやすい状態を維持することを目指します。
例えば、PCでは次のような2カラムのレイアウト、スマートフォンでは、画面幅に合わせて1カラムに変更します。
このように、単純にWebページ全体を縮小するのではなく、画面サイズに応じてレイアウトそのものを変えることがレスポンシブWebデザインの基本です。
スマートフォン対応との違い
「スマートフォン対応」と「レスポンシブWebデザイン」は、似た意味で使われることがありますが、厳密には同じではありません。
スマートフォン対応とは、スマートフォンでもWebサイトを使いやすくするための対応全般を指しますが、レスポンシブWebデザインは、その実現方法の一つです。
レスポンシブWebデザインのメリット
レスポンシブWebデザインを採用する主なメリットを紹介します。
PC・スマートフォンなど複数の画面サイズに対応できる
レスポンシブWebデザインでは、PCやスマートフォン、タブレットなど、画面サイズが異なるデバイスに合わせてWebページのレイアウトを調整できます。
1つのWebページをベースに、画面の幅に応じて文字や画像、メニューなどの配置を変えられるため、さまざまな環境でWebサイトを表示できます。
ユーザーの使いやすさを向上できる
デバイスに合わせてレイアウトを調整することで、ユーザーはスマートフォンでもPCでもWebサイトを快適に閲覧できます。
スマートフォンでPC向けのWebページをそのまま表示する場合と比べて、文字が小さすぎたり横方向にスクロールしたりする問題を減らせるため、ユーザーの使いやすさの向上につながります。
Webサイトの管理・運用を効率化できる
レスポンシブWebデザインでは、基本的に1つのHTMLを使って複数のデバイスに対応できます。
PC用とスマートフォン用で別々のWebページを管理する必要がないため、ページを更新する際の作業量を減らせます。
また、修正内容を一元管理しやすくなるため、Webサイトの運用や保守も効率化できます。
レスポンシブWebデザインの基本的な仕組み
レスポンシブWebデザインでは、画面の幅に合わせてレイアウトや画像などを柔軟に変化させます。
基本的な考え方として、柔軟なレイアウト、柔軟な画像、メディアクエリを理解しておくとよいでしょう。
Flexible Layout（柔軟なレイアウト）
Flexible Layoutとは、画面の幅に合わせてレイアウトが柔軟に変化するように設計することです。
例えば、PCでは横並びにしていたメニューやコンテンツを、スマートフォンでは縦並びに変更するといった方法があります。
CSSでは、%やvwなどの相対的な単位や、Flexbox、CSS Gridなどを利用して、画面サイズに応じて要素の幅や配置を調整します。
固定された幅を指定するのではなく、「画面の幅に合わせて変化できるレイアウト」を作ることがポイントです。
Flexible Images（柔軟な画像）
Flexible Imagesとは、画面の幅に合わせて画像の大きさも柔軟に変化させることです。
例えば、PCでは大きく表示できる画像でも、スマートフォンの画面では同じ大きさのままだと画面からはみ出してしまうことがあります。
そこで、画像の幅を親要素に合わせて調整することで、画面からはみ出すのを防ぎます。よく使われる方法の一つが、次のようなCSSです。
img {
max-width: 100%;
height: auto;
}画像についても「画面サイズが変わっても適切に表示できる」ようにすることが重要です。
Media Queries（メディアクエリ）
Media Queries（メディアクエリ）とは、画面の幅などの条件に応じてCSSを切り替える仕組みです。
例えば、「画面の幅が768px以下になったら、メニューを縦並びにする」といった指定ができます。
CSSでは@mediaを使って、次のように記述します。
/* 画面幅が768px以下の場合 */
@media (max-width: 768px)
{
.menu {
flex-direction: column;
}
}メディアクエリは過去に応用情報技術者などにも出題されています。
受験をされる方は、「メディアクエリは、CSS で画面サイズや出力デバイスに応じてスタイルを切り替える技術」を覚えておきましょう。
CSSでレスポンシブWebデザインを実装する方法
レスポンシブWebデザインの代表的な方法を説明します。
メディアクエリ（@media）の使い方
メディアクエリは、画面の幅などの条件に応じてCSSを切り替えるための仕組みです。
例えば、PCではコンテンツを横並びにし、スマートフォンでは縦並びにしたい場合に利用できます。
この例では、通常は.containerの中にある要素を横並びにしています。そして、画面幅が768px以下になるとflex-direction: columnが適用され、要素が縦並びになります。
.container {
display: flex;
}
/* 画面幅が768px以下の場合 */
@media (max-width: 768px)
{
.container
{
flex-direction: column;
}
}Flexboxを使ったレスポンシブレイアウト
Flexboxは、Webページ内の要素を横方向や縦方向に柔軟に配置できるレイアウト機能です。
次の例のように、PCなどの広い画面ではカードを横並びにし、画面が狭くなったら縦並びに変更しています。
まずはHTMLのサンプルです。親要素は「cards」としています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Flexboxのサンプル</title>
</head>
<body>
<div class="cards">
<div class="card">
<h3>HTML</h3>
<p>Webページの構造を作ります。</p>
</div>
<div class="card">
<h3>CSS</h3>
<p>Webページの見た目を整えます。</p>
</div>
<div class="card">
<h3>JavaScript</h3>
<p>Webページに動きをつけます。</p>
</div>
</div>
</body>
</html>次にCSSです。カードを横並びにしたい場合は、親要素にdisplay: flexを指定します。
そして、画面幅が768px以下の場合は、flex-direction: column（縦並び）にしています。
.cards {
display: flex;
gap: 20px;
}
.card {
flex: 1;
padding: 20px;
border: 1px solid #ddd;
}
/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
}※768pxは説明用の例です。実際のブレークポイントは、デバイスの種類ではなく、コンテンツが見づらくなる位置を確認して決めます。
Flexbox自体にも要素の幅を柔軟に調整する仕組みがあります。
レスポンシブ対応では、Flexboxだけで対応できる場合もありますが、レイアウトを大きく切り替えたい場合には、メディアクエリと組み合わせて使います。
CSS Gridを使ったレスポンシブレイアウト
CSS Gridは、Webページの要素を行と列のグリッド状に配置できるレイアウト機能です。
複数のカードを一覧表示するようなレイアウトでは、Flexboxと同じようにCSS Gridもよく利用されます。
例えば、次のように指定すると、画面の幅に応じてカードの列数を自動的に調整できます。
下のCSSは、minmax(250px, 1fr)によって、カードが極端に小さくならないようにしながら、利用できるスペースに合わせて幅を調整しています。
また、auto-fitを使うことで、画面が広いときは複数列、画面が狭くなると列数を減らすといったレイアウトを作れます。
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}CSS Gridは、商品一覧やブログ記事一覧、画像ギャラリーなど、複数の要素を格子状に並べるレイアウトに向いています。
%・vw・remなどの相対単位を活用する
レスポンシブWebデザインでは、画面サイズに応じて大きさが変化する相対単位を活用することも重要です。
例えば、pxで幅を固定すると、画面が狭くなったときに要素が収まりきらない場合があります。
%で指定
%を使うと親要素の幅を基準にサイズを変化させられます。
.container {
width: 90%;
}vw：画面（ビューポート）の幅
CSSの「vw」は、ブラウザの表示領域（ビューポート）の横幅を基準にした相対的な長さの単位（Viewport Width）で、例えば50vwなら、画面幅の50%を指定できます。
rem：ルートの文字サイズ
remはルート要素（通常はhtml）の文字サイズを基準にする単位です。
文字サイズや余白などを、全体で統一して調整したい場合に便利です。
.title {
font-size: 2rem;
}%は親要素、vwは画面幅、remはルートの文字サイズを基準にするという違いがあります。
max-widthやclamp()を活用する
レスポンシブWebデザインでは、単純に「画面に合わせて大きくする」だけでなく、大きくなりすぎないように上限を設定することも重要です。
例えば、コンテンツの幅にmax-widthを指定すると、画面が大きなPCでもコンテンツが広がりすぎるのを防げます。
下の例は、画面が狭いときはwidth: 90%に合わせて幅が変化し、画面が広くなっても最大1200pxまでしか広がりません。
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}clamp()を使うと、最小値・推奨値・最大値を1つの指定で設定できます。
下の例は、文字サイズは基本的に4vwに合わせて変化しますが、24pxより小さくならず、48pxより大きくならないように設定されています。
.title {
font-size: clamp(24px, 4vw, 48px);
}レスポンシブWebデザインとブレークポイント
ブレークポイントとは？
ブレークポイントとは、画面幅などの条件に応じてCSSの設定を切り替える境目のことです。
例えば、次のようなメディアクエリがあるとします。
この場合、「768px以下」がブレークポイントになります。
@media (max-width: 768px)
{
.cards {
flex-direction: column;
}
}ブレークポイントの決め方
ブレークポイントを決めるときは、まずWebページのレイアウトをさまざまな画面幅で確認します。
レスポンシブWebデザインでは、「iPhoneだから○px」「タブレットだから○px」というように、デバイスを基準にブレークポイントを決めるのではなく、コンテンツが見やすく表示できるかどうかを基準に考えることが大切です。
例えば、3つのカードを横並びにしている場合、画面幅が狭くなってカードの文字が読みにくくなったタイミングで、縦並びに切り替える方法があります。
この場合、「特定のスマートフォンに合わせる」のではなく、「カードを横並びにしておくとレイアウトが崩れる幅」をブレークポイントにするという考え方になります。
コメント