tableタグを使わずにGoogleアドセンスを左右に並べる方法

CSSでレイアウトを決める 

みなさん、こんにちは！

B-CHANです。

ブログを書いていると、色々と発見があるんですが、簡単そうで初心者には意外と難しいこともあったりして、勉強の日々です。

今回は、ブログで、2つのモノを左右に並べる方法について書きます。

例えば、アドセンスのバナーを左右に並べたり。

ウェブサイトはHTMLという言語で書かれているわけですが、昔と今とではHTMLの位置付けが変わっています。

というか昔がめちゃくちゃで、今は正しい位置付けになっています。

正しい位置付けとは、

HTMLは文章の論理構造を決めるモノ

ですね。

昔はHTMLで論理構造だけで無く、文字の大きさや色やレイアウトなどの装飾も行っていました。

今はそういう見た目の定義はCSSにお任せです。

HTMLはあくまでも論理構造、つまり、見出しや本文、箇条書き、引用などの定義を行うだけです。

こうすることでHTMLがシンプルになり、SEO対策としても有効だと言われています。

ところが今回、従来はHTMLでやっていたことをCSSでやる必要が出てきたので、ちょっと困ったことが起こりました。

それが、アドセンスのバナーを左右にならべることでした。

文書は基本的には上から下に流れるモノなので、HTMLを書くだけではバナーも上から下に順番に表示されます。

それを自在に並べるために、従来は、tableタグを使っていました。

例えば、

<table>

<tr>

<td>あいうえお</td><td></td>

</tr>

<tr>

<td></td><td>かきくけこ</td>

</tr>

</table>

と書けば、

あいうえお
	かきくけこ

なんてことが簡単にできるんですよね。

バナーもtableタグを使えば自由に並べられます。

でも、HTMLは文書の論理構造を決めるモノであってレイアウトを決めるモノでは無いです。

そこで何とかしてtableタグを使わずにバナーを左右に並べる必要があります。

そのために使うのが、CSSのfloatプロパティです。

floatプロパティを使うと要素を左寄せ、もしくは右寄せできます。

そして、左右に寄った要素の次の要素は、反対側に回り込みます。

例えば、まず普通に、divタグを2個使うと次のとおり。縦に並びます。

<div style="width:200px; height:200px; background-color:#ffcccc; "></div>

<div style="width:200px; height:200px; background-color:#ccccff; "></div>

 

 

次に、divタグにfloat:leftとfloat:rightを使ってみます。

ひとつ目のdivタグには、float:leftを使って左寄せ、ふたつ目のdivタグには、float:rightを使って右寄せします。

<div style="width:200px; height:200px;background-color:#ffcccc; float:left; "></div>

<div style="width:200px; height:200px;background-color:#ccccff; float:right; "></div>

<div style="clear:both;"></div>

 

 

 

ご覧のとおり、左右に分かれました。

終わったら、clear:bothを入れることで、左右寄せ状態を解除して通常に戻します。

このdivタグにアドセンスのコードを挟めば、アドセンスのバナーを左右に並べることができます。

アドセンスのサイズに合わせて、divタグ内のwidth（幅）とheight（高さ）を変えましょう。

ちなみに両端から距離を取りたい場合は、marginを使いましょう。

次のような感じです。

<div style="width:200px; height:200px;background-color:#ffcccc; float:left; margin-left:64px;"></div>

<div style="width:200px; height:200px;background-color:#ccccff; float:right; margin-right:64px;"></div>

<div style="clear:both;"></div>

 

 

 

当然ですが、ページの幅が足りなければ左右に並べることはできません。

並べる場合はページの幅を調節するか、並べられる大きさのバナーを選ぶようにしましょう。

以上、初心者の方、参考になりましたか？

 

floatを使わずにtable-cellを使う方法もありますが、それはまた気が向いたら書きます。

ボクは今のところ、floatを使っています。簡単ですしね。

 

関連記事

ブログの重複するメタデータはSEOに悪影響なので、こうやって解決する - 非天マザー by B-CHAN

初心者必読。SEO対策に重要。はてなブログで構造化データをGoogleに認識してもらう方法 - 非天マザー by B-CHAN

Google AdSense（アドセンス）を使うすべての人へ推奨の設定 - 非天マザー by B-CHAN

Google AdSense（アドセンス）の基本用語と意味を覚えよう - 非天マザー by B-CHAN

SEOの効果で検索流入が急拡大！この数週間にボクがブログで行ったSEO対策を公開します。 - 非天マザー by B-CHAN