1月14日(水)2コマ目

今日、やったこと

• 幅、高さの指定
• 枠線
• 余白

今日のホワイトボード

 幅、高さの指定

ほとんどのタグは幅、高さの指定ができる。

幅はwidth、高さはheight。

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

図　高さ、幅を指定

枠線

枠線は

　border: 線種　線幅　線色;

で指定。

下だけ、上だけ、左だけ、右だけの枠線指定もできる。

枠線設定箇所	項目名	設定例
上だけ	border-top	border-top : solid 2px #f00000;
下だけ	border-bottom	border-bottom : solid 2px #f00000;
左だけ	border-left	border-left : solid 2px #f00000;
右だけ	border-right	border-right : solid 2px #f00000;

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

図　枠線を指定

余白

余白は

• 枠線内の余白（項目名はpadding）
• 枠線外の余白（項目名はmargin）

の2種類がある。

図　余白（padding、margin)

また、padding、marginともに4種類の設定方法がある。

〇上下左右おなじ余白

枠線内？外？	設定	設定例
枠線内	padding: 上下左右の余白サイズ;	padding: 5px;
枠線外	margin:上下左右の余白サイズ;	margin: 5px;

〇上下と左右で別々の余白

枠線内？外？	設定	設定例
枠線内	padding: 上下の余白サイズ 　左右の余白サイズ;	padding: 5px 10px;
枠線外	margin: 上下の余白サイズ 　左右の余白サイズ;	margin: 5px 10px;

〇上、下、左右で別々の余白

枠線内？外？	設定	設定例
枠線内	padding: 上の余白サイズ 　左右の余白サイズ 　下の余白サイズ;	padding: 5px 10px 8px;
枠線外	margin: 上の余白サイズ 　左右の余白サイズ 　下の余白サイズ;	margin: 5px 10px 8px;

〇上、下、左、右で別々の余白

枠線内？外？	設定	設定例
枠線内	padding: 上の余白サイズ 　右の余白サイズ 　下の余白サイズ 　左の余白サイズ;	padding: 5px 10px 8px 15px;
枠線外	margin: 上の余白サイズ 　右の余白サイズ 　下の余白サイズ 　左の余白サイズ;	margin: 5px 10px 8px 15px;

枠線と同じように、上だけ、下だけ、右だけ、左だけの余白指定もできる。

余白設定箇所	枠線内？外？	項目名	設定例
上だけ	枠線内	padding-top	padding-top : 5px;
	枠線外	margin-top	margin-top : 5px;
下だけ	枠線内	padding-bottom	padding-bottom : 5px;
	枠線外	margin-bottom	margin-bottom : 5px;
左だけ	枠線内	padding-left	padding-left : 5px;
	枠線外	margin-left	margin-left : 5px;
右だけ	枠線内	padding-right	padding-right : 5px;
	枠線外	margin-right	margin-right : 5px;

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

図　余白

[おまけ]デザイン指定

設定対象を表すセレクタの指定方法は下図のとおり。

図　デザイン設定のセレクタ

次回は

練習問題「マンボウ」、「ふぐ」のつづき。