締切済み

画像上にリンクとインラインフレームを同時作成

2011/07/03 03:36

大きな画像一枚でHPを作成したい場合、画像上にリンクを貼るのと、画像にインラインフレームを同時に作成するのは可能でしょうか？添付した画像をご覧いただければわかってもらえると思いますが、個々のLiveやら、Discographyやらにリンクを貼るだけなら私でも可能なんですが、それプラスNewsと書いてあるところの下段の空白にインラインフレーム等で、お知らせをスクロールできるように表示したいのです。これらを同時にHTMLで作成するのは可能でしょうか？その空白内にスクロールできてHTMLも使えるようなボックスでしたらインラインフレームでなくてもよいです。可能でしたらお手数ですがやり方をご教授ください…お願いします！

seina8655
お礼率0% (0/10)

HTML
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

みんなの回答

naokita
ベストアンサー率57% (1008/1745)

2011/07/03 19:18 回答No.5

＞画像にインラインフレームを同時に作成するのは可能でしょうか？ ----- 可能。好きなように出来ます。ただ、ページ内の情報をiframeで疑似情報とするのは良くない。更新効率を上げる為にインクルードさせたいなら別の話。ピッタリ設計して、floatで流し込んだ方が良いかも。 ※ 元の背景画像：1000×614程度の例： ----- <!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>floatサンプル</title> <style type="text/css"> </style> </head> <body> <div id="wrap"> <div id="head"><h1>見出しを設定</h1></div> <div id="article"> <h2>NEWS</h2> <div> <dl> <dt>2011/7/3</dt><dd>前回答者さんのように方法は多々ありますが・・・</dd> <dt>リンク＆カンプ</dt> <dd><p>クリッカブルマップかCSSで。<br> この例は、floatですが当然、floatでなくとも可能。</p> <p>特大背景はあまりお勧めしない。<br> 動物画像は綺麗に、奥の黄色の背景は多少ボケても良いと思うから、背景画像と例の動物画像を分離して、動物画像を背景透過.gif化し、各リストの個別背景にした方が良いと思う。<br>この時、フォント画像がベタ塗りフォントなら、画像ではなくテキストアンカーの方が良い。この辺は「可能」との事なので蛇足でしたか・・・</p></dd> <dt>情報ボックス</dt> <dd><p>情報ボックスは商用サイトで良く利用されますが、<br> 質問者さんの情報ボックスの背景画像は、元の背景画像と一体化しているようなので、元の背景画像をスライスして薄色加工してここに配置するか、網目.gifで疑似透過か、半透明.pngを使うか、opacityの選択肢ですね。</p></dd> <dt>その他、</dt> <dd><p>DTD標準準拠モード必須！<br>各width,heightの値をしっかり計算し設計する事です。</p></dd> </dl> </div> </div> <ul id="nav"> <li><a href="">Live</a></li><li><a href="">Discography</a></li> <li><a href="">Twitter</a></li><li><a href="">Blog</a></li> <li><a href="">Mail</a></li><li><a href="">Photo</a></li><li><a href="">Biography</a></li><li><a href="">Link</a></li> </ul> <div id="footer"><p>Copyright © All rights reserved.</p></div> </div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/03 15:54 回答No.4

absoluteで配置するCSS。 HTMLさえ、正しくマークアップされていたら、横並び＆たて並びナビゲーションバーであろうが、マウスオーバーでウィンドウの画像切り替えだろうが、自由にデザインできます。 body,html{ ＿＿margin:0;padding:0; ＿＿background-color:black;color:white; } div.header h1{text-align:center;} p{text-indent:1em;margin:0.5ex 0.5em;} div.nav{ ＿＿display:block;position:relative; ＿＿width:400px;height:300px;margin:0 auto; ＿＿border: red 1px solid; ＿＿background:url(./images/ul_back.jpg) gray no-repeat 0 0; } hr{clear:both;visibility:hidden;} div.nav div.article{ ＿＿overflow:auto; ＿＿position:absolute;top:0;right:0; ＿＿font-size:0.9em; ＿＿width:180px;height:180px; ＿＿border:ridge 6px gray; ＿＿padding:2px 5px; ＿＿background-color:white; ＿＿color:black; } div.nav div.article h2{font-size:1.2em;} div.nav ul,div.nav ul li, div.nav ul li a{ ＿＿display:block;margin:0;padding:0; } div.nav ul{list-style:none;line-height:96px;font-size:1em;} div.nav ul li{width:90px;height:90px;position:absolute;top:4px;left:4px;border:solid 1px white;} div.nav ul li a{ ＿＿width:90px;height:90px;margin:auto; ＿＿text-decoration:none;text-align:center; ＿＿font-weight:bold;color:yellow; ＿＿background:url(./images/ul_back.jpg); ＿＿background-position:-7px -7px; ＿＿border:outset 1px gray; } div.nav ul li+li{left:100px;} div.nav ul li+li+li{top:100px;left:4px;} div.nav ul li+li+li+li{left:100px;} div.nav ul li+li+li+li+li{top:200px;left:4px;} div.nav ul li+li+li+li+li+li{left:100px;} div.nav ul li+li+li+li+li+li+li{left:200px;} div.nav ul li+li+li+li+li+li+li+li{left:300px;} div.nav ul li+li a{background-position:-103px -7px;} div.nav ul li+li+li a{background-position: -7px -103px;} div.nav ul li+li+li+li a{background-position:-103px -103px} div.nav ul li+li+li+li+li a{background-position:-7px -203px} div.nav ul li+li+li+li+li+li a{background-position:-103px -203px} div.nav ul li+li+li+li+li+li+li a{background-position:-203px -203px} div.nav ul li+li+li+li+li+li+li+li a{background-position:-303px -203px} div.nav ul li a:visited{color:maroon;} div.nav ul li a:hover, div.nav ul li a:focus{color:lime;background-image:none;} div.nav ul li a:active{color:fuchsia;border-style:inset;}

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/03 11:34 回答No.3

