HTML講習

ボックスモデル（PDF 素材）

ボックスモデル

生成される四角形の領域の事をボックスと言う。

• content　内容
• padding　内容と枠線の余白
• border　枠線
• margin　枠線と他の要素との余白

マージン

マージンを指定した要素の枠線から親要素の余白。
値は、固定値(-も可能)・％ (-も可能)・auto

margin-top（上マージン）

記述例 margin-top: 100px;（上マージンに100pxの余白）

margin-left（左マージン）

記述例 margin-left: 100px;（左マージンに100pxの余白）

margin-bottom（下マージン）

記述例 margin-bottom: 100px;（下マージンに100pxの余白）

margin-right（右マージン）

記述例 margin-right: 100px;（右マージンに100pxの余白）

margin（上下左右一括指定）

margin: 10px 20px 30px 40px;（上10px 右20px 下30px 左40pxの余白）
margin: 10px;（上下左右各10pxの余白）
margin: 10px 20px;（上下10px 左右20pxの余白）
margin: 10px 20px 30px;（上10px 左右20px 下30pxの余白）

要素間の左右マージンは重なり合わず、それぞれのマージンが確保される。
上下マージンは、いずれか大きい方の値がマージンとして設定される。
ブロック要素で左右マージンを『auto』にすることで、要素全体をセンタリングできる。

パディング

その要素の内容と枠線との余白。
値は、固定値(-は不可)・％ (-は不可)・auto

padding-top（上パディング）

記述例 padding-top: 20px;（上パディングに 20px の余白）。

padding-left（左パディング）

記述例 padding-left: 20px;（左パディングに 20px の余白）。

padding-bottom（下パディング）

記述例 padding-bottom: 20px;（下パディングに 20px の余白）。

padding-right（右パディング）

記述例 padding-right: 20px;（右パディングに 20px の余白）。

padding（上下左右一括指定）

padding: 10px 20px 30px 40px;（上10px 右20px 下30px 左40pxの余白）
padding: 10px;（上下左右各10pxの余白）
padding: 10px 20px;（上下10px 左右20pxの余白）
padding: 10px 20px 30px;（上10px 左右20px 下30pxの余白）。

ボーダー

太さ

上下左右の枠線の太さ
thin (細いボーダー)・medium ( 中間の太さのボーダー)・thick ( 太いボーダー)・固定値(-は不可)

border-top-width（上ボーダー）

記述例 border-top-width: 20px;（上パディングに 20px の余白）

border-left-width（左ボーダー）

記述例 border-left-width: 20px;（左パディングに 20px の余白）

border-bottom-width（下ボーダー）

記述例 border-bottom-width: 20px;（下パディングに 20px の余白）

border-right-width（右ボーダー）

記述例 border-right-width: 20px;（右パディングに 20px の余白）

border-width（上下左右一括指定）

border-width: 10px 20px 30px 40px;（上10px 右20px 下30px 左40pxのボーダー）
border-width: 10px;（上下左右各10pxのボーダー）
border-width: medium 20px;（上下中間の太さ 左右20pxのボーダー）
border-width: 10px 20px thin;（上10px 左右20px 下細いのボーダー）

形状




上下左右の枠線の形状
none (なし)・ hidden (なし)・ dotted (点線)・ dashed (破線)・ solid (一重)・ double (二重)・ groove (ボーダーを立体凸表示)・ ridge (ボーダーを立体凸表示)・ inset (内容全体を立体凹表示)・ outset (内容全体を立体凸表示)

border-top-style（上形状）

記述例 border-top-style: dotted;（上形状が点線）

border-left-style（左形状）

記述例 border-left-style: solid;（左形状が一重）

border-bottom-style（下形状）

記述例 border-bottom-style: dotted;（下形状が点線）

border-right-style（右形状）

記述例 border-right-style: solid;（右形状が一重）

border-style（上下左右一括指定）

border-style: solid dotted solid dotted;（上一重 右点線 下一重 左点線）
border-style: dotted;（上下左右各点線）
border-style: solid dotted;（上下一重 左右点線）
border-style: solid dotted none;（上一重 左右点線 下なし）

色




上下左右の枠線の色
RGB値またはキーワードで指定　transparent(透過)

border-color（上下左右一括指定）

border-color: green red blue yellow;（上グリーン 右レッド 下ブルー 左イエロー）
border-color: black;（上下左右ブラック）
border-color: green red;（上下グリーン 左右レッド）
border-color: green black red;（上グリーン 左右ブラック 下レッド）

一括指定




ボーダーのプロパティを一括で指定。
太さ・形状・RGB値またはキーワードで指定

border-top（上一括指定）

記述例 border-top: medium dotted green;（上ボーダー、中間の太さ・点線・グリーン）

border-left（左一括指定）

記述例 border-left: 2px solid lime;（左ボーダー、太さ2px・一重・ライム）

border-bottom（下一括指定）

記述例 border-bottom: medium dotted green;（下ボーダー、中間の太さ・点線・グリーン）

border-right（右一括指定）

記述例 border-right: 2px solid lime;（右ボーダー、太さ2px・一重・ライム）

border（上下左右一括指定）

border: medium dotted green;（全ボーダー、中間の太さ・点線・グリーン）