Cascading Style Sheets解説

'text-align'に関する考察

［Attention］
本文書の内容の正確性は保証いたしません。当pageから得た情報等によって何らかの損害を被ったとしても制作者（当方）は何らその責を負わないものとします。当pageの文書の改変や無断転載はご遠慮ください。文中の例示は一部スタイルシートを用いて実現されており、IE5やNC4.7では正しく表示されないものがあります。表示確認は、現在最も良くCSSに対応していると考えられるNetscape 6で行っています。Netscape 6で確認がとれなかった部分は、class属性を'suspicion'としたSPAN要素でマークアップし、表示の上では文字色を緑色(#008000)として当該部分を示しています。文中の各例は、Netscape 6による表示例（png画像）、当pageの利用者が閲覧に用いているUAによるレンダリング、各例示に用いたHTMLソースとスタイルシート、の順に示されています。

CSS2勧告の16.2より

'text-align'

Value: left | right | center | justify | <string> | inherit

Initial: depends on user agent and writing direction

Applies to: block-level elements

Inherited: yes

Percentages: N/A

Media: visual

This property describes how inline content of a block is aligned.

以上の引用から分かるように、'text-align'の適用対象は「ブロック要素」であり、その効果は「このpropertyを適用したブロック要素の中のインラインの内容」に及ぶものである。よって「text-align:center」とした時、ブロック要素そのものが中央揃えされることはなく、その内部のインラインの内容が中央揃えされるのである。

つまり、見出しの中央揃えをしようと「text-align:center」をh1要素（ブロック要素）に適用した場合、上記引用通り、h1要素の内容であるテキスト（インライン）が中央揃えされるのである。ここで、例としてh1要素にさらにborderなど適用すれば、ブロックボックスそのものは中央揃えされていないことがよく分かるかもしれない。

中央揃えの例1

<p class="ex1">中央揃えの例1</p>

.ex1{text-align:center;
     border:2px solid gray}

中央揃えの例2

<p class="ex2">中央揃えの例2</p>

.ex2{text-align:center;
     border:2px solid gray;
     width:60%}

また、div要素を用いてp要素の内容を一度に中央揃えする場合があるが、これもまた、div要素で指定したproperty「text-align」がp要素に継承され、結果、p要素の内容であるテキストが中央揃えされると考えられる。つまり、div要素の内容であるp要素（ブロック要素）が中央揃えされたのではなく、div要素の子であるp要素の内容であるテキスト（インライン）が中央揃えされるのである。

<div class="ex3">
<p>menu1</p>
<p class="ex3-1">menu2</p>
<p class="es3-2">menu3</p>
</div>

.ex3{text-align:center;
     border:2px solid gray;
     width:80%}

.ex3-1{border:2px solid #369}

.ex3-2{border:2px solid #963;
       width:50%}

またテーブルの場合においても、table要素に'text-align:center'と指定した場合には、table要素の子孫(descendant)である要素のインラインの内容は中央揃えされるが、テーブル全体が中央揃えされることはない。

<table border="1" class="ex4">
<tr><td>now testing</td><td>!</td><td>table</td></tr>
<tr><td>col</td><td>row</td><td>???</td></tr>
</table>

.ex4{text-align:center}

ちなみに、CSS2勧告の17.4.1にて、表そのものの中央揃えの方法として、

TABLE { margin-left: auto; margin-right: auto }

とする方法が挙げられている。

<table border="1" class="ex5">
<tr><td>now testing</td><td>!</td><td>table</td></tr>
<tr><td>col</td><td>row</td><td>???</td></tr>
</table>

.ex5{margin-left:auto;
     margin-right:auto}

そして、この方法は他のブロック要素を中央揃えする場合にも用いることが可能なはずである。

中央揃え

<p class="ex6">中央揃え</p>

.ex6{border:2px solid gray;
     width:50%;
     margin-left:auto;
     margin-right:auto}

以上。

Back(b)