marginで空間作成
marginで空間作成
ここでは、これまで例として「文字色を赤」「下線」「サイズを14ピクセル」「青い線で囲む」といったスタイルを適用させていた見出し4に対して「margin」のプロパティを使い左側に空白を入れて間隔を調整する例を紹介致します。
margin
「margin」というプロパティを使用すると、そのタグの外側に、空間を開ける事が出来ます。実際にスタイルを記述して動作を見てみましょう。スタイルを下記のように変更致しました。（赤線が追記部分）
h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
border: 1px solid blue;
margin: 0px 0px 0px 20px;
}
ここで登場した「margin」の値は、4つの数値が並んでいます。これは、前回登場した「複数の値をまとめて指定する方法」を使用しています。marginの場合、4つ数値を並べると、「上・・・右・・・下・・・左」の順番で数値が適用されます。つまり、ここでは「上と右と下の空白は0ピクセル。つまり無しで左だけ20ピクセル」と指定しています。では、実際に動作を見てみましょう。
見出し4
少しわかりにくいでしょうか。今までの「margin」のプロパティで空間を指定していなかった見出し4は、以下です。
見出し4
左側に空間が開いている事がおわかり頂けますでしょうか。このようにして左側に空間を開ける事が出来ます。この「margin」は、「border」のプロパティと同じで、上のみ指定したい場合は「margin-top」、右のみ指定したい場合は「margin-right」、下のみ指定したい場合は「margin-bottom」、左のみ指定したい場合は「margin-left」というようにも指定できます。
次は「paddingで空間作成」です。
この「初めてのホームページ作成」の分類には以下のページがあります。