ちょっとだけ、時間が取れたので・・ ★回答者の責任としてウェブ標準としてあります。　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 ※あくまで例です。liはabsoluteで配置してもよいでしょう。　その場合、背景画像をhover時に少しずらすとか面白い。 ※印刷や携帯電話などは率直にスタイルシートなしで利用されます。もちろん検索エンジンも・・他の端末は印刷プレビューで確認できます。 ※HTML,CSSの詳細はそれぞれの仕様書を確認してください。まあ、わかりやすく書いてあるので難しくはないでしょう。　HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) 　REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.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> ＿＿</div> ＿＿<div class="nav"> ＿＿＿＿<div class="article"> ＿＿＿＿＿＿<h2>メッセージ</h2> ＿＿＿＿＿＿<p>これはサンプルです。</p> ＿＿＿＿＿＿<p> ＿＿＿＿＿＿＿＿特別な裏技も使ってありません(シンプルイズザベスト)。HTML4.01strictですから、簡単にXHTML1.0strict, XHTML1.1、HTML5, XHTML5に変更できるでしょう。＿＿＿＿＿＿</p> ＿＿＿＿＿＿<p> ＿＿＿＿＿＿＿＿長い文章が入るとスライダーが現れます。画像を含めてHTMLのタグを入れることができますから、リストだろうがテーブルだろうが・・＿＿＿＿＿＿</p> ＿＿＿＿</div> ＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="./live/">Live</a></li> ＿＿＿＿＿＿<li><a href="./disco/">Discography</a></li> ＿＿＿＿＿＿<li><a href="./twitter/">Twitter</a></li> ＿＿＿＿＿＿<li><a href="./brog/">Brog</a></li> ＿＿＿＿＿＿<li><a href="./mail/">Mail</a></li> ＿＿＿＿＿＿<li><a href="./photo/">Photo</a></li> ＿＿＿＿＿＿<li><a href="./bio/">Biography</a></li> ＿＿＿＿＿＿<li><a href="./link/">Link</a></li> ＿＿＿＿</ul> ＿＿＿＿<hr> ＿＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/03 08:27 回答No.2

いくつか方法があります。配置) 　tableで画像を配置する。　imagemapを使う。　スタイルシートで行う。メッセージ) 　textareaをつかう　iframeをつかう　スタイルシートをつかう　良くない方法から並べてあります。　ウェブ標準なら、一番下の方法です。すなわたち、HTMLを文書構造にしたがってきちんとマークアップして、スタイルシートでプレゼンテーションをします。マークアップは、単純に <div class="nav"> 　<div class="article"> 　　<h2>メッセージ</h2> 　　<p>・・・・</p> 　　<p>・・・・</p> 　</div> 　<ul> 　　<li><a href="">Live</a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　</ol> </div> ・・これで、検索エンジンを含めて、すべてのユーザーエージェントに最適なマークアップができました。・文書構造にしたがってマークアップする・文書の内容に関係しない画像は背景とする。・iframeなど、非推奨要素は使わない div.nav{ display:block;width:400px;height:300px;position:relative; background:url() green no-repeat; } div.nav article{ } div.nav ul,div.nav ul li,div.nav ul li a{display:block;} div.nav ul{list-style:none;} div.nav ul li{width:;height:;float:left;} div.nav ul li a{width:100%;height:100%;} とか・・・携帯電話や狭いディスプレイ、印刷用には必要なら別途スタイルシートを用意しましょう。