スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ HTML&CSS講座 ＞ 最適な広告の掲載位置

最適な広告の掲載位置

投稿日：2006年10月24日　　　レベル：初心者　　　　ソフトウェア：DreamWeaver


広告を配置する、最適な位置はページからページへの中で変わってきますし、あなた自身のページレイアウトにも依ります。しかし、共通して言える事は、訪問者が最初に目に付く場所に配置するのが普通でしょう。この理由から、広告に最適な位置が存在するのです。

CSSを用いたレイアウトを使用しているなら、テーブルは使わないことになります。その場合、どうやって広告を特定の位置に配置したらよいのでしょうか？ここでは、広告を特定の場所に設置する方法を勉強しましょう！


Step1 − 800(幅)×140(高さ)のヘッダー

800(幅)×140(高さ)ピクセルのヘッダーがあるとします。 (下のイメージは実際の大きさではありません)
800x140のヘッダー


Step2 − headerに配置しCSSを指定

これをheaderに配置し、背景イメージとします。CSSは次のようになります。

#header { height: 140px; width: 800px; background-image: url(images/header.gif); position: relative; }

XHTMLは次のようになると思います。

<div id="header"></div>


Step3 − 広告を配置

ここで234×60ピクセルの広告を配置していきます。これをヘッダーの左下に配置するとします。端が重なるのは嫌なので、左下に少し間を空けて配置します。
広告の配置


Step4 − XHTMLに

広告をadに配置します。CSSは次のようになります。

#ad { height: 60px; width: 234px; position: absolute; left: 10px; bottom: 10px; }

XHTMLは次のようになります。

<div id="ad"></div>

adをheader内に配置してひとまとめにします。

<div id="header"> <div id="ad"></div> </div>

これはどのようなCSSの詳しい観点からどのような意味になるかというと

#header { height: 140px; width: 800px; background-image: url(images/header.gif); position: relative; } #ad { height: 60px; width: 234px; position: absolute; left: 10px; bottom: 10px; }

となります。広告の位置はヘッダーの位置に対して決定されています。これは、ヘッダーの位置がどこに動こうが、そのヘッダーに対しては常に同じ場所に位置することを意味しています。

ヘッダーは800×140ですから、幅は0から800、高さは0から140までとなります。

つまり、広告はこれに対して、左から10ピクセル、下から10ピクセルの所に配置されるのです！！

メモ:位置は左、下、右、上のどこからでも決定できます。もし左上に配置したければ、top: 10px、left: 10pxとなります。

是非、このテクニックを使ってみてください！

引用:Web Design Library 著者:Jacorre.com翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング