Section 5 : パーセント指定

 CSS の属性の中には,長さをパーセンテージで与えることができるものがある。この方法は便利ではあるが,何を 100% とするのか,継承はどう行われるのか,という点に気を配らないと思いどおりのデザインにならない。

パーセント指定

 パーセント指定は,値に記号「%」をつけて書く。相対的な指定方法であるので,基準になる長さは属性によって異なっている

 パーセント指定された属性値の継承は,そのパーセンテージでなく,パーセンテージを乗じた実際の長さで行われる。たとえば line-height 属性でフォントサイズ 12pt のパラグラフに 200% を指定した場合,24pt になる。このとき,途中でフォントサイズを 14pt に変えても,行送りは 200% の 28pt にならず,24pt のままである。

 属性値に負の値が許される場合には,パーセント指定も負の値としてよい。

■ font-size 属性におけるパーセンテージ

 font-size 属性のパーセント指定は,継承されたフォントサイズ(それまでのフォントサイズ)に対して行われる。たとえば,継承されたフォント・サイズが 10pt の場合,

font-size: 120%;

これによって 12pt になる。

■ margin 4 属性におけるパーセンテージ

 margin 4 属性のパーセント指定は,そのとき要素が表示できるいっぱいの幅に対して行われる。簡単に言うと,通常のブロック要素で margin-left,margin-right 属性などをすべて 0 にしたときの要素の幅を 100% とする。

 ここで注意しなければならないのは,margin-top,margin-bottom も幅を 100% として指定されることである。

 たとえば,それまでの要素の幅が 480px の場合,

margin-left: 10%;

これによって左マージンは 48px になる。

■ line-height 属性におけるパーセンテージ

 line-height 属性にパーセント指定を行う場合,基準になるのはその要素のフォントサイズである。たとえば,フォントサイズが 12pt である要素に,

line-height: 150%;

これによって行送りは 18pt になるだろう。

 ところで,思い出していただきたいのは line-height 属性は単位を持たない数値によって“倍率”指定ができることである。これとは,一見同じである。実際,

line-height: 1.5;

でも同様の効果になるが,決定的に違うのは継承のされ方である。

 先ほど述べたように,パーセント指定では継承はパーセンテージを乗じた値で行われる。したがって,前者の例では継承される行送りは 18pt である。フォントサイズが変更されても 18pt のままである。いっぽう,倍率で指定した場合は継承されるのは倍率そのものである。よって,後者の例では行送りは 18pt になるものの,途中でフォントサイズが変えられたら 18pt でなく,指定されたフォントサイズの 1.5 倍になる。たとえば,14pt になったら,その 1.5 倍の 21pt になるだろう。

 実際に試してみよう。

<P STYLE="font-size: 10pt; line-height: 200%;">line-height 属性においてはパーセントで指定されたか倍率で指定されたかによって<EM STYLE="font-size: 18pt;">継承される値が異なります</EM>。</P>
<P STYLE="font-size: 10pt; line-height: 2;">line-height 属性においてはパーセントで指定されたか倍率で指定されたかによって<EM STYLE="font-size: 18pt;">継承される値が異なります</EM>。</P>

line-height 属性においてはパーセントで指定されたか倍率で指定されたかによって継承される値が異なります

line-height 属性においてはパーセントで指定されたか倍率で指定されたかによって継承される値が異なります

 それぞれの強調部分の行送りをよく確かめてみよう。前者は 20pt のまま,後者は倍率が継承されて 36pt になっているはずである。

 NN4  いずれの場合も,“乗じた値”が継承される。

 いままで出てきた属性でパーセント指定ができるのはこれだけであるが,これからいくつもこの指定方法をする属性が登場する。このとき,“何を基準にするのか”は少なくとも押さえておく必要があるだろう。

 ちなみに,パーセント指定をするときは値は整数である必要はなく,小数点以下を伴っていてもよい。