マージン

マージンの設定方法

<div style="margin-top:1em; margin-bottom:2em; margin-left:3em; margin-right:0em;"> サンプル文字列</div>

出力結果は以下です.

サンプル文字列

4辺のマージンを個別に設定できます.幅は単位を使って指定します.マイナスの値も設定できますが,重なってしまうことがあります.

マージンの圧縮

<div style="margin-bottom:1em;">サンプル文字列</div> <div style="margin-top:2em;">サンプル文字列</div>

出力結果は以下です.

サンプル文字列
サンプル文字列

本来ならサンプル文字列の間隔は1em+2em=3emとなりますが,実際は2emです.これはCSSの仕様で,ブロック要素でマージンが合わさる場合は,それぞれに指定されているマージン幅の合計ではなく最大値をとります.

プラスとマイナスのマージンが合わさるときは,最大値のマージンから最小値のマージンを引いた値がマージンの幅となります.マイナス同士のマージンの場合は,絶対値の最も小さいマージンが適用されます.

<div style="border-top-width:1em; border-bottom-width:2em; border-left-width:3em; border-right-width:4em; border-style:solid; border-color:#00f;">サンプル文字列です. スタイルシートを使って枠を描いています.この場合はブロック要素に指定しています.</div>

出力結果は以下です.

サンプル文字列です.スタイルシートを使って枠を描いています.この場合はブロック要素に指定しています.

4辺の枠を個別に設定できます.枠はマージンより内側に描かれます.

border-top-width,border-bottom-width,border-left-width,border-right-widthプロパティはそれぞれ枠の長さ(上・下・左・右)を指定します.

border-styleプロパティではキーワードを使うことで枠のスタイルを指定します.noneを指定すると枠は書かれません.dottedを指定すると点線,dashedを指定すると破線,solidを指定すると実線で,doubleを指定すると二重線で枠が描かれます.grooveを指定すると溝のように,ridgeを指定すると盛り上がっているように枠が描かれます.insetを指定すると要素が一段低く,outsetを指定すると要素が一段高く見える枠を描きます.

キーワードは1から4個まで指定できます.1つだけ指定すると,全辺に適用されます.2つ指定すると,前者は垂直方向,後者は水平方向の辺に適用されます.3つ指定すると,1つ目のキーワードは上辺,2つ目のキーワードは左辺と右辺,3つ目のキーワードは下辺に適用されます.4つ指定すると順に上辺・右辺・下辺・左辺に適用されます.

border-colorプロパティで枠の色を指定します.値は1から4個まで指定でき,border-styleプロパティと同様に適用されます.

パディング

<div style="padding-top:1em; padding-bottom:2em; padding-left:3em; padding-right:0em;"> サンプル文字列</div>

出力結果は以下です.

サンプル文字列

4辺のパディングを個別に設定できます.幅は単位を使って指定します.マージンは枠の外側ですが,パディングは枠の内側です.マージンと違って圧縮は起こりません.

箇条書き

先頭の印

<ol style="list-style-type:upper-roman;"> <li>サンプル項目</li> <li>サンプル項目</li> </ol>

出力結果は以下です.

  1. サンプル項目
  2. サンプル項目

list-style-typeプロパティで先頭の印を変えます.

ul要素用の値に,disc(黒丸;既定値),square(四角),circle(円)があります.

ol要素用の値に,decimal(数字;既定値),upper-roman(大文字のローマ数字),lower-roman(小文字のローマ数字),upper-alpha(大文字のアルファベット),lower-alpha(小文字のアルファベット)があります.

また,共通する値としてnone(印なし)があります.

画像の使用

<ul style="list-style-image:url(sample2.png);"> <li>サンプル項目</li> </ul>

出力結果は以下です.

list-style-imageプロパティで先頭部分を画像にできます.キーワードにnone(既定値)を指定すると画像は使用しません.

なお,list-style-typeプロパティとlist-style-imageプロパティでは後者が優先されますが,指定した画像が表示できない場合,list-style-typeプロパティで指定した値で印が表示されます.

印の位置

<ol style="list-style-position:inside;"> <li>サンプル項目です.ここでは箇条書きのマークと文章の位置関係について示しています. ご覧の通り,このように設定すると記号とテキストの位置関係が変わってきます.</li> </ol>

出力結果は以下です.

  1. サンプル項目です.ここでは箇条書きのマークと文章の位置関係について示しています.ご覧の通り,このように設定すると記号とテキストの位置関係が変わってきます.

回り込み

<p><img src="sample.jpg" alt="サンプル画像" width="200" height="40" style="float:right;" /> 文字が画像の左側に回り込んでいます.</p> <p style="clear:right;">回り込みを解除します.</p>

出力結果は以下です.

サンプル画像文字が画像の左側に回り込んでいます.

回り込みを解除します.

floatプロパティにはnone(回り込みを指定しない;既定値),left(その要素を左に配置し回り込みを行う),right(その要素を右に配置し回り込みを行う)が指定できます.

解除する場合はclearプロパティを指定します.none(回り込みを解除しない;既定値),left(左側の回り込みを解除する),right(右側の回り込みを解除する),both(両方の回り込みを解除する)が指定できます.

要素の大きさ

<p style="width:50%">この例ではパラグラフの横の長さを表示できるいっぱいの長さの 50%に設定しています.</p>

出力結果は以下です.

この例ではパラグラフの横の長さを表示できるいっぱいの長さの50%に設定しています.

widthプロパティは要素の横の長さを,heightプロパティは要素の縦の長さを指定します.長さは,単位かパーセンテージを使って指定します.