マージン

Since: 27th/May/2002

本項では、要素の周囲の余白であるマージンを指定します。要素が表示可能な範囲は、周囲の要素との関係で決定します。当該要素に対するスタイルの指定では、表示可能な矩形範囲に対して、要素の開始線をどれだけずらすかを指定します。

margin によってずらした開始線の内側が要素の表示可能領域になり、その外側の領域は親要素の領域であり、背景は親要素のものが使われます。

図：margin があらわす範囲

margin の指定方法

パラメタが一つの場合 - `上下左右`

margin プロパティのパラメタが一つの場合は、四方のマージンが全て等しく指定された値なります。

次の例は、段落要素の上下左右の四方のマージンを１em ずつとる指定です。

p { margin: 1em }

パラメタが二つの場合 - `上下左右`

margin プロパティのパラメタが二つの場合は、第一のパラメタが上下のマージン、第二のマージンが左右のマージンを指定します。

次の例は、段落要素の上下のマージンを１em ずつ、左右のマージンを表示可能幅の５％ずつとる指定です。

p { margin: 1em 5% }

パラメタが三つの場合 - `上左右下`

margin プロパティのパラメタが三つの場合は、第一のパラメタが上のマージン、第二のマージンが左右のマージン、第三のパラメタが下のマージンを指定します。たとえば h1, h2, h3 などの要素は、上の要素からは離して、下の要素とは近づけた方が直感的です。

次の例は、 h2 要素の上のマージンを２em、左右のマージンを表示可能幅の５％ずつ、下のマージンを１em とる指定です。

p { margin: 2em 5% 1em }

パラメタが四つの場合 - `上右下左`

margin プロパティのパラメタが四つの場合は、上から時計回りに順番に、右、下、左のマージンを個別に指定します。

次の例は、 ul 要素の上マージンを１em、右マージンを０、下マージンを２em、左マージンを１０％とる指定です。

ul { margin: 1em 0 2em 10% }

指定可能な値

`margin` で指定可能な値
`<length>`	定義は別項参照
`<percentage>`	% 単位。当該要素の表示可能領域の幅を１００％とする比率。
`auto`	ブラウザ依存

サンプル

本節でも、前項のサンプルを引き続き利用しましょう。

HTML 文書

HTML 文書は三つ存在しますが、さし当たって、 index.html のソースは次のようになっています：

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>坂口安吾を考える</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>坂口安吾を考える</h1>
<p><a href="./yonagahime.html">進む</a></p>
<p>坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の満開の下」、
「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二次大戦後１０
年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であり、「反逆」
と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んでいた経験からか、
「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」
を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。</p>
<p>「好きなものは咒うか殺すか争うかしなければならないのよ。」全く同感です。</p>
<p><a href="./yonagahime.html">進む</a></p>
<address>
Copyright (C) 2002 <a href="mailto:メールアドレス">SUGAI, Manabu</a>.
All rights reserved.
</address>
</body>
</html>

外部スタイルシート

これらの HTML 文書から参照している外部スタイルシート ango.css は前項の最後の段階では次のようになっています：

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: underline overline }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right }
a:link, a:visited { text-decoration: underline }
a:link { color: #0ff }
a:visited { color: red }
a:hover { color: #ccf; background: navy;
    text-decoration: none }
p a:link, p a:visited { text-decoration: underline }
p a:link { color: navy }
p a:visited { color: maroon }
p a:hover { color: #ccf; background: navy;
	text-decoration: none }

背景画像ファイル

外部スタイルシートで body 要素の背景画像に指定されているのは次の画像です：

図：rindou5.gif

index.html をブラウザで開いて表示を確認してください。

`margin` の指定

h1 要素のマージンを、上下左右共に１emⅡ指定します。p 要素のマージンは、上下１em、左右５％に指定します。また、 address のマージンを、上２em、左右５％、下１em に指定します。 ango.css を次のように編集／保存してください。

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive;
    text-align: center;
    text-decoration: underline overline;
    margin: 1em }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif;
    text-indent:1em;
    letter-spacing: 0.2em;
    margin: 1em 5% }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace;
    text-align: right;
    margin: 2em 5% 1em }
a:link, a:visited { text-decoration: underline }
a:link { color: #0ff }
a:visited { color: red }
a:hover { color: #ccf; background: navy;
    text-decoration: none }
p a:link, p a:visited { text-decoration: underline }
p a:link { color: navy }
p a:visited { color: maroon }
p a:hover { color: #ccf; background: navy;
	text-decoration: none }

index.html をブラウザで開いて、段落の表示位置が変化している事を確認してください。

上下に隣接するマージンは相殺が起こり、大きい方のマージンが採用されます。したがって、段落同士の間は１em だけマージンが取られ、段落と address の間は２em だけ取られます。また、 h1 要素と p 要素の間のマージンは、何れからも１em が指定されていますが、当該要素のフォントの大きさを１とする単位である "em" 単位の定義上、 h1 要素の周囲のマージンの方が大きく、そちらが採用されています。

また、マージン領域は親要素である body 要素の背景が使われていることを確認してください。

図： margin 指定した表示例