アプリ版：「スタンプのみでお礼する」機能のリリースについて

html5で画像が好きなところにはれません

解決済

  • 質問者：sorara78
  • 質問日時：
  • 回答数：1件

html5で画像が好きなところにはれません
ワイド　ハイトはで左づめになるのはできるのですが
問題のタグ
<body>
<img src="画像url" usemap="#画像url">
<map name="画像url">
<area shape="rect" coords="0,0,500,500"
href="画像" alt="画像">
</map>
</body>

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

あせりすぎです。


まず、わかりやすい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-html4 … )
　これは、
BLOCKは、要素であり、開始タグも終了タグも省略できる(0 0)が、ブロック要素%blockとスクリプト(script)をひとつ以上(+) INSとDEL要素を含むことができる--文書の本文を示す
　と読みます。

MAP要素については、
→13.6.1 クライアント側イメージマップ: MAP要素とAREA要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
を参照。
　ブロック要素には、
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/h … )
　を読むだけで理解できるでしょう。

　いずれにしてもHTMLは文書構造をマークアップするもので、プレゼンテーション--デザインのためのものではありません。そのもっとも基本的な部分を、しっかりおさらいをしてください。それからでも遅くない---というか、そのほうがはるかに早く上達できるでしょう。
注) HTML4.01にも色々ありますが、あくまでここで言うものはHTML4.01strictです。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

とにかく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>タグは一つしか書いていませんが
書いてみます
情報ありがとうございます

補足日時：2012/07/21 14:57
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報