FC2ブログ

ブログの表示を中央にしたい。

ブログをセンタリングするには一般的な方法として、全体をDIV要素で囲んで、左右のマージンを自動設定することでブログをセンタリングするというものになります。

サンプルとしては、こんな感じが一般的でしょうか?

■ HTML編集画面 ■

<body> <div id="container"> 記事本体部分やメニューなどのコンテンツ部分あれこれ </div> <script type="text/javascript" charset="utf-8" src="//static.fc2.com/comment.js" defer></script> <script type="text/javascript" src="//static.fc2.com/js/blog/blog_res.js" defer></script> </body>


■ CSS(スタイルシート) ■

div#container {
width : 780px; /* コンテンツ幅を780pxに設定 */
margin-left : auto; /* 左側のマージンを自動計算 */
margin-right : auto; /* 右側のマージンを自動計算 */
}



でも実は、これだけでは不十分だったりします。

古いバージョンのブラウザなどでは、左右のマージンを【AUTO】に設定してもセンタリングしてくれないんですね。

そこで、インターネットエクスプローラーのバグを利用することになるのですが、次のように記述します。


body {
text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}

div#container {
width : 780px; /* コンテンツ幅を780pxに設定 */
margin-left : auto; /* 左側のマージンを自動計算 */
margin-right : auto; /* 右側のマージンを自動計算 */
text-align : left; /* body要素で指定したセンタリングを戻す */
}



通常はテーブルやDIV要素をセンタリングさせるには、【text-align】は使われません。

。。。というのも、本来【text-align】プロパティは、インライン要素の位置揃えをする為のものだからなんですね。

でもそれをバグにより【text-align】でDIV要素もセンタリングされてしまうということなんです。

もしかしたら、今後インターネットエクスプローラーのバージョンがあがることで、違った記述方法がでてくるかもしれませんけどね。

蛇足として、私のブログの場合ですと、センタリングとは少し違いますが、opera用の文字サイズやおまじないをいろんなところに施しておりますんで、恐らく(全て確認してませんが)ほとんどのもに対応できていると思います。


<<< BACKさあ!ブログ(blog)をカスタマイズしよう!のTOPページへ>>>


スポンサーサイト

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/54-8551708b

0件のトラックバック

2件のコメント

[C36] koujiさんへ

お返事遅くなってしまいすいません。

ものすごいうれしいコメントです。
どうやったら色々と記事を見やすくできるのか試行錯誤しましたから。
  • 2005-10-11
  • kazu&megu
  • URL
  • 編集

[C35] 初めまして。

とても為になりました。
自分は初心者なんですが、そろそろプログラムを勉強したいなぁと思っていたら、こちらのサイトに出会いました。
とても分かり易くて本当に勉強になります。
これから活用させてもらいます!

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries