• ベストアンサー

HPの外側の両サイドにある広告の制作方法について

最近ショッピングサイトやYahooなどのHPの外側の両サイドにそって縦長の写真や広告が張られてあるのを見るようになりましたが、あれはどのようにして作られているのでしょうか？ 簡単に考えると背景画像にHPの幅のピクセル分、空けた両サイドのところに広告の画像をそのまま貼り付けて1枚の画像にしているように見えるのですが、も し普通にフォトショップを使えるレベルで可能であるなら自分のサイトにも使ってみようかと考えています。制作方法をご存知の方がおられましたら教えていた だければと思います。すみませんがよろしくお願いいたします。

  • CSS
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

極々簡単な例を 両サイドの広告などは本文と関係ないのでasideでマークアップされていると思います。 ・HTML4.01/XHTML1.0/XHTML1.1でしたら 　<div class="aside"></div> 　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ・HTML5なら 　<aside></aside> 　「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」 よってaside(関係ない)でマークアップされている要素を両サイドに回せばよいだけです。 以下では、広告欄に160pxずつ確保したいとします。スマホのような狭いウィンドウから幅広まで対応してますが、スマホだけmediaquery使って下に回してもよい。 　HTMLには文書しか書いてないので好きなようにデザインできる。御随意に! 　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ★前半HTML4.01,後半HTML5 + CSS2.1 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　で検証済み ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:100%;min-width:470px;max-width:1000px;margin:0 auto;padding:5px;} div.section{position:relative;min-height:400px;} div.section div.section,div.section h2,div.section p{width:auto;padding:0 170px;min-height:0;min-width:0;} div.section div.section p{padding:0;} div.section div.aside div{position:absolute;top:0;width:160px;left:0;height:100%;font-size:0.8em;} div.section div.aside div+div{right:0;left:auto;} body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.aside div{background-color:lime;} div.aside div div{background-color:fuchsia} div.footer{background-color:silver} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文</p> ＿＿<div class="section"> ＿＿＿<h3>詳細記事</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<div> ＿＿＿＿<h3>自サイト</h3> ＿＿＿</div> ＿＿＿<div> ＿＿＿＿<h3>他サイト</h3> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html> <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA1951"> <style media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} header,section,footer{width:100%;min-width:470px;max-width:1000px;margin:0 auto;padding:5px;} section{position:relative;min-height:400px;} section section,section h2,section p{width:auto;padding:0 170px;min-height:0;min-width:0;} section section p{padding:0;} section aside div{position:absolute;top:0;width:160px;left:0;height:100%;font-size:0.8em;} section aside div+div{right:0;left:auto;} body{background-color:gray;} header{background-color:aqua;} section{background-color:white;} aside div{background-color:lime;} aside div div{background-color:fuchsia} footer{background-color:silver} --> ＿</style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<p>本文</p> ＿＿<section> ＿＿＿<h3>詳細記事</h3> ＿＿＿<p>記事</p> ＿＿</section> ＿＿<aside> ＿＿＿<div> ＿＿＿＿<h3>自サイト</h3> ＿＿＿</div> ＿＿＿<div> ＿＿＿＿<h3>他サイト</h3> ＿＿＿</div> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</footer> </body> </html>

self_reliance
質問者

お礼

詳しい説明ありがとうございました。自分はまだレベルが低いのでどこまで応用できるか自信はありませんが、できるだけ活かせるように頑張ってみようと思います。ありがとうございました。

その他の回答 (1)

  • nitto3
  • ベストアンサー率21% (2656/12205)
回答No.2

ユーザー側が自動で設定するのはむつかしいですが、 自分でやるなら、簡単にできます。 フレーム設定が基本ですが、 単に<TABLE>でもできます。

self_reliance
質問者

お礼

お返事が遅くなってすみませんでした。TABLEで可能ということで、その辺りを調べていって参考にしてみたいと思います。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する