12月3日(水)1コマ目

今日、やったこと

枠線・余白

今日のホワイトボード

枠線・余白

ほとんどのタグは枠線、余白が設定できる。

余白は枠線内、枠線外の2種類。

図　枠線・余白

⓪枠線・余白設定前

表示すると以下のとおり。

図　枠線・余白設定前

表示すると、2つの段落間に余白がある。

ブラウザにはデフォルトで適用されるデザイン設定があり、<p>タグにはすでに上下の余白が設定されている。

①枠線設定

枠線はプロパティ名borderで設定できる。

　border : 線種　線幅　線色；

表示すると以下のとおり。

図　枠線設定

②枠線外の余白設定

枠線外の余白はプロパティ名marginで設定。

下表のように、4パターンの設定がある。

設定する余白	設定内容
上下左右同じ	margin : 上下左右の余白;
上下、左右	margin : 上下の余白　左右の余白;
上、下、左右	margin : 上の余白　左右の余白　下の余白;
上、下、左、右	margin : 上の余白　下の余白　左の余白　右の余白;

表示すると以下のとおり。

図　枠線外の余白

③枠線内の余白設定

枠線内の余白はプロパティ名paddingで設定。

paddingもmarginと同じように、4パターンの設定がある。

設定する余白	設定内容
上下左右同じ	padding : 上下左右の余白;
上下、左右	padding : 上下の余白　左右の余白;
上、下、左右	padding : 上の余白　左右の余白　下の余白;
上、下、左、右	padding : 上の余白　下の余白　左の余白　右の余白;

表示すると以下のとおり。

図　枠線内の余白

④上・下・左・右だけ枠線・余白を設定

枠線や余白は上だけ、下だけ、左だけ、右だけと設定することができる。

設定対象	プロパティ名
	枠線	枠線外の余白	枠線中の余白
上	border-top	margin-top	padding-top
下	border-bottom	margin-bottom	padding-bottom
左	border-left	margin-left	padding-left
右	border-right	margin-right	padding-right

左と下の枠線をそれぞれ別々に設定。

表示すると以下のとおり。

図　左と下だけ枠線設定

練習問題

正解例をあげておきます。

style.css

index.html

次回は

フォームをやります。