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

解決済

質問者：self_reliance
質問日時：2014/06/02 15:21
回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/06/02 18:02

極々簡単な例を

両サイドの広告などは本文と関係ないのでasideでマークアップされていると思います。
・HTML4.01/XHTML1.0/XHTML1.1でしたら
　<div class="aside"></div>
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
・HTML5なら
　<aside></aside>
　「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」

よってaside(関係ない)でマークアップされている要素を両サイドに回せばよいだけです。
以下では、広告欄に160pxずつ確保したいとします。スマホのような狭いウィンドウから幅広まで対応してますが、スマホだけmediaquery使って下に回してもよい。
　HTMLには文書しか書いてないので好きなようにデザインできる。御随意に!
　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

★前半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">

＿</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">

＿</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>