- ベストアンサー
html5で画像が好きなところにはれません
html5で画像が好きなところにはれません ワイド ハイトはで左づめになるのはできるのですが 問題のタグ <body> <img src="画像url" usemap="#画像url"> <map name="画像url"> <area shape="rect" coords="0,0,500,500" href="画像" alt="画像"> </map> </body>
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
あせりすぎです。 まず、わかりやすいHTML4.01strictを徹底的に身につけましょう。HTML4.01では基本的にブロック要素と行内要素しかありませんが、HTML5では メタデータ・コンテンツ フロー・コンテンツ セクショニング・コンテンツ ヘッディング・コンテンツ フレージング・コンテンツ エンベッディッド・コンテンツ インタラクティブ・コンテンツ と分けて考えます。それぞれがどのコンテンツに含まれるかがきちんと決まっています。 HTML4.01でも <body> <img src="画像url" usemap="#画像url"> <map name="画像url"> <area shape="rect" coords="0,0,500,500" href="画像" alt="画像"> </map> </body> この様な書き方は認められていません。 IMG要素は行内要素ですから、bodyには含むことができません。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> と書かれています(7.5.1 BODY要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) これは、 BLOCKは、要素であり、開始タグも終了タグも省略できる(0 0)が、ブロック要素%blockとスクリプト(script)をひとつ以上(+) INSとDEL要素を含むことができる--文書の本文を示す と読みます。 MAP要素については、 →13.6.1 クライアント側イメージマップ: MAP要素とAREA要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-MAP ) を参照。 ブロック要素には、 P %heading; h1～h6 、%list; ul,ol 、%preformatted 、DL 、 DIV 、NOSCRIPT 、BLOCKQUOTE 、FORM 、HR 、TABLE 、FIELDSET ADDRESS 要素があります。 よって、HTML5であっても最低限・・ <body> <p><img src="画像url" usemap="#画像url"></p> <p> <map name="画像url"> <area shape="rect" coords="0,0,500,500" href="画像" alt="画像"> </map> </p> </body> でなければなりません。 その後、それぞれのブロック要素について配置をしていきます。スタイルシートで行内要素とブロック要素は変更できますが、そのためにはHTMLをちゃんと書いておかなければなりません。 ★HTML4.01strictを身につけていれば、HTML5だろうと HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) を読むだけで理解できるでしょう。 いずれにしてもHTMLは文書構造をマークアップするもので、プレゼンテーション--デザインのためのものではありません。そのもっとも基本的な部分を、しっかりおさらいをしてください。それからでも遅くない---というか、そのほうがはるかに早く上達できるでしょう。 注) HTML4.01にも色々ありますが、あくまでここで言うものはHTML4.01strictです。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 とにかくHTML4.01strictをしっかり身につけること。書いたらvaidatorでチェックしては指摘されたところを直す・・その繰り返しです。 ★Another HTML Lint ( http://www.htmllint.net/ ) でHTML4.01strictで作成チェックすること・・・ 下記サンプルはHTML5+CSS3ですが、未対応のブラウザが多いので現状はHTML4.01で作成する必要があります。そのときは、HTML5の新しい要素はdivにclass名をつけます。 <header>→<div class="header"> [例] タブは＿に置換してありますから戻すこと。 <!doctype html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- section figure{position:relative;} section>figure.main img{ ＿display:block; ＿width:40%; ＿height:auto; ＿margin:0 auto; ＿border-radius:20px; ＿box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); } --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文見出し</h2> ＿＿<p>画像を横幅の40%幅(縦横比変更なし)で中央に角丸影つきで配置する。</p> ＿＿<figure class="main"> ＿＿＿<img src="[url]" width="480" height="360" alt=""> ＿＿</figure> ＿</section> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
関連するQ&A
- 吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>
- ベストアンサー
- JavaScript
- map初心者です
名前の付け方がわかりません。 なんでもいいのでしょうか？とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map"> <area shape="rect" coords="220,148,179,200" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="358,125,181,126" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="167,336,178,141" href="="http://12345" alt="**" target="_blank"> <area shape="rect" coords="178,338,180,214" href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。
- ベストアンサー
- HTML
- mapが機能しない
以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか？ <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>
- ベストアンサー
- HTML
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 JavaScriptで制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>
- ベストアンサー
- JavaScript
- 画像に複数リンクをはる方法（イメージマップ）
画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前はinです。 ついでに、リンクをクリックした瞬間に出る点線の消し方もわかる方がいたら教えてください。 よろしくお願いします。 タグ（html内）↓ <body> <img src="http:～" usemap="mn"> </body> <map name="mn"> <area shape="rect" coords="298,298,355,262" href="http:～l"target="in"> <area shape="rect" coords="298,276,319,285" href="http:～"target="in"> <area shape="rect" coords="324,273,362,288" href="～html" target="in"> <area shape="rect" coords="367,276,399,286" href="～html" target="in"> </map>
- 締切済み
- HTML
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- background-imageが表示されない
ヘッダーの部分の背景画像が表示されません。 ＣＳＳ #header { height: auto; display:block; margin:0px;padding:0px;width:100%; background-image: url(../images/mainback.png); } ＨＴＭＬ <div id="header"> <div><img src="images/topbar2.gif" alt="" usemap="#map2" border="0" /></div> <map name="map2"> <area href="s.html" alt=""shape="rect"coords="394,57,495,68" /> <area href="t.html" alt=""shape="rect"coords="510,57,605,68"/></map> <div><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> </div> 上記のようにヘッダー画像の下に背景画像をつけたいのですが、画像がある場合背景画像は重ならないんでしょうか？
- ベストアンサー
- HTML
- クリッカブル・マップのリンクが効かない
下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか？ 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>
- 締切済み
- XML
- クリッカブルマップがうまく使えません
<html> <head> </head> <body> <img src="New_Index.jpg" width="100%" height="100%" border=0 alt="toppage" usemap="#index" > <map name="index" > <area shape="rect" coords="367,447,667,500" href="http://www.tuat.ac.jp/~yacht" ALT=" sample"> </map> </body> </html> とやると、ブラウザの大きさが変わるたびに、クリックできる位置がかわってしまうんです・・。 常に一定の位置を指すには、座標を指定するしかないんでしょうか？
- 締切済み
- HTML
- ブラウザに対応させるには？
はじめまして 現在xoopsでホームページ作成してるんですけど ブロック配置を「中央ブロック中央」で設定し htmlでトップを作ってブラウザで確認したのですけどfirefoxでみたときにイメージマップで作ったリンクがリンクされてないのです。 一応、私もいろいろ思いつくことはやってみたのですけど・・・どうしても出来なかったので質問したしだいです。 これが問題のタグなんですが <table> <td align="center" width="" height=""> <img src="" width="" height="" border="" usemap="#Map"> <map name="Map"> <area shape="rect" coords="6,5,54,56" href=""> <area shape="rect" coords="71,6,121,55" href=""> <area shape="rect" coords="135,5,185,55" href=""> <area shape="rect" coords="198,5,248,54" href=""> </map> の部分がfirefoxではリンクされない状態で画像が表示した状態になるところです。 ご回答よろしくお願いします。
- 締切済み
- HTML
補足
私が買った本には<p>タグは一つしか書いていませんが 書いてみます 情報ありがとうございます