レスポンシブWebデザインでも便利なinline-blockの３つの使い方
今回は、display:inline-blockを使って、要素を横並びにする方法をご紹介します。
display:inline-blockとは
CSSでdisplay:inline-blockを適用すると、要素がインライン要素のように横に並び、かつブロックレベル要素のように高さの指定等もできるようになります。インライン要素？ブロックレベル要素？な方は下記の記事も参考にしてみてください。
参考：CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
inline-blockはこんな時にぴったり
①高さが違う要素を並べるとき
例えば複数の商品を並べるときなどで、一部の商品だけテキストが改行されたりで高さが合わない…というような場合。
CSSで高さが違う要素をfloatで並べると、レイアウトが崩れてしまいますが、inline-blockの場合は簡単に高さが揃ってくれます。
また、幅の合計が100%を越えると改行されるので、幅を調整することで、横に並べる要素の数を調整できます。
<div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名が長い！ 商品名が長い！ 商品名が長い！ <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名が長い！ 商品名が長い！ 商品名が長い！ <img src="item.png"> </div> <div class="itemBox disp-inBlock"> 商品名 <img src="item.png"> </div> </div>
.disp-inBlock{display:inline-block:}
/*小さいデバイスでは横に並べる数を変更*/
@media screen and (max-width: 600px){
.itemBox{
width:47%
}
}
/*以下はスタイルの調整*/
img{width:100%;}
.box1{height: 300px;
width:500px;
background-color:red}
.itemBox{
width:22%;
border:1px solid gray;
margin:1%;}
②並んでいる要素の高さを調整したいとき
また、inline-blockに指定すると、floatと違って要素をvertical-alignプロパティを用いて調整することができます。
＞＞補足
vertical-alignプロパティとは行の中で使われるテキストや画像の縦方向の位置関係を指定する際に使うプロパティです。
「行の中で行われる」という条件があるので、適応できるのはインライン要素とテーブルセルのみになります。そのような条件から、floatで調整した場合はvertical-alignプロパティを用いるということができません。
＞＞
top、middleだけでなく、％やpxを指定して細かい調整も可能です。
画像とテキストを横に並べる際に便利です。
なお、このときmiddleや％、px等の基準となるのはベースラインで、これはテキストにしかありません。したがってテキストとテキストでないものを横に並べる際には、テキストでないもののほうにvertical-alignを適用します。
参考：vertical-align－スタイルシートリファレンス
<div class="box"> <div class="disp-inBlock half v-btm"><img src="item.jpg"></div> <div class="disp-inBlock text half">画像に対して vertical-align:bottom; が適用されています。</div> </div> <div> <div class="box"> <div class="disp-inBlock text half">画像に対して vertical-align:50%; が適用されています。</div> <div class="disp-inBlock half v-50"><img src="item.jpg"></div> </div> <div class="box"> <div class="disp-inBlock half v--35px"><img src="item.jpg"></div> <div class="disp-inBlock text half">画像に対して vertical-align:-35px; が適用されています。</div> </div> </div>
.disp-inBlock{display:inline-block}
.v-btm{vertical-align:bottom;}
.v-50{vertical-align:middle;}
.v--35px{vertical-align:-35px;}
/*小さいデバイスでは縦に並べる*/
@media screen and (max-width: 600px){
.half{
width:100%
}
}
/*以下はスタイルの調整*/
.half{width:49%}
.text{text-decoration: underline;}
img{width:100%;}
body{font-size:35px;}
.box{margin:15px 0;
border:1px solid;}
③折り返したくないテキストがあるとき
折り返したくないテキストがあるときに、inline-blockで改行位置を変えることができます。
例えば、レスポンシブWebデザインのチェックボックスで、デバイス幅が変わっても、テキストの途中で改行されないようにすることができます。
<div>希望職種 <label><input type="checkbox" name="q1" value="その1"> SE</label> <label><input type="checkbox" name="q1" value="その2"> プログラマー</label> <label><input type="checkbox" name="q1" value="その3"> Webデザイナー</label> <label><input type="checkbox" name="q1" value="その4"> ディレクター</label> <label><input type="checkbox" name="q1" value="その5"> 営業</label> <label><input type="checkbox" name="q1" value="その6"> その他 </label> <label><input type="checkbox" name="q1" value="その7"> ブラウザ幅が変化してもテキストの途中で改行されません！ </label> </div> </html>
label{display:inline-block;}
/*以下はスタイルの調整*/
input{font-size:20px;}
なお、inline-blockを使うと意図しない隙間ができてしまうので注意が必要です。
参考：inline-blockを並べた場合に発生する「隙間」を消去するCSS | INSPIRE TECH
終わりに
いかがでしたでしょうか。
このようにレイアウトを横に並べる
レスポンシブWebデザインでコーディングをしているとよく高さが不揃いになり、見た目の違和感が出てくるケースはよくありますが、inline-blockで解決することは多いです。
同じく横に並べるプロパティで、table-cellの記事も併せてご覧ください。
レスポンシブ化するなら知っておきたいtable-cellの使い方
黒河
