TOPページ >  文章を修飾する(背景色、画像、枠など...) > 余白を入れる(マージン)

余白を入れる(マージン)

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色や枠線を設定した際に、枠と文章がくっついてしまって見づらい場合などに 便利です。

上下左右の余白を同一に指定する場合
<タグ名 style="margin:上下左右の余白"></タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="margin:上下の余白 左右の余白"></タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="margin:上余白 右余白 下余白 左余白"></タグ名>
上の余白だけを指定する場合
<タグ名 style="margin-top:上余白"></タグ名>
下の余白だけを指定する場合
<タグ名 style="margin-bottom:下余白"></タグ名>
左の余白だけを指定する場合
<タグ名 style="margin-left:左余白"></タグ名>
右の余白だけを指定する場合
<タグ名 style="margin-right:右余白"></タグ名>
  1. タグ名:P、DIVタグなどが一般的ですが、ほとんどのインラインタグおよびブロックタグが使用できます。
  2. 各余白:ピクセル指定が一般的ですが、下記の絶対サイズまたは相対サイズから指定できます。
    絶対サイズ意味
    inインチ( 1 in = 25.4 mm )
    cmセンチメートル
    mmミリメートル
    ptポイント( 1 pt = 1/72 in)
    pcパイカ( 1 pc = 12 pt )
    pxピクセル(表示上の 1 ドット幅)
    相対サイズ意味
    em基準書体の文字の高さ
    ex基準書体の文字 x の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルです。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。グレーの領域と、文字の範囲がぴったりしすぎて すこし見映えがわるいかもしれません。

パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

ここで、上に 5 ピクセル、右に 10 ピクセル、下に 15 ピクセル、左に 20 ピクセルの余白を入れてみます。わかりやすいように、同時に背景色を黄色に指定します。

パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

このソースは次のようになります。

<div style="margin:5px 10px 15px 20px;background-color:yellow;">
パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
</div>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス