外側余白(マージン)とは。
右図のように対象の上下左右の他の要素、または端までの余白です。
指定は上下左右個別に指定することができます。
|
|
[ 図1 ] 要素全体の外側余白(マージン) |
[ 図2 ] リスト項目の外側余白(マージン) |
指定した対象の外側に余白(マージン)を調整することができます。
この指定は他のスタイルパーツと組合わせ、または単体で使用することができます。
■マージン指定の種類
0pixel~100pixelの間で5ピクセル単位で用意しております。
個別指定
[右図内(1)] 左端までの余白
<mgl0~100>
[右図内(2)] 右端までの余白
<mgr0~100>
[右図内(3)] 上端までの余白
<mgt0~100>
[右図内(4)] 下端までの余白
<mgb0~100>
一括指定
[全方向一括] 上下左右要素までの余白
<mgn0~100>
[上下一括] 上下要素までの余白
<mgtb0~100>
[左右一括] 左右要素までの余白
<mglr0~100>
リスト項目間隔指定
[右図内(5)] リスト内各項目間の余白
<lim0~100>
使い方
■(1)単体で使用する
この段落には左に100pixel・上下に40pixelの外側余白が指定されています。
coreblobook(コアブロブック)とは?
「ページをめくりながら読む」という本の持つインターフェースを採用した、デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。
印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。
※さらにパディング(内余白)や背景白なども指定することできます。
この段落の記述
<p class="mgl100 mgtb40">
<strong>この段落には左に100pixel・上下に40pixelの外側余白が指定されています。</strong><br>
coreblobook(コアブロブック)とは?<br>
「ページをめくりながら読む」という本の持つインターフェースを採用した、デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。
印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。
</p>
■(2)組合わせで使用する
この段落には、エンジの背景色と左に100pixel・上下に30pixelの外側余白、さらに20pixelの内側余白が指定されています。
coreblobook(コアブロブック)とは?「ページをめくりながら読む」という本の持つインターフェースを採用した、デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。
※さらに幅や高さも指定することできます。
この段落の記述
<p class="bg_en02 mgl100 mgtb30 pdg20">
<strong>この段落には左に100pixel・上下に40pixelの外側余白が指定されています。</strong><br>
coreblobook(コアブロブック)とは?<br>
「ページをめくりながら読む」という本の持つインターフェースを採用した、デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。
印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。
</p>
以下の指定を組み合わせています。
※bg_en02 = エンジの背景色
※mgl100 = 左に100pixelのマージン
※mgtb30 = 上下に30pixelのマージン
※pdg20 = 内側余白20pixel
■(3)リストのマージンを指定する
リストには
「リスト本体のマージン」 と
「リスト項目間隔」 の2種類が指定できます。
- このリストには「グリーンのマーカー」と「左に80pixel・上下に40pixel」の外側余白が指定されています。
- さらに、「各項目の間隔を20pixel」に指定しています。
- 「ページをめくりながら読む」という本の持つインターフェースを採用した、
- デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、
- WEBサーバー上で動作するWEBアプリケーションソフトウェアです。
- 印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。
※さらに背景色や外枠を指定することができます。
このリストの記述
<ul class="ar01_gr01 mgl80 mgtb20 lim15">
<li>このリストには「グリーンのマーカー」と「左に80pixel・上下に40pixel」の外側余白が指定されています。</li>
<li>さらに、「各項目の間隔を20pixel」に指定しています。</li>
<li>「ページをめくりながら読む」という本の持つインターフェースを採用した、</li>
<li>デジタルドキュメントを、画像を登録するという簡単な操作だけで作成できてしまう、</li>
<li>WEBサーバー上で動作するWEBアプリケーションソフトウェアです。</li>
<li>印刷物をスキャニングしたデータや印刷データを元に簡単に電子カタログを制作する事ができます。</li>
</ul>
以下の指定を組み合わせています。
※ar01_gr01 = グリーンの矢印マーカー
※mgl100 = 左に100pixelのマージン
※mgtb20 = 上下に20pixelのマージン
※lim15 = リスト項目の間隔を15pixel空ける