わりと面倒なんですよねスタイルシート。
最近マシになってきましたが、ブラウザによって挙動違いますし。
スタイルシートはそれぞれの設定単体でできることが限られています。
複雑なことをしようとすると、いくつかのプロパティを組み合わせる必要があります。
わー面倒。
でもまあ、コツをつかめばそんなに面倒じゃないですよってことで。
今日は今時のサイトならどこでもやっている段組表示をやります。
で、ついでに段組表示を丸ごと中央に表示してみます。
段組の中央揃えは意外と取り上げられていないので。
とりあえず完成品のソースを。
ややこしそうなことやって見えますが、実際に表示されているのは下から１０行分くらいですよ。
これをそのままどこかのHTMLファイルにコピペして、ブラウザで見てください。
上のスクリーンキャプチャ画像と同じような表示になっていると思います。
では説明。内容を順番に見ていきます。
上は、Web DeveloperというFirefoxブラウザの追加機能で表示した要素の解析です。
全部「DIV」要素だけで構成されているのが分かると思います。
１番外側のdivが、superWrapという名前で宣言されているDIV要素です。
これは、ただtext-alignをcenterに設定して、内容を中央揃えにするだけのものです。
ちなみにこのsuperWrap、FirefoxやSafariでは不要です。
実は、IE6のバグのために、mainFrameの体裁指定が言うことを聞かないんです。
まあ、IE8ではちゃんと動作するんじゃないかな。たぶん。
外側から２番目のdiv、mainFrame。こいつは、段組全体の体裁を指定しています。
幅が400px。text-alignをleftに戻して、内容の文字は左詰めにしています。
普通の段組ならこれだけでいいのですが。
段組全体を中央揃えするための設定がここに入っています。「margin: auto auto;」という設定です。
autoというのは「とりうる最大の」という意味だそうで。外側のdivで中央揃えにされている今の場合、左右両側に一杯の余白（マージン）を取ります。これで、段組全体が中央揃えされるのです。
あとの２つのdiv、leftFrameとrightFrameはその名の通り、段組の左側と右側のフレームです。
それぞれfloatプロパティにrightとleftを指定して、ぴったりmainFrameの枠に収まるように幅を調整しておきましょう。
これで、中央揃えの段組は完成です。
幅が400px。text-alignをleftに戻して、内容の文字は左詰めにしています。
普通の段組ならこれだけでいいのですが。
段組全体を中央揃えするための設定がここに入っています。「margin: auto auto;」という設定です。
autoというのは「とりうる最大の」という意味だそうで。外側のdivで中央揃えにされている今の場合、左右両側に一杯の余白（マージン）を取ります。これで、段組全体が中央揃えされるのです。
あとの２つのdiv、leftFrameとrightFrameはその名の通り、段組の左側と右側のフレームです。
それぞれfloatプロパティにrightとleftを指定して、ぴったりmainFrameの枠に収まるように幅を調整しておきましょう。
これで、中央揃えの段組は完成です。
Comments for this post
投稿
