【6日でできるHTML＆CSS入門】Webレイアウトをレスポンシブ対応にする
これまでにWebページの基本構造やレスポンシブWebデザインの考え方について学んできました。ここでは、「Webレイアウトをレスポンシブ対応にする」ための具体的な方法を解説します。
レスポンシブ対応とは、パソコン・スマートフォンなどさまざまな画面幅に応じてWebページのデザインやレイアウトを自動的に調整することを意味します。CSSの「メディアクエリ」を活用することで、同じHTMLでも異なるデバイスで最適な表示ができるようになります。
今回は、シンプルなレイアウトサンプルをもとに、パソコン用とスマートフォン用のスタイルを切り替える仕組みや実装方法を解説します。
１．レスポンシブWebデザインの導入
1.1. レスポンシブ化の目的と必要性
Webサイトの利用環境は年々多様化しています。パソコンだけでなく、スマートフォンやタブレットなど、画面サイズの異なる複数のデバイスからアクセスされます。それぞれの端末で適切に情報が見えるようにするため、レイアウトを柔軟に調整できるレスポンシブ対応が不可欠です。
| デバイス | 画面サイズ例 | レイアウト調整例 |
|---|---|---|
| パソコン | 1200px以上 | 横並びメニュー、2カラム表示 |
| タブレット | 600～1024px | メニューの幅縮小、1カラム化 |
| スマートフォン | ～600px | 縦並びメニュー、全幅1カラム表示 |
1.2. レスポンシブ化の主な方法
- ビューポート（viewport）設定
モバイル端末で画面幅に合わせて拡大縮小されるよう、<meta name="viewport" ...>タグを設定します。 - メディアクエリの利用
CSSの@mediaルールを使い、画面サイズごとに異なるスタイルを適用します。
２．レスポンシブ対応への実装手順
2.1. HTMLの準備
従来のHTMLから大きな変更は必要ありませんが、スタイルシートの切り替えやクラス名の整理を行います。
サンプルHTML（例）
ファイル名： lesson40_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HPレイアウトサンプル2</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style_responsive.css">
</head>
<body>
<header id="header">
<h1>Can be done in 6 days</h1>
<nav id="menu">
<ul>
<li><a href="#">メニューA</a></li>
<li><a href="#">メニューB</a></li>
<li><a href="#">メニューC</a></li>
<li><a href="#">メニューD</a></li>
</ul>
</nav>
</header>
<main>
<div id="contents">
<aside>
<section>
<h2>補足情報</h2>
</section>
</aside>
<article>
<section>
<h3>2025.06.21</h3>
<p>新着のお知らせ</p>
</section>
</article>
</div>
</main>
<footer id="footer">
<small>(c) サンプル株式会社</small>
</footer>
</body>
</html>使用タグ一覧
| タグ | 用途 |
|---|---|
<header> | サイトのヘッダー |
<nav> | ナビゲーション |
<ul> | メニューリスト |
<li> | メニューアイテム |
<main> | メインコンテンツ |
<section> | セクション区切り |
<footer> | サイトのフッター |
2.2. CSSのレスポンシブ化
ポイント
- パソコン用とスマートフォン用でメニューのレイアウトを切り替える
- 画面幅が800px未満の場合は、メニューを縦並び＆ボタン風にする
サンプルCSS
ファイル名： style_responsive.css
body {
margin: 0;
font-family: sans-serif;
}
header {
background: #2737cf;
color: #fff;
text-align: center;
padding: 1em 0;
}
header h1 { margin: 0; }
#menu ul {
margin: 0 auto;
padding: 0;
list-style: none;
max-width: 800px;
display: flex;
justify-content: center;
gap: 16px;
}
#menu ul li a {
display: block;
color: #fff;
background: #384fff;
border-radius: 8px;
padding: 1em 0.5em;
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
transition: background 0.2s;
}
#menu ul li a:hover {
background: #19258a;
color: #fffd85;
}
/* スマートフォン対応 */
@media screen and (max-width: 800px) {
#menu ul {
flex-direction: column;
gap: 8px;
padding: 0 10px;
}
#menu ul li a {
font-size: 1.1em;
padding: 1em;
background: #2737cf;
border-radius: 10px;
}
}
main {
max-width: 800px;
margin: 2em auto;
padding: 0 10px;
}
footer {
background: #222;
color: #fff;
text-align: center;
padding: 1em 0;
font-size: 0.95em;
}表示結果
パソコン用
スマートフォン用
表：CSSプロパティの解説
| プロパティ | 意味・効果 |
|---|---|
| display: flex | 横並び/縦並びの切り替えに便利 |
| gap | メニュー間の余白設定 |
| border-radius | ボタン角丸設定 |
| @media (max-width) | 画面幅で切り替え可能。スマホで縦並び・大きなボタン化 |
| padding | メニューや余白の確保 |
| font-size/weight | 読みやすい大きめ文字、強調 |
３．より実践的なレスポンシブレイアウト
3.1. レイアウト崩れ対策とデザインの工夫
- メニューや見出しなど主要パーツはFlexboxやGridで配置調整
- 本文やボタン類は文字サイズ・余白に注意してタップしやすく
- メディアクエリを複数段階で設定し、タブレット・大画面スマホにも最適化
まとめ
レスポンシブ対応は、1つのHTMLに対してCSSでスタイルを切り替えるだけで実現できるのが特徴です。
本記事で紹介したポイントとサンプルを活用することで、PC・スマホどちらでも快適なWebレイアウトが作成できます。