レスポンシブWEBデザイン：HTML/CSS基礎⑨【オンライン】

2025/4/8　「HTML/CSS基礎⑨」の記録です。

講師：⼤浜 信彦先生

レスポンシブWEBデザインとボックスモデルの基礎

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive Web Design）」は、PC・タブレット・スマートフォンなど様々なデバイスに対して、**ひとつのHTMLファイル（ワンソース）**で最適な表示を実現するWEBデザイン手法です。

画面サイズに応じてCSSのレイアウトが変化するため、専用のモバイルサイトを別途作る必要がなく、マルチデバイスに対応できます。

メリット

• 1つのHTMLで複数のデバイスに対応可能

• 更新や修正の作業が少なく済む

• URLが統一されるため、SEO対策にも有利

デメリット

• 設計やデザインがやや複雑

• PCとモバイルで同じ内容のため、読み込みが重くなる可能性あり

• 新しいデバイス登場に対応し続ける必要あり

CSSの基本「ボックスモデル」

レスポンシブ対応サイトを作る上で、CSSのボックスモデルの理解は超重要！
以下の10個のセレクタを押さえれば、CSSはかなり自由自在になるよ。

【ボックスサイズに関わるセレクタ】

width / height

• 初期値：auto

• 数値や%で指定可（※heightは％指定が難しい）

• max-width, min-width の活用が便利

• widthは「%」を使うとレスポンシブに強くなる

padding

• 内側の余白

• 数値・%指定可

• background の範囲に含まれる

• box-sizing: border-box; を使うと扱いやすくなる

margin

• 外側の余白

• 負の値も指定可能

• marginの相殺 や ネガティブマージン に注意！

• CSS初心者が苦手になりやすいが、理解するとレイアウトが自由自在になる

border

• 線の太さ・色・種類を指定

• widthやpaddingと合計すると、横スクロールの原因になりやすい

• box-sizing: border-box; で調整可能

【ボックスをレイアウトするセレクタ】

float / clear

• floatは要素を「左」「右」に寄せる

• floatを使ったら、必ず clear で回り込みを解除

• 使いすぎ注意！CSSの中でもトラブルが多いプロパティ

position

• 要素の位置を相対・絶対・固定で指定

• 位置指定には top, left, right, bottom を併用

• relative や absolute, fixed などで柔軟なレイアウトが可能

overflow

• 内容がボックスをはみ出した場合の表示方法を指定

• よく使うのは visible, hidden, auto, scroll

• floatの親に overflow: hidden; を使うのが定番テクニック

display

• 要素の表示形式を指定

• block, inline, inline-block, none など

• display: none; は表示非表示の切り替えに便利だが、使い方に注意

インライン要素・インラインブロック要素・ブロック要素の違い（比較表）

まとめ：まずはこの10個を理解しよう！

ボックスサイズに関するセレクタ

• width

• height

• padding

• margin

• border

レイアウトに関するセレクタ

• float

• clear

• position

• overflow

• display

ボックスモデルとこれらの基本セレクタを押さえることで、CSSが怖くなくなる！
焦らず、実際に手を動かして体感してみてね。