ブログの探究－ブログ運営のテクニック集－: CSSで中央配置するテクニック（IEバグ対応編）-margin:auto-

2012年12月12日水曜日

CSSで中央配置するテクニック（IEバグ対応編）-margin:auto-

スポンサードリンク

概要：CSSで中央配置するテクニック（IEバグ対応編）-margin:auto-

前回のWordPressレッスンブック実況中継でIE（インターネット・エクスプローラー）でCSSのmargin:auto;を使用してもサイト全体が中央配置できない現象が発生しました（GoogleChrome、Firefoxは問題なしです）。

IE8以降はCSSに完全に対応するようになったと聞いていましたがそうでもなかったようです（笑）

そこで、IEで中央配置を確実に可能にする手順をご紹介したいと思います。

手順：CSS（スタイルシート）で中央配置するテクニック（IE編）

１．文章型宣言の確認

［対象ソース］

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これをHTMLの最初に宣言します。
これは標準モード宣言というもので新しい「CSS標準」をサポートします。

これは最低限です（笑）これを宣言してもうまく中央配置ができないときがあります。

２．body、コンテナ（ヘッダー、フッター、サイドバー、コンテンツの固まり）を変更する

【変更前】

/* コンテナ */
div#container {width: 760px;
margin: auto}

【変更後】

body {
    text-align: center;
}
/* コンテナ */
div#container {
    width: 760px;
    margin: 0 auto;
    text-align: left}

IEだと【変更前】のソースだと上手く機能しない時があります。
これを【変更後】のソースに変更して下さい。
これでIEでもうまくいくはずです。
正直IEはバグが多い気がします。IEのシェアが縮小し、FirefoxやGoogleChromeがシェアを伸ばしているのが頷けますね（笑）

スポンサードリンク

ブログの探究－ブログ運営のテクニック集－

ページ