レスポンシブデザインを体験してみよう
更新日：2026-08-02
前のページでは、Flexbox を使って横並びレイアウトを作りました。
しかし現在のレイアウトは、
PC画面向け
です。
そのままだと、スマートフォンでは見づらくなってしまいます。
今回は、
画面サイズに応じてレイアウトを変更する
「レスポンシブデザイン」を学んでいきます。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
├── css/
│ └── style.css
└── images/
└── image.jpg
レスポンシブデザインとは？
レスポンシブデザインとは、
画面サイズに応じて見た目を変える仕組み
です。
例えば、
- PCでは横並び
- スマホでは縦並び
のように変更できます。
現在のCSSを変更してみよう
まず、現在の .card を確認してください。
.card {
width: 700px;
margin: 0 auto;
padding: 24px;
background-color: white;
border-radius: 12px;
display: flex;
gap: 24px;
align-items: center;
}
現在は常に横並びです。
メディアクエリを書いてみよう
次に、CSS の下へ以下を追加してください。
@media (max-width: 768px) {
.card {
width: auto;
margin: 16px;
flex-direction: column;
}
.image {
width: 100%;
}
}
保存してブラウザを確認してください。
スマホ表示モードにしてみよう
まず、Chrome で DevTools を開きます。
F12
または、
右クリック検証
で開けます。
その後、
Ctrl + Shift + M
を押してください。
または、左上付近にある、
スマホ・タブレットのようなアイコン
をクリックしてもOKです。
すると、
スマホ表示モード（デバイスモード）
へ切り替わります。
縦並びに変わる
画面幅を小さくすると、
- 画像
- テキスト
が縦並びになるはずです。
これは、
flex-direction: column;
が適用されたためです。
@media とは？
@media (max-width: 768px)
は、
画面幅が768px以下のとき
という意味です。
つまり、
スマホサイズ用のCSS
を書いています。
flex-direction: column;
flex-direction: column;
は、
縦並びにする
という意味です。
以前は、
横並び
でした。
width: 100%;
width: 100%;
は、
親要素いっぱいまで広げる
という意味です。
そのため、スマホ画面で画像が自然なサイズになります。
なぜレスポンシブ対応が必要なの？
現在は、
- PC
- タブレット
- スマホ
など、さまざまな画面サイズがあります。
そのため、
PCだけ見やすい
では不十分です。
実際の現場でも超重要
レスポンシブデザインは、
- コーポレートサイト
- ECサイト
- LP
- ブログ
- 管理画面
など、ほぼすべてのWeb制作で必要になります。
DevTools が便利
Chrome DevTools を使うと、
- iPhone
- Android
- タブレット
などの画面サイズを簡単に試せます。
実際のWeb制作でも非常によく使います。
「PCだけ作る時代」ではない
昔は、
PCサイトだけ
という時代もありました。
しかし現在は、
スマホで見る人
が非常に多くなっています。
そのため、スマホ対応はWeb制作で非常に重要です。
最初は完全理解しなくてOK
レスポンシブデザインは最初かなり難しく感じやすいです。
ですが今は、
画面サイズによってCSSを切り替えられる
くらいの理解で十分です。
実際に何度も作りながら、少しずつ理解が深まっていきます。
次のページでは
次のページでは、
- hover
- transition
- アニメーション
などを学んでいきます。
Webサイトらしい動きが少しずつ増えていきます。