ボックスのセンタリング

今回のテクニックは、「ボックスを中央に寄せるにはどうすればいいか」です。簡単そうに見えて意外と難しいんですよ。

もちろんcenterタグとかを使えば一発ですが、それじゃあ古い。
せっかくスタイルシートを使う勉強してるんですから、スタイルシートを使ってやってみましょう。

テクニック使用前

今回はこのボックスをページ中央にもっていきます！

テクニック失敗:1

失敗しちゃった！なぜか文字だけが中央に。

テクニック失敗:2

失敗しちゃった！ボックスは中央だけど、文字まで中央寄せだ！

テクニック使用後

今度は成功！ボックスは中央、文字は左寄せになってるね。

今回のポイントは赤字の部分です。 widthを設定しないと意味が無いので気をつけてください。

.box1{
    text-align:center;
    width:100%;
    必要に応じて背景などを追加
}
.box2{
    text-align:left;
    margin:0px auto;
    width:150px;
    必要に応じて背景などを追加
}

HTMLでDIVタグに設定するクラスの順番も大切です。

<div class="box1">
<div class="box2">実際には背景を設定しないと良く分からないでしょう。</div>
</div>

背景や枠線などを設定して構造を見てみましょう

このボックスにはclass="box1"を指定してあります。古いブラウザーではこれだけで、このボックス内に含まれる全ての要素は中央寄せになります。しかし、新しいブラウザーでは中央寄せしてくれません。

このボックスにはclass="box2"を指定してあります。ここに設定したmargin:0px auto;のおかげで新しいブラウザーも中央寄せされるようになります。

これ以外の方法を取ると、失敗例のようになったり、ブラウザーによってはレイアウトがめちゃめちゃになってしまいます。

使いこなすための＋α

今回のテクニックはこのページや、Yahooのようなデザインを組みたいときに使用します。例としてこのページのソースを紹介します。ヘッドナビゲーション以下のものです。

スタイルシート
#main{
    position:absolute;
    top:60px;
    font-size:small;
    text-align:center;
    width:100%;
}
#contents{
    margin-left:auto;
    margin-right:auto;
    background-image:url(./img/sub-back.jpg);
    padding:1em	3em;
    text-align:left;
    width:600px;
    margin:0px auto;
}

HTML
<DIV id="main">（コンテンツボックスを中央へ寄せます）
<DIV id="contents">
　　～中略～
この中は全て左寄せになります。
</DIV>
</DIV>

ちょっと難しいかもしれませんが、モノにできればデザインの幅がグッと広がります。

bodyタグにtext-align:center;を設定して、そのすぐ下に来る divタグにtext-align:left;と左右のmargin:auto;を設定すれば、Yahooのようにページ全体が中央に寄ったデザインができます。

ブラウザーによってスタイルシートの解釈が違うのでちょっと複雑なソースになっています。バグがなくなればもっと簡単にできるんですけどね。スタイルシートを使う以上ある程度は仕方ないことなので、ここは我慢です。

一覧へ戻る