ベース記事

内容

ブロックタイプレベルとインラインレベル
widthとheightの使い方
外側の余白を調整する
内側の余白を調整する
境界線をつける
インラインタイプをブロックタイプに変換する方法
ボックスの角を丸くする

1.ブロックタイプレベルとインラインレベル

htmlのタグにはブロックタイプレベルとインラインレベルがある。これは何か？それはタグの領域がどこまであるのかである。ブロックタイプにはh1やpタグがある。インラインタイプにはaタグがある。ブロックタイプはウィンドウの横幅いっぱいに広がるもの。ボックスがウィンドウ横幅いっぱいまで広がるから別のタグを直下に置くと改行されたように見える。

ボックスが持つ領域は4つある。コンテンツ領域、パディング領域、ボーダー領域、マージン領域である。ボーダー領域はパディング領域とマージン領域の堺を示す。

2.widthとheightの使い方

横幅と縦幅を設定するには以下のプロパティを用いる。

プロパティ	役割	値
width	横幅の指定	px, %, auto
height	縦幅の指定	px, %, auto

heightの値としてはautoにしとくと良い。

3.外側の余白を調整する

	プロパティ	役割	使い方
	margin	外側余白を作る	margin : 上右下左 ;
使用例	--	--	margin : 12px 20 px 30 px 0 ;
使用例	--	--	margin : 20px ;
使用例	margin-top	上部の余白のみ	margin-top : 20px ;

上、下、右、左だけ余白を外側に追加したい場合は、それぞれmargin-top,margin-bottom,margin-right,margin-leftを使う。

marginが上下で設置された場合は重複分は相殺される。

4.内側の余白を調整する

コンテンツ領域内に余白部分を設けるプロパティはpaddingである。paddingを設定した場合、背景色が継続して適用される。使い方はmarginと同じ。

(参考)背景色を白にしたいときは
background-color : #fff ;を用いる

5.境界線をつける

paddingとmarginの境界を作成するプロパティはborderを使う。

プロパティ	使い方	使用例
border	border : 線のサイズ線の種類色	border : 10px solid red
border-bottom	border-bottom : 線のサイズ線の種類色	border-bottom : 10px solid red

border-top, border-right, border-bottom, border-leftがある。

値	説明
none	ボーダーなし、初期値
solid	一本線
dashed	破線
dotted	点線
double	二本線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	全体が立体的に窪んだ線
outset	全体が立体的に隆起した線

6.インラインタイプをブロックタイプに変換する方法

aタグのようなインライン要素をh1,pのようなブロック要素に変換するにはdisplayのプロパティを用いる。これは通常aタグに対してmarginは使えないのでmarginが使えるブロックタイプに変換するためにある。
displayの値は以下のものである。

値	説明
block	ブロックレベル要素に変更（横幅100%になる）
inline-block	インライン＆ブロックレベル要素に変更（横幅は文章までのブロック）
inline	インライン要素に変更

a{ display : inline-block } これを使ってmarginとpadingで調整する手続きで取る。

7.ボックスの角を丸くする

border-radiusを用いて角を丸くする。

border : 左上右上右下左下;と使う

ex border-radius : 10px 5px 5px 10px ;

すべて10ｐｘの場合は
border-radius : 10 px ; と書くことができる。

diadia

興味があることをやってみる。自分のメモを残しておきます。

ボックスのスタイル