２列の横リストを簡単CSSでレスポンシブルにする

AdSenseの広告ユニットを２枚横並びに記事に貼り付ける方法を考えていて、簡単なスタイルシートでレスポンシブル対応が出来たので備忘録的な記事で投稿します。

同じ広告の横並び

こんな感じで横並びになっている広告をよく見かけますよね。

 
普通にブロック要素で横並びに作ると、こんな感じになります。

<div style="width: 100%; text-align: center;">
<div style="float:left; width: 300px; height: 250px; background-color: #ff0000;"><span style="color: #ffffff;">広告1</span></div>
<div style="float:left; width: 300px; height: 250px; background-color: #0000ff;"><span style="color: #ffffff;">広告2</span></div>
<div style="clear: both;"></div>
</div>

 
これでもまぁ十分なんですが、レスポンシブルなページの場合ページの横幅が狭くなると、横２列から縦２行にとりあえずなってくれるのですが、センタリングが正しくならなくなります。

このdisplay属性を inline-blockにすると、簡単にレスポンシブルな広告になってくれます。

 
HTMLソースはこんな感じになります。

<div style="width: 100%; text-align: center;">
<div style="display: inline-block; box-sizing: border-box; width: 300px; height: 250px; background-color: #ff0000;"><span style="color: #ffffff;">広告1</span></div>
<div style="display: inline-block; box-sizing: border-box; width: 300px; height: 250px; background-color: #0000ff;"><span style="color: #ffffff;">広告2</span></div>
</div>

displayプロパティ、box-sizingプロパティ

displayプロパティにinline-blockを使うことで、ブラウザの幅に対してボックスを均等に配置してくれるようになります。レスポンシブルに対応するにはフィットするプロパティ値です。

displayプロパティの値

値	実際の表示
block	block block
inline	inline inline
inline-block	inline-block inline-block
none

その他に、box-sizingプロパティにborder-boxを使うことで、ボックス要素の幅と高さにpaddingとborderを含めるようになります。既定値のcontent-boxは含めないことになります。

CSS3から登場したプロパティですがborder-boxにすると横幅の設定に%（パーセント）とpxなどが使われた場合に、中央揃えなどのプロパティを後から設定した場合にborderの太さが%で設定できないため、どうしてもレイアウトが正しく表示されないようになります。

box-sizingプロパティにborder-boxを使うことで、borderが含まれるようになるので細かな計算をしなくても良くなります。

スポンサーリンク

最後までご覧いただき、ありがとうございます。