余白を入れる(マージン)
ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色や枠線を設定した際に、枠と文章がくっついてしまって見づらい場合などに 便利です。
上下左右の余白を同一に指定する場合
<タグ名 style="margin:上下左右の余白">~</タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="margin:上下の余白 左右の余白">~</タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="margin:上余白 右余白 下余白 左余白">~</タグ名>
上の余白だけを指定する場合
<タグ名 style="margin-top:上余白">~</タグ名>
下の余白だけを指定する場合
<タグ名 style="margin-bottom:下余白">~</タグ名>
左の余白だけを指定する場合
<タグ名 style="margin-left:左余白">~</タグ名>
右の余白だけを指定する場合
<タグ名 style="margin-right:右余白">~</タグ名>
- タグ名:P、DIVタグなどが一般的ですが、ほとんどのインラインタグおよびブロックタグが使用できます。
- 各余白:ピクセル指定が一般的ですが、下記の絶対サイズまたは相対サイズから指定できます。
絶対サイズ 意味 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>
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス