わりと面倒なんですよねスタイルシート。
最近マシになってきましたが、ブラウザによって挙動違いますし。
スタイルシートはそれぞれの設定単体でできることが限られています。
複雑なことをしようとすると、いくつかのプロパティを組み合わせる必要があります。
わー面倒。
でもまあ、コツをつかめばそんなに面倒じゃないですよってことで。
今日は今時のサイトならどこでもやっている段組表示をやります。
で、ついでに段組表示を丸ごと中央に表示してみます。
段組の中央揃えは意外と取り上げられていないので。
とりあえず完成品のソースを。
ややこしそうなことやって見えますが、実際に表示されているのは下から１０行分くらいですよ。
- <html>
- <head>
- <style type="text/css">
- <!--
- * {
- margin:0px;
- padding:0px;
- }
- body {
- padding:10px;
- }
- div.superWrap {
- text-align:center;
- }
- div.mainFrame {
- text-align:left;
- width:400px;
- margin: auto auto;
- }
- div.leftFrame {
- width:100px;
- float:left;
- background:#fcc;
- }
- div.rightFrame {
- width:300px;
- float:right;
- background:#ccf;
- }
- -->
- </style>
- </head>
- <body>
- <div class="superWrap">
- <div class="mainFrame">
- <div class="leftFrame" style="height:200px;">段組左</div>
- <div class="rightFrame" style="height:200px;">段組右</div>
- </div>
- </div>
- </body>
- </html>
これをそのままどこかの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
投稿
