WEBページで横並びBOXの高さをそろえる方法

WEBページ作成時、何かしら横並びのデザインにすることが多い。

liタグで囲ったグローバルナビを横に並べるとか、ボックスの配置を横並びにしたりとか・・・

要素の横並びに関しては手法は色々あって、いつもどの手法を使おうか迷うので覚え書きとしてまとめ。

方法1:float

おなじみのfloat。XHTML1やHTML4時代、これに泣いた人も多かったのでは・・・
私は何やかやと、これをよく使ってしまう。馴染みがあるからかな・・・

主に2カラム3カラムでページ作成する場合の回りこみで使用しますが、いくつかの要素の横並びで使用する場合、行ごとにfloat解除をしないと高さが合ずにレイアウトがグチャグチャになる。
きちんとfloatを解除しないと、親要素の高さがなくなるという不思議な現象も起きる。

デザインによっては高さを指定して利用することも可能ですが(ユーザーの使いやすさを考慮して高さ指定したほうがいいか決めてくださいね)、可変で使用する場合は、方法5と方法6を合わせて使用すると良いかと。

方法2:inline-block

その名の通り、インライン要素とブロック要素のいいとこ取りなやつ。
インラインのように横並びになるけれど、ブロック要素のように高さや上下のマージンが使える。

主に、グローバルナビの横並びで使うことが多いかな。
子要素と子要素の間に隙間が生まれるので注意。

ul.inl_block li {
display: inline-block; /* 横並び */
width: 148px;
vertical-align: top; /* li要素を上端揃えに */
margin: 0 20px 20px 0;
padding: 20px;
border: 1px solid #CCC;
}

幅を調整することで、横に並べる要素の数を調整できる。
その上、レスポンシブWebデザインで使い勝手が良い。

方法3:table-cell

テーブルレイアウトのように表示させる。回り込ませてはいないので、解除の必要がない。
ただ、セル扱いになるのでmarginが効かない。でもpaddingは使えるので、背景色とか入れずに単に横並びするだけなら便利。

ul.sample {
display:table;
width:396px;
}

ul.sample li {
margin:0 10px 10px 0;
padding:10px;
border:1px solid #bbb;
display:table-cell;
width:100px;
background-color:#ddd;
list-style:none;
}

方法4:フレキシブルボックス

表示される領域によって可変に表示されるCSS3の要素・・・なので、古いプラウザではうまく動きません。
かくいう私も使用できる機会はあまりなく・・・

でも、そろそろ標準的に使用しても良いかな・・・これだけの指定で柔軟な表示ができるのでかなり便利かと。


<div class="flex">
<div>要素1</div>
<div>要素2</div>
<div>要素3<br>要素3</div>
<div>要素4</div>
</div>

.flex {
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

まだ、各ブラウザ対応のために、ベンダープレフィックスを使いまくらないとうまく表示されないけれど、そのうちdisplay:flex;だけの指定で表示されるようになったらかなり楽になるかと。

方法5:ネガティブmargin

floatしたボックスをネガティブマージンを高さ使って揃える。

paddingで思いっきりbottomの高さを指定して、marginでbottomに同じだけのマイナスの高さを指定。overflowをhiddenにして、内容を突き抜かせて表示させる。

注意:*段(一行)ごとにdivかulで括らないといけない。

div#boxArea {  
overflow: hidden;
height: auto;
width: 600px;
}

div#boxArea div {
float: left;
padding-bottom: 32767px;
margin-bottom: -32767px;
width: 200px;
background: #376C85;
}

壊して直す、みたいな方法なので後々弊害が出そうな気もするが・・・ともかく、borderを使用する場合は、bottomの線が表示されないので、あまりお勧めはしない、かな・・・

方法6:jQuery

jquery.matchHeight.jsを使用

適用するパネル一つ一つに同じclassを入れなければならないけれど、この方法が一番楽かも。


head内に記載
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script type="text/javascript">
$(function() {
$('.item').matchHeight();
});
</script>


body内に記載
<ul>
<li class="item">アイテム</div>
<li class="item">アイテム</div>
<li class="item">アイテム</div>
</ul>

category - works
tags - Tag : , , ,

コメントを残す

*メールアドレスは公開されません。

「日本語が含まれない」「URLが4つ以上含まれる」場合は無視されます。(スパム対策)

ページトップへ

Copyright © Ten blog All Rights Reserved.