iStudio 2|21 ロゴ

Extra

CSS スタイルシート雑技 No. 2

ボックスがセンタリングしたレイアウトを作る

<center> や <div align="center"> が使えず、センター揃えのレイアウトに苦労していませんか? margin-left と margin-right を有効に使う事によって、センター揃えのレイアウトは実現できます。

解説

センター揃えにはいくつかのパターンがありますが、まずはずばり「ボックスをセンターに揃える」を主眼に置いたもの。

<style type="text/css">

 div.content{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
 }
 
</style>


<div class="content">
 センタリングしたいものをここに
</div>



センタリングしたいコンテンツの幅を決め、左右のマージンについては自動(auto)で計算させる事で、センター揃えは実現します。しかし、Windows 版 Internet Explorer 6.x ではこの auto が解釈されず、ボックスは左側に寄ってしまいます。
この解釈の違いを補正するために、Windows IE 6.xでのセンタリング方法である text-align: center; をボックスの親要素に摘要します。

<style type="text/css">

 body{
  text-align: center;
 }
 
 div.content{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
 }
 
</style>


<div class="content">
 センタリングしたいものをここに
</div>



さて、こうする事により、Windows IE 6.x でもボックスがセンタリングされましたが…。親要素の text-align: center; を継承してしまい、ボックスだけではなく文書もセンタリングされていまいます。そこで、子要素では text-align: left; のように、再度文書の寄せ方を指定する必要があります。
という訳で、完成したのは下記の通りです。

<style type="text/css">

 body{
  text-align: center;
 }
 
 div.content{
  width: 100px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
 }
 
</style>


<div class="content">
 センタリングしたいものをここに
</div>




次に、「ボックスをセンターに揃えたいが、ピクセル数で厳密に決めなくても良い場合」です。
横幅のピクセル数が決まったレイアウトの場合は上記の形で対応するのが良いと思われますが、ウインドウのサイズに追随して可変する場合、たとえば「ウインドウの幅に対して 50% の幅でセンタリンクしたい」というケースの場合は非常に簡単な記述となります。

<style type="text/css">

 div.content{
  margin-left: 25%;
  margin-right: 25%;
 }
 
</style>


<div class="content">
 センタリングしたいものをここに
</div>



見ての通り、センタリングというよりも左右のマージンを一定にする事によってセンタリングのように見せかけているだけですが、ピクセル数の指定に比べてこれのメリットは、 Windows IE 6.x 用のトリッキーな記述をしなくても良い点と、閲覧者がウインドウをどんなに可変させても横スクロールバーが出ない(正確には出にくい)点の2点がメリットとして挙げられます。ですから、ピクセル指定ではなくパーセンテージ指定の場合は、こちらの記述方法をお薦めします。