- ベストアンサー
imgタグをそのまま使うことは正しいの？
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
<img>は空要素のインライン要素ですから、body内にそのまま置けません。 必ず仕様書を見ましょうね。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> --- 7.5.1 BODY要素 ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) ★BODYには、%block;(ブロック要素)とSCRIPT(スクリプト)が+(一つ以上) +および(INS|DEL)以外は入れられないと明記してある。 そして、 <!ELEMENT IMG - O EMPTY -- Embedded image --> 空要素であり、インライン要素です。 よって、body直下に置く場合は、必ずブロック要素内に置かなければなりません。たとえば<p></p>で括るとか・・・ ですから、 <body> <h1>見出しレベル１</h1> <img src=""???> は間違い、それも最も基本的な間違いです。 <body> <h1>見出しレベル1</h1> <p> <img> </p> と書かなければなりません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^ <p>は段落を示すブロック要素で内部にインライン要素以外は含むことが出来ません。</p>は省略できますが、XHTMLを考慮すると省略しないほうが望ましい。 <br>は強制改行 <!ELEMENT BR - O EMPTY -- forced 行区切り --> であって、段落区切りとはまったく異なります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから BR要素は、現在のテキスト行を強制的に区切る(終了させる)。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-BR )］より 行間を空けるために<p></p>を使い、そうでない場合は<br>を使うのは、基本的な誤りです。スタイルシートで段落間のスペースは調整しましょう。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから P要素は、1つの段落を表し、P要素自体を含め、ブロックレベル要素を内容とすることはできない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P )］より ★HTMLを学ぶとき、最初に学ぶのは、ブロック要素とインライン要素の違いです。その説明を端折っているサイトや本は捨ててしまいましょう。 とりあえず、こちらのサイトあたりで正しいHTMLの書き方を身につけましょう。 はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
その他の回答 (8)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.6 ORUKA1951です。 先の回答は訂正します。 DTD確認してみました。 確かに、Transitinalではエラーではないですね。・・すみませんでした。
- buntan_bun
- ベストアンサー率62% (32/51)
正しいかどうかは、採用している文書型によります。 次の文書型定義（DTD）に当たってみました。 DTDは、テキストエディタで開くことができます。 上はHTML4.01 Transitional、下はHTML4.01 Strict用のDTDです。 http://www.w3.org/TR/html4/loose.dtd http://www.w3.org/TR/html4/strict.dtd まず、Transitionalから。 body要素は次のように定義されています。 <!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body --> body要素は、flowが0回以上出現してよい、という意味です。 flowは次のように定義されています。 <!ENTITY % flow "%block; | %inline;"> ブロックとインラインのどちらかが出現しなければならない。 まとめると、body要素にはブロックとインラインのどちらかが出現してよい、という意味です。 したがって、<body><p><img></p></body>や<body><img></body>という書き方は、どちらもHTML4.01 Transitionalの仕様として正しい、ということになります。 次に、Strictです。 body要素は次のように定義されています。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> body要素は、ブロックかスクリプトが1回以上出現しなければならない、という意味です。 img要素はブロックでもスクリプトでもないので、<body><img></body>という書き方は、HTML4.01 Strictの仕様として間違い、ということになります。 また、<body><p><img></p></body>という書き方が、HTML4.01 Strictの仕様として正しい、ということになります。 （ブロックであれば、p要素でなくても構いません） なお、XHTML1.0の場合も同様の理由により、Transitionalであれば正しい、Strictであれば間違い、ということになります。 （提示されたソースを見ると、XHTMLっぽいですね） XHTML1.0のDTDは、次になります。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
規約違反に相当する可能性が在りますがちゃんと認識しなければ行けない事なので・・・ 検証１サイト http://validator.w3.org/ 検証２サイト http://openlab.ring.gr.jp/k16/htmllint/htmllint.html で以下のソースを検証して見ましょう。 <?xml version="1.0" encoding="Shift_JIS"?> ＃１ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=shift_jis" /> <meta http-equiv="content-style-Type" content="text/css" /> <meta name="check" content="確認" /> <meta name="keywords" content="check" /> <meta name="description" content="check" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="pragma" content="no-cache" /> <title>check</title> <link rev="made" href="mailto:yahoo@yahoo.co.jp" /> <link rel="next" href="index2.html" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <＃２>（開始） <img src="img.jpeg" alt="img" title="img" width="1" height="1" /> </＃２>（終了） </body> </html> 例ではXHTML 1.0として、＃１にはStrictとTransitionalのどちらかの記述を。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ＃２にはStrictの場合はブロックレベル要素を入れ（divやp等）、Transitionalの場合には入れないで省略。 （検証用に入れるのと入れないので作成。） ※StrictでもTransitionalでも入れたソースと入れないソースを作る。 コレを４つのファイルにして上記の検証で実行。 Strictの場合はブロックレベルの要素で囲まないとエラー。 Transitionalの場合はどちらでもエラーは確認されない。 仕様書を引用したり、仕様書を信望するのは構わないが、HTMLの仕様勧告してるw3cでTransitionalの場合ドチラでもエラーを返さないのは「構文」が正しい事を意味する。 検証１サイトよりも検証２サイトの方が厳格に構文チェックするのにも関わらず、エラーは一切無い。 拠ってimgはStrictの場合はブロックレベルで囲む。 Transitionalの場合はどちらでも構わない。 コレが現実的な回答です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
置いておこうかとは思ったのですが、やはり今後このスレッドを見られた方が間違わないように補足だけ <img>はinline要素なので、Strict(厳密型)もTransitional(移行型)も、body要素には入れられません。いずれもエラーになります。（が、ブラウザは、エラーを無視して表示するように定められています。） StrictとTransitionalの違いは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML 4.01移行型DTD。 これは、厳密型DTDのすべての要素・属性に加えて、推奨しない要素や属性も含む(推奨しないもののほとんどは視覚的プレゼンテーションに関わるものである)。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html )］より という推奨しない要素や属性も使えるというだけで、文法まで許しているわけではありません。 詳しくは、3.3 HTML DTDの読み方 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3 )をご覧ください。
Transitionalならエラーでは無い。 Strictならエラーに成る。 インラインはブロックで囲む事。
- steel_gray
- ベストアンサー率66% (1052/1578)
HTMLにも色々規格があって、厳格な規格ではbody直下に置くことは文法違反です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html こちらでHTMLの文法チェックをすると http://openlab.ring.gr.jp/k16/htmllint/explain.html#excluded-element こんなエラーとなる事があります。
- pasocom
- ベストアンサー率41% (3584/8637)
<h2>はタイトル というより、「見出し＝大きな文字」です。一般に言うタイトルとは<title>タグです。 <p>は段落（文章？） <p>は単独で使用して段落です。</p>は不要。ただし<br>より大きな段落です。 <img>は？？？？ 画像です。 ＞正確にはimgタグも<p>とかで囲わなければいけないのか？ そんなことはありません。
文法的にはどちらでも images/hoge.gifがhogehogehogehogehogehogehogeと関連する画像なら<p>内に入れておくべきだろうし 関係なくて段落分けするなら入れない
関連するQ&A
- imgタグは何で囲むのが良いか
皆さんはimgタグは何で囲んでいますか？ <div> <h3>タイトルタイトル</h3> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="xxxx.jpg" alt=""> </div> 例えばこういうような時に、何で囲むべきかというのをいつも迷います。 ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、 pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。 最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、 altを空にしているものは囲まずにそのまま置いたりしています。 レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。 私はイメージ的な画像（情報としては必要ない画像や、直前のテキストとかぶっている画像文字等）にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。 スマートなやり方をご教授ください。
- ベストアンサー
- HTML
- <img>タグを<span>でくくりたい
Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- window.onload = function() { var out_span = document.createElement('span'); out_span.setAttribute('class', 'align_left'); var list = document.getElementsByTagName('img'); var img = list[0]; /* この後、 どうやって、out_span を挿入すればよいのか？ */ } //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★ インデントは全角スペースで行っております。 ご教示お願いします。
- ベストアンサー
- JavaScript
- <img>タグの alt= の値をキャプションに
初心者を抜け出そうとしている者です。 画像の下にキャプションを付けたいのですが、 alt= の値を利用しようと思っています。 下記のようなスクリプトで実現できる方法はあるのでしょうか？ <html> <head> <script type="text/javascript"> <!-- window.onload = function() { var list = document.getElementsByTagName('img'); for (var i=0; i < list.length; i++) { /* ココで、それぞれの<img> の alt=の値を取り出し、 それぞれの<img>の直後に、 '<br><span> alt の値 </span>' を挿入したい */ } } //--> </script> </head> <body> <h1>テスト IMGタグの後に文字列出力</h1> <img src="../images/logo1.gif" alt="Logo1" /> <img src="../images/logo2.gif" alt="Logo2" /> </body> </html> ※ 上記インデントは全角スペースで書いております。 上のような方法以外でもかまいませんので、 スクリプト例を書いていただけると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- pタグとimgタグについて
【やりたいこと】 手順1．pタグによる文章 imgタグによる解説画像 手順2．pタグによる文章 imgタグによる解説画像 つまり、各手順に対しての解説画像をはっていこうと考えています。 【タグ】 <p>手順1．「メニューを選択」→「ファイルを保存」<img src="説明画像"></p> <p>手順2．「保存場所の選択」<img src="説明画像2"></p> として組んでいます。 【得られる結果】 手順1．「メニューを選択」→「ファイルを保存」 説明画像1 手順2．「保存場所の選択」 説明画像2 と当然、横並びになります。 画像の横にテキストを配置とかできるのわかるのですが、 【求める結果】 手順1．「メニューを選択」→「ファイルを保存」 説明画像1 手順2．「保存場所の選択」 説明画像2 という形に持っていきたいのです。 【変更後のHTML】 <p>手順1．「メニューを選択」→「ファイルを保存」</p> <p><img src="説明画像"></p> <p>手順2．「保存場所の選択」></p> <p><img src="説明画像2"></p> と組むのがいいのでしょうか？ imgのcssのvertical-alignではできないと感じたもので…。 ご教授お願いします。
- ベストアンサー
- CSS
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- firefoxで表示される画像がIEで表示されない
同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。
- ベストアンサー
- HTML
- ALT属性に見出しタグをつけると画像がズレます。
見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像はDIVタグとPタグの両方で囲むの？
クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？ ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。 同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2（見出しタグ？）で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか？ すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか？ 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。
- 締切済み
- HTML
- srcに「banner.」で始まるファイルを指定しているimgタグが消える
急に謎の症状が発生して困っています。 何か知っている方がいたらご教示お願いします。 謎の症状が起きるスクリプトの例------------------------ echo '<div>'; echo '<a href="hoge1"><img src="img/banner.jpg"></a>'; echo '<a href="hoge2"><img src="img/banner2.gif"></a>'; echo '<a href="hoge3"><img src="banner.gif"></a>'; echo '<a href="hoge4"><img src="banner.png"></a>'; echo '<a href="hoge5"><img src="hogehoge.gif"></a>'; echo '</div>'; ------------------------------------------------------ 上記のようなスクリプトを実行した場合に、3行目の「img/banner2.gif」と6行目の「hogehoge.gif」を指定しているimgタグしか表示されません。 残りはimgタグの部分だけ綺麗さっぱりに消えてaタグの部分だけ表示されます。実行結果が下記のようになるのです。（実際には改行されませんが、見やすいように改行してます。） 実行結果--------------------------------------- <div> <a href="hoge1"></a> <a href="hoge2"><img src="img/banner2.gif"></a> <a href="hoge3"></a> <a href="hoge4"></a> <a href="hoge5"><img src="hogehoge.gif"></a> </div> ----------------------------------------------- banner.gifやimg/banner.gifは表示されるファイルと同じディレクトリの中に存在しています。 昨日ちゃんと表示されていたのを確認しました。そのときからサーバーの設定は変更していないので、何が原因なのかが分かりません。 過去に同じような症状が起こった方はいないでしょうか？ PHPのエラーログを見てもエラーも警告もありませんでした。 【環境】 OS: CentOS/5 HTTPD: Apache/2.2.3 PHP: PHP/5.1.6（eAccelarator、ZendOptimizerが入ってます） ちなみに「banner」だけだとOKでした。「banner.」が付くとダメみたいです。 よろしくお願いします。
- ベストアンサー
- PHP
- HTMLのIMGタグについて
HTMLのimgタグで(1)と(2)のようにした場合、表示が異なります。 (1)のほうが画像間のスペースが広くなります。また(2)の場合でも ほんの少しスペースが開くようです。 (1) <img src="image1"> <img src="image2"> (2) <img src="image1"><img src="image2"> HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ないので 同じ表示になるべきなのではないでしょうか？ なぜ異なった表示になるのでしょうか。 また画像間のスペースを0にしたいのですが、何か方法を教えてください。
- ベストアンサー
- HTML
