CSSでレスポンシブレイアウトを作る基本！初心者でも簡単にできる方法

CSSで基本的なレスポンシブレイアウトを実装する方法

先生と生徒の会話形式で理解しよう

生徒

「CSSでスマホでもパソコンでも見やすいページって作れますか？」

先生

「はい、CSSのレスポンシブデザインを使えば、画面のサイズに合わせたレイアウトを作ることができます。」

生徒

「レスポンシブデザインって何ですか？」

先生

「画面の幅に応じて、見やすいデザインに自動で切り替わる仕組みです。スマホやタブレット、パソコンなどどんな端末でも使いやすくなるんですよ。」

1. レスポンシブデザインとは？

レスポンシブデザインとは、パソコン・スマートフォン・タブレットなど、様々な画面サイズに自動で対応するレイアウトを作る技術です。例えば、スマホでは縦一列に、パソコンでは横並びにすることができます。

CSS（シーエスエス）という言語を使って、HTMLで作ったページのデザインやレイアウトを調整します。CSSは「カスケーディング・スタイル・シート」の略で、ウェブページの見た目を操作する道具のようなものです。

2. メディアクエリで画面幅を判断する

CSSでレスポンシブデザインを実現するには、メディアクエリという仕組みを使います。メディアクエリとは「画面の幅や高さ、表示方法などに応じてCSSを切り替える方法」のことです。

たとえば、「画面が768ピクセル以下ならこのCSSを使う」というふうに条件を指定できます。

3. レスポンシブ対応のHTMLとCSSの書き方

それでは実際に、スマホでは縦一列、パソコンでは横並びに表示されるレイアウトを作ってみましょう。


<style>
.container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.box {
    background-color: lightblue;
    padding: 20px;
    flex: 1;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}
</style>

<div class="container">
    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>
</div>

ブラウザ表示

この例では、3つのボックスをflex（フレックスボックス）で横に並べています。そして、max-width: 768pxという条件を指定して、スマホサイズでは縦に並ぶようにしています。

4. レスポンシブ対応で大切なポイント

横幅はパーセントやflexで指定：画面サイズによって可変にしたいときに便利です。
固定のピクセルはなるべく避ける：ピクセルで指定すると画面サイズに合わせられません。
画像にも注意：画像サイズも画面に合わせて変化するようにwidth: 100%;などを指定すると安心です。

5. レスポンシブデザインに必須のviewport設定

HTMLの<head>部分に、下記のようなタグを入れることで、スマホなどの画面幅に合わせた表示になります。これを忘れると、どれだけCSSを書いても意図した表示になりません。


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

ブラウザ表示

この設定で「画面の幅を端末の画面幅に合わせて」「初期の拡大率は1倍」と指示しています。スマートフォンでもパソコンでも、文字が小さすぎたり大きすぎたりしないようになります。

6. よく使われるレスポンシブ対応の画面幅

メディアクエリでよく使われる画面の幅（ブレイクポイント）は以下のとおりです。

〜480px：小さなスマホ
481〜768px：標準的なスマホ・タブレット
769〜1024px：タブレット横向き・小型ノートPC
1025px〜：デスクトップ画面

これらを基準にして、細かくCSSを調整していきます。

7. レスポンシブ対応のCSSはどこに書く？

CSSはHTMLの中でも<style>タグの中に書くことができます。今回のように簡単なデザインならHTMLファイルの中に直接書いてもOKです。

もっと本格的なホームページを作るようになってきたら、外部のCSSファイルを用意して分けるのが一般的になりますが、最初は1つのファイルにまとめたほうが分かりやすいでしょう。

まとめ

レスポンシブレイアウトは、現代のWeb制作において欠かすことのできない基本的な技術であり、スマートフォンやタブレット、パソコンといったさまざまな画面サイズに合わせて表示を最適化するための知識が必要不可欠です。今回の記事では、レスポンシブデザインの全体像から始まり、メディアクエリの仕組みや使用例、flexを使ったレイアウト調整、そしてviewportタグの設定といった基礎部分をひとつずつ学んできました。特に、スマホユーザーが圧倒的に多くなっている現在では、画面幅に応じたレイアウト調整はユーザーの見やすさや操作性に直結するため、非常に重要なポイントです。CSSを活用することで、横並びのボックスが画面幅に応じて縦になったり、パーセント指定によって幅が自然に調整されたりと、柔軟なレイアウトを実現できるようになります。

レスポンシブ対応では、単にメディアクエリで条件を切り替えるだけでなく、ページ全体の構成を理解しながら、固定幅ではなく可変に対応した設計を心がけることが大切です。画像の幅はパーセントで指定し、flexを用いた横並びや縦並びの切り替えを活用することで、閲覧者にとって見やすい画面構成を保つことができます。また、viewportタグをHTMLのhead内に正しく設定することも必須であり、画面の幅をデバイスに合わせることで、モバイルでも違和感のない見た目が実現できます。こうした設定が適切に行われていないと、どれだけCSSを書いても反映されなかったり、スマホで極端に小さい表示になってしまうため、まずは土台となる部分を丁寧に整えることが重要です。

レスポンシブレイアウトの要点をまとめたサンプルコード


<style>
.wrapper {
    display: flex;
    gap: 10px;
}
.item {
    flex: 1;
    padding: 20px;
    background-color: #dff0ff;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }
}
</style>

<div class="wrapper">
    <div class="item">画面幅に応じて切り替わるボックス1</div>
    <div class="item">画面幅に応じて切り替わるボックス2</div>
    <div class="item">画面幅に応じて切り替わるボックス3</div>
</div>

ブラウザ表示

このサンプルコードでもわかるように、flexレイアウトとメディアクエリを組み合わせることで、画面が広いときは横並び、スマホなどで画面が狭くなると縦並びへ自動的に切り替わります。こうした動的なレイアウト調整は、閲覧者の環境に合わせて最適化されたページを表示するために必要不可欠であり、レスポンシブデザインの核となる技術といえます。画像や文字をパーセント指定することで、画面幅に応じた自然な伸縮が可能となり、固定幅よりも柔軟なレイアウトを組み立てられます。また、viewportタグの設定と組み合わせることで、モバイル端末でも文字サイズが読みやすく、レイアウトの崩れが起きにくくなるため、総合的に見た目が整ったページを作ることができます。

さらに、レスポンシブデザインにはよく使われるブレイクポイントの考え方があり、用途に応じて480px、768px、1024pxといった基準を使い分けることで、より細かいデザイン調整が可能になります。スマホでは縦一列、タブレットでは軽く横並び、パソコンでは広く横並びというように、閲覧環境ごとにレイアウトを変えることで、使いやすさと読みやすさが大きく向上します。また、CSSをどこに書くかという点についても、初心者のうちはstyleタグを使いながら理解を深め、慣れてきたら外部CSSにまとめて管理する方法に移行することで、案件の規模に応じた柔軟な制作が可能になります。

先生と生徒の振り返り会話

生徒

「メディアクエリって難しそうだと思っていましたが、画面幅に合わせてCSSを書く仕組みだと分かったら、すごく便利ですね。」

先生

「そうでしょう。レスポンシブ対応の中心となる技術で、簡単な条件分岐のような感覚で使えるんですよ。」

生徒

「flexの横並びや縦並びの切り替えも組み合わせると、プロのサイトみたいなレイアウトが作れそうです！」

先生

「まさにその通り。レスポンシブレイアウトは基礎を押さえればどんどん応用できます。」

生徒

「viewportの設定を忘れると反映されない理由もやっと理解できました。スマホ対応には欠かせないんですね。」

先生