- ベストアンサー
HPの外側の両サイドにある広告の制作方法について
最近ショッピングサイトやYahooなどのHPの外側の両サイドにそって縦長の写真や広告が張られてあるのを見るようになりましたが、あれはどのようにして作られているのでしょうか？ 簡単に考えると背景画像にHPの幅のピクセル分、空けた両サイドのところに広告の画像をそのまま貼り付けて1枚の画像にしているように見えるのですが、も し普通にフォトショップを使えるレベルで可能であるなら自分のサイトにも使ってみようかと考えています。制作方法をご存知の方がおられましたら教えていた だければと思います。すみませんがよろしくお願いいたします。
- self_reliance
- お礼率80% (4/5)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
極々簡単な例を 両サイドの広告などは本文と関係ないので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>
その他の回答 (1)
- nitto3
- ベストアンサー率21% (2656/12205)
ユーザー側が自動で設定するのはむつかしいですが、 自分でやるなら、簡単にできます。 フレーム設定が基本ですが、 単に<TABLE>でもできます。
お礼
お返事が遅くなってすみませんでした。TABLEで可能ということで、その辺りを調べていって参考にしてみたいと思います。ありがとうございました。
関連するQ&A
- 広告制作ディレクター
広告の制作ディレクターに興味があるのですが、広告デザイナーとどう違うのでしょうか？ディレクターはイラレやフォトショップなど、パソコンに詳しくなくてもなれるそうですが、どんな仕事をするのでしょうか？営業のような仕事でしょうか？私は制作をやりたいのですが、(どういう写真をとってどんなコピーにしてなどを企画したり、実際に撮影したりすること)イラレなどを勉強しないとなれないのでしょうか？詳しい方教えてください
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
- デザイン的なHP制作
こんばんわ。 ひとつ質問させてください。 現在HP制作で行き詰っています。 それはデザイン的で、本格的なHP制作がしたいのです。 そして、このようなHPを作りたいという目標HPがあります。 では具体的なデザインといいますと、ずばり、芸能人の方々がお持ちのHPですが、本人の名前を挙げてもよいのかどうか…。 歌姫H.Aさんのような、フレームが縦に３つわかれていて、その真ん中のフレームに縦型に伸びたデザインで、リンクのボタンなどもデザインされているようなものです。 たとえばその日本の歌姫H.AさんのHPの「骨組み」などは、どのソフトで作られているのでしょうか… 画像などは、イラストレーターやフォトショップで加工し、動く絵はフラッシュだろうという予測はついているのですが…。 ちなみに、HP制作はビルダー6.5とタグ打ち（メモ帳）などは知っていて、基本的な骨組みも出来ます。CSSも少し分かります。 デザイン的なHＰの骨組みを作るソフト名などを教えてください。 お願いします！ 現在仕えるソフト イラストレーター フォトショップ ビルダー 直接のタグ打ち フラッシュ（リンクを飛ばすなどの基本的なアクションスクリプトは分かります） どうかお願いします。 ソフトが分かればあとは、自分で本を買って勉強しますので。 手助けをしていただけないでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- HP制作会社
HP制作会社を起業するにはイラストレイターやフォトショップなどのWebデザイン以外に何を勉強すれば良いのでしょうか？ショッピングカートやフォームメールはレンタルでいいと言われる方、やっぱりCGIを自分で勉強するべきという方、また業者に任してやってもらうのがいいと言われる方、色々な意見がありますが実際、プロでやっている方々はどのようにやっているのでしょうか？またその際の、良い点・悪い点等アドバイスありましたら教えて頂けないでしょうか？
- ベストアンサー
- インターネットビジネス
- Dreamweaver8でＨＰ制作しましたが上手く印刷できません。
Dreamweaver8でホームページを制作しています。 幅は750ピクセルで、ブロック分けをし、ヘッダー高さ300ピクセル、コンテンツ高さ1000ピクセル、フッター高さ200ピクセル程度です。 このページをＡ４印刷したところ、（両サイドはきちんと表示されます） ＩＥでは、１枚目にヘッダー部分のみが印刷され、半分くらい空白、２枚目にコンテンツ部分が印刷されました。 firefoxでは、１枚目にヘッダー、コンテンツと印刷されましたが、それを超える部分については印刷されませんでした。（プレビューで見ても、コンテンツが、用紙をオーバーしたようになっています） ブラウザでは、どちらもちゃんと表示されます。 ただ、ソースは、スタイルシートのリンク部分がすべてのブラウザでエラーになっています。（なぜエラーなのか分かりません） 他のＨＰを拝見すると、ちゃんと表示のように、印刷プレビューが表示されるものもありましたが、firefox等に未対応ページでは、同様のプレビュー画面になるところもありました。 会社のＨＰを作っており、大変困っています。 よろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- イラストレーターのみでHP制作
今はイラストレーター8.0とフォトショップ6.0を使って、Golive5.0でHP制作をしています。正直、ツール使用から入ったため、基本知識がまだ乏しいです。 事務所側より、いくつもソフトを使ってするのが煩わしいらしく、今後、イラストレーターCS2でデザインしたものをそのまま一括で変換していくようにしたいと言われました。 こういった制作の仕方はどうなのでしょうか？ ソフト自体も使って試しているのですが、CS2の機能になれないせい、WEBの知識も乏しいため、リンクや共通画像、ロールアップボタン、カウンターなど、どうしたらいいのかさっぱりです。 イラストレーターCS2のみでサイトは作れるのでしょうか？ また、その場合、詳しい参考書などを教えていただけると嬉しいです。
- 締切済み
- グラフィックソフト
- HP制作に関して
これからHP制作の勉強をしようと思っています。 そこで知識がない為わからないのですが、イラストレーターとフォトショップはならっておいた方がいいのでしょうか？どの程度自分がやりたいのかにもよると思いますが、一旦そこははずしておしえていただきたいと思います。知人は「別にいらないんじゃない？」といいますが、みなさん結構勉強されているみたいですし、あまりどういった意味をもって使用するソフトなのかもわからないので、迷っています。 経験者の方のご意見を聞かせてください！お願いします。
- ベストアンサー
- その他(ソフトウェア)
- 画像の半透明化
いつもお世話になります。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=234262 これに関係していることなのですが、この時のご回答では 「フォトショップのレイヤーの背景をHPの背景色と同じにする」 で、解決したみたいですが 質問：スタイルシートとかの設定でできますか？ 具体的に述べますと 幅500pixels 高さ454pixelsの画像があり 中心から半径200pixelsはちゃんと画像を表示する（つまり透明化は0） それから外側は徐々にグラデーションの半透明化で、背景画像（もしくは背景色）になじませる ちょっとわかりにくい説明かもしれませんが、 こんなことできますか？ ちなみにここのサイトも参考にしています。 http://tohoho.wakusei.ne.jp/css/reference.htm#FilterAlpha よろしくお願いします。 OS Win98SE IE 5.5 フォトショップ 5.5
- 締切済み
- HTML
- 携帯ＨＰへの写真アップロードファイルサイズ
お尋ねします。フォトショップ5.0です。 検索サイトのエキサイトで、携帯ＨＰを作っています。 画像のアップローでですが、 「推奨サイズは5000バイト(5Kバイト)、横94×縦100ピクセル程度を目安」と書かれています。 ところが、写真をフォトショップで、5Kにすると写真自体が小さくなりすぎてしまい、 横94×縦100ピクセルにすると5Kバイトを越えてしまいます。 どう、ファイルサイズを調整するのでしょうか？ 宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- HP制作での質問です。
HP制作に関しての質問です。 全体の背景色を単色指定し、横センターに画像を配置したいと思っています。 横幅サイズの指定はしていないのですが、windowを横にのばした時に画像が常にセンター表示されるようにするにはどうしたらよいでしょう？
- 締切済み
- CSS
- マックでバナーを制作する方法を教えていただけませんか？
マックでバナーを制作する方法を教えていただけませんか？ 初心者です。 バナーを作成しなくてはいけないのですが、作り方がわかりません。 写真画像の上にロゴマークをいれたいのです。 無料のバナー作成サイトなどを見ると画像を指定してその上に文字をいれるものが多いようなのですが、文字を打ち込むのではなくロゴマークをいれたいのですがそれができる無料のサイトなどありますでしょうか？ マックはOS X、イラレフォトショップはCS 3です。 フォトショップで写真画像の上にロゴマークを入れてなんとかGIFで保存をしたのですが、全く見えないくらい画像が荒くなってしまいました。 ご指導いただければ大変助かります。 よろしくお願いします。
- ベストアンサー
- グラフィックソフト
お礼
詳しい説明ありがとうございました。自分はまだレベルが低いのでどこまで応用できるか自信はありませんが、できるだけ活かせるように頑張ってみようと思います。ありがとうございました。