おやじ

おやじ

2015年12月14日

ブロック構造(div)の説明

ブロック構造(ブロック要素)とはHTML文章などの構成をひとかたまりにすることです。

divタグは、<div>(開始タグ)~</div>(終了タグ)で囲まれた範囲をひとつのかたまりにするボックス(箱)と考えます。

divのボックススタイル

CSSで定義できるスタイルは下記の図のようになります。

div_01

content(中身)
文章や画像などのことで、横幅(width)高さ(height)が定義できます。

padding(内側の余白)
枠線(border)と中身(content)の間の余白です。

border(枠線)
中身(content)を囲む枠線です。

margin(外側の余白)
枠線(border)と上下左右にある他の要素との余白です。

それでは実例で説明します。
横幅400px、高さ200pxの画像を内側の余白10px、枠線2px幅の直線、外側の余白を20pxで囲ったボックスを作成します。

HTMLの記述

CSSの記述

結果イメージは下記のようになります。

div_02_03

CSSは下記2通りの記述でも同じ結果が得られます。

CSSの記述の意味は下記の通りです。

div_03_01

idについては「識別子(id属性  class属性)の説明」で解説します。

 

コメントを残す