single.php

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

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

スポンサーリンク

同じ広告の横並び

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

広告1
広告2
 

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

<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>

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

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

広告1
広告2

 
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が含まれるようになるので細かな計算をしなくても良くなります。

スポンサーリンク

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です