ボックスを全体のセンターにしたいんですが・・

今日の解説は、CSSを勉強し始めた方が、最初のほうでまずつまずくパターン。


Q「ブラウザのサイズをかえても、サイト全体は真ん中にしたいとき、どうすれば？」


昔ながらのやり方ではこんな方法がありました。

＜center＞ここにボックス＜/center＞
これはcenterタグを直接書く方法。
でも非推奨タグなので使わない方が良いとされています。

Dreamweaver8には、テキストのプロパティに中央揃えボタンがあるので、それを使うと
＜div align="center"＞ここにボックス＜/div＞
このタグが入ります。手軽なのはこの方法ですね。
ほかにも
＜div style="text-align:center"＞ここにボックス＜/div＞
こんなやり方もありましたが、styleは、今後非推奨になるそうなので、xhtmlで書くなら、こちらもなるべく使わないようにしたほうがいいですね。


というわけで、ここからがxhtmlで書いて、スタイルシートで指定する正しいやり方の話です。

正統派の方法は、センタリングしたいボックスのマージンの左右にautoを指定する方法です。
ただし、この方法は最近のブラウザでは有効ですが、IE6は言うことを聞いてくれません。
そこで、IE6のために、＜body＞にtext-algin:centerを指定して、ボックスにmargin:0 auto;
そして、もう一度、text-algin:leftを指定して、文字を左寄せに戻してあげる
・・・・・という一手間かけたことをしないといけません。



サイト全体をブラウザの真ん中に表示しているホームページは、たいていこの方法を使っているので、覚えておきましょう。

このタグを、DreamweaverCS4を使って書く方法を動画マニュアルで紹介しました。
Dreamweaverの使い方にも慣れていない初心者の方は、よかったら見てください。

＞Dreamweaverでギャラリーを作る　[13]ボックスを中央配置する