ボックスモデルについて

ボックスモデルに関わるセレクタ

・width　・hight　・padding　・margin　・border

ボックスレイアウトさせるセレクタ

・fioat　・clear　・position　・overflow　・display

ポイント

〇marginはバックグラウンド（back-ground）が適用されない→透明のスペース
〇marginは箱と箱の距離（上下の空間は大きい値に相殺される）
　→上下の距離はすべてmargin-bottomで入力など統一する
　→子要素から親要素に対するスペースを開けたい場合は親から子へのpaddingで入力
〇borderは装飾
〇displayは横並びのデザイン（グローバルナビ等）には必須

レスポンシブデザイン

レスポンシブ Web デザインの実施手順

1. viewport 定義を指定
2. 横幅変動時のコンテンツ幅を設定
3. Media Querie を使用してデザイン
4. 画面サイズに合わせた表示部品を導入

1.viewport 定義の指定

定義を head 要素内に指定する

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

width	ビューポートの横幅をpxで指定 device-widthでデバイスの横幅になる
height	ビューポートの高さをpxで指定 device-hightでデバイスの高さになる
initial-scale	ズームの初期倍率を0.0～10.0で指定
maximum-scale	ズームの最大倍率を0.0～10.0で指定
minimum-scale	ズームの最小倍率を0.0～10.0で指定
user-scalable	yesでズームできる、noでズームできない
viewport-fit	カメラ部分などがある場合viewport-coverでデバイスの横幅を画面全体にする

2.横幅変動時のコンテンツ幅を設定

表示する横幅が変動しても表示領域を超えない（横スクロールが発生しない）ようにコンテンツ全体幅を設定する。

・コンテンツ全体幅の設定はボックスモデル→コンテンツ全体幅は「content + padding + border + margin」
・box-sizingに
　content-boxが指定されている場合→width プロパティ値は「content」部分の幅
　content-boxが指定されていない場合→width プロパティ値は「content + padding + border」部分の幅

3.Media Querie を使用してデザイン

Media Queries （メディアクエリ）：CSS スタイルに適用できるシンプルなフィルタ
画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できる。

例）
header {
	max-width: 横幅の最大値（px）;
	margin: 隙間の値;
	overflow: テキストの処理方法;
	position: 要素の配置位置;
}
@media screen and (max-width: デバイスの表示幅がこのサイズだった時（px）) {	/* ヘッダ上部の隙間を削除 */
	header {
		margin: 隙間の値;
	}
}

4.画面サイズに合わせた表示部品を導入

例）幅狭時（スマホなど）にはメニューの表示型式をハンバーガーメニューにする
・ボタンなどはスマホだと縦横最低44pxあるとよい