2007年06月29日

ボックスの背景をそろえたい


今回は、サイドメニューがあるページで、メニュー部分背景の高さとコンテンツ部分背景の高さ、ボックスの背景をそろえるためのコーディングをご紹介します。

サイドメニュー部分、メインコンテンツ部分が枠で囲まれているようなデザイン(右図参照)でその枠の高さを揃えたい場合、みなさんはどのようにコーディングされますか?
テーブルで実現するのは簡単ですが、cssコーディングで実現するのは意外に難しいものです。

mainとsidemenuに背景を設定し、高さの指定なしに表示 すると、表示内容によってボックスの高さが決まってしまいま す。図2では、sidemenuの表示内容が少なく、contentsよりも ボックスの高さが小さくなり、ボックスの下がそろいません。



(htmlコーディング)
<div id="contents00">
<div id="main00">
テキストテキストテキスト・・・・
</div>
<div id="submenu00">
テキストテキストテキスト・・・・
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
#contents00 {
width:700px;
}
#main00 {
float:left;
width:400px;
padding:10px;
border:2px solid #000000;
}
#submenu00 {
float:right;
width:230px;
padding:10px;
border:2px solid #000000;
}
.clear {
clear:both;
height:0;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}
※ このサンプルでは解説のため、わかりやすいように、ソースが長くならないようborderでボックスを表現しています。この記事の最後に背景指定によるサンプルをご用意しておりますので、必要な方はそちらをご参考ください。

まず、思いつくのはmainとsubmenuのheightに同じ値を設定してしまう方法でしょう。main、submenu内のテキストをほとんど変更しない場合は有効と言えるかもしれませんが、汎用性がありません。もし、内部のテキストの高さがmain、submenuに設定した高さを超えてしまった場合はfirefoxでは、テキストがボックスをはみ出して表示されるという深刻な表示崩れを起こしてしまいます。(overflow:hiddenを指定すれば、はみ出したテキストの表示を消すことができます。また、IEではボックスの高さが自動で広がるため、main、submenuのボックスの高さがそろわなくなります。)
(htmlコーディング)
<div id="contents01">
<div id="main01">
テキストテキストテキスト・・・・
</div>
<div id="submenu01">
テキストテキストテキスト・・・・
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
#contents01 {
width:700px;
}
#main01 {
float:left;
width:400px;
height:200px;
padding:10px;
border:2px solid #000000;
}
#submenu01 {
float:right;
width:230px;
height:200px;
padding:10px;
border:2px solid #000000;
}
.clear {
clear:both;
height:0;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}

では、どうすればいいのでしょうか? 少し発想を変えてみてください。main、submenuに背景を設定してうまくいかないのであれば、別の場所に設定してしまえば良いのです。mainとsubmenuの親要素であるcontentsの背景にmainとsubmenuの背景を指定してしまうのです。言葉だけでは解からないと思いますのでサンプルをごらんください。
(htmlコーディング)
<div id="contents02">
<div id="main02">
テキストテキストテキスト・・・・
</div>
<div id="submenu02">
テキストテキストテキスト・・・・
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
#contents02 {
width:700px;
background:url(images/back.gif) repeat-y left top;
}
#main02 {
float:left;
width:400px;
margin-left:2px;
padding:10px;
border-top:2px solid #000000;
}
#submenu02 {
float:right;
width:230px;
margin-right:2px;
padding:10px;
border-top:2px solid #000000;
}
#contents02 .bottom {
clear:both;
height:2px;
background:url(images/bottom.gif) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}


いかがでしょうか? デザインを実現させるためには、見た目に忠実にコーディングするだけではなく、ときには違った見方、上からページ全体をとらえる目線が必要となります。
このテクニックはさまざまな局面に応用できます。使いこなせれば、コーディングの幅が広がり、より多くのデザインパターンに対応できるようになります。
(htmlコーディング)
<div id="head03">
ヘッダ
</div>
<div id="contents03">
<div id="main03">
テキストテキストテキスト・・・・
</div>
<div id="submenu03">
テキストテキストテキスト・・・・
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
#contents03 {
width:700px;
background:url(images/back03.gif) repeat-y left top;
}
#main03 {
float:left;
width:404px;
padding:18px 10px 10px 10px;
background:url(images/main_head.gif) no-repeat left top;
}
#submenu03 {
float:right;
width:234px;
padding:18px 10px 10px 10px;
background:url(images/submenu_head.gif) no-repeat left top;
}
#contents03 .bottom {
clear:both;
height:8px;
background:url(images/bottom03.gif) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:0;
}

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 17:51 | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。