ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&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件

2016年5月の人気記事ランキング