- ベストアンサー
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>
補足
私が買った本には<p>タグは一つしか書いていませんが 書いてみます 情報ありがとうございます