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で空間作成」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成現在のページ
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?