広告や画像を横並び（画面幅が狭い時は縦並び）で中央に配置する方法

2016-05-042017-08-11Web制作

こんにちは、とみーです。

ブロガーの中では記事下の広告を横並びにすると収益がアップするという話で、わたしも実践してはいるのですが効果のほどはよくわかりません。人が少ないからそもそも広告がクリックされないという・・・。

その横並びをするにはCSSで指定するのですが、とあるワードで検索すると最初に出てくるページがテーブルタグを使う方法を紹介している始末。それ、よろしくないよ・・・！

テーブルタグをレイアウトに使うのは本来の目的から外れているので避けたいのです。WEB界の常識。
シンプルなタグで使いやすいのですが、表機能として使うのが一般的です。

んで、単純な横並びならすぐ他の方法が見つかるのですが、横並びでも縦並びでも中央に配置するという方法がなかなか見つからなかったので、備忘録として残しておきます。

広告はもちろんブログランキングのバナー等で使えます。

Contents

1. 画面幅によって横並び・縦並びを自動的に切り替えて中央揃えする方法
2. あとがき

画面幅によって横並び・縦並びを自動的に切り替えて中央揃えする方法

スクリーンショット

画面幅が広いとき

画面幅が狭いとき

HTMLのみの場合

HTML

<div style="margin:auto; text-align:center; width:100%;">
	スポンサーリンク<br/>
	<div style="display:inline-block; padding:10px;">
		左側広告
	</div><div style="display:inline-block; padding:10px;">
		右側広告
	</div>
</div>

HTMLとCSSに分ける場合

HTML

<div id="double-rectangle">
	スポンサーリンク<br/>
	<div id="left-rectangle">
		左側広告
	</div><div id="right-rectangle">
		右側広告
	</div>
</div>

CSS

div#double-rectangle {
	margin: auto;
	text-align: center;
	width: 100%;
}
div#left-rectangle {
	display: inline-block;
	padding: 10px;
}
div#right-rectangle {
	display: inline-block;
	padding: 10px;
}