2009年8月29日土曜日

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

今日の解説は、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]ボックスを中央配置する


0 件のコメント:

webの森のFBページへも来て下さい