スタイルシート裏の裏


第4章 スタイルシートの注意点


4-2.中央寄せにはテクニックが必要


中央寄せについては、現在、内容を書き換え中です。(99.7.21〜)
だいぶ、書き換えができてきたように思いますが。。(99.8.2)

HTMLファイルを作成する上で、中央寄せを表現したい場面はいっぱいあります。中央寄せは、次のようなスタイルシート定義になります。

セレクタ  { text-align: center; }

実際に中央寄せをしたい場面は、どんなものがあるでしょうか。テキストの中央寄せ、画像の中央寄せ、表の中央寄せ、リストの中央寄せ、見出しぐらいでしょうか。


テキストと画像の中央寄せ

テキストも画像もインライン要素ですから、どちらもP要素の内容として表現することができます。

.center  { text-align: center; }
<P class="center">この文章は中央寄せです<BR>
<IMG SRC="gazou.gif" ALT="この画像は中央寄せ表示されます"></P>

表の中央寄せ

Table要素も、P要素と同じように中央寄せが定義できるように思われます。が、そこが難しいところ。Table要素自身に中央寄せを定義してもNN4では効果がなく、DIV要素を使ってやらないといけません。ALIGN属性であればNN4で中央寄せできるのに、まるでここだけNN3に戻ったようです。

<DIV class="center">
<Table>
<TR><TD>この表は中央寄せになります</TD></TR>
<TR><TD class="center">このセル内容を中央寄せすることができます</TD></TR>
</Table>

ブロック単位の中央寄せ

DIVで複数のブロック要素を中央寄せしてみます。

<DIV class="center">
<P>中央寄せになります
<P>ここも中央寄せです。
</DIV>

中央寄せのまとめ

中央寄せの定義
↓属性:ブラウザ→IE4.0NN4.0
<p class="center">
テキストの中央寄せ
??効果あり
<table class="center">
表の中央寄せ
効果あり×
<div class="center">
ブロック要素の中央寄せ
効果あり効果あり

ここで、HTML4.0では、CENTER要素、Align属性ともに非推奨となっています。でも、W3Cは、新規UA(ブラウザ)の側では今後もこれら非推奨の要素・属性を有効とするよう考慮すべきだと言ってます。

結局のところ、古いブラウザでもちゃんと表示をさせ、DTD違反にならないようにするには、HTML4.0TransitionalのDTDを採用するしかないのでしょうね。


Indexに戻る ==== 前のページに戻る ==== 次のページへ