WEBページで横並びBOXの高さをそろえる方法
2016年10月28日
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
適用するパネル一つ一つに同じ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 : CSS, HTML, Javascript, 覚書
