【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブWebデザインで使えるCSS!inline-blockで高さを揃えよう

レスポンシブWebデザインで使えるCSS!inline-blockで高さを揃えよう

レスポンシブWebデザインでも便利なinline-blockの3つの使い方

今回は、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の使い方

黒河

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+