- ベストアンサー
imgタグとレスポンシブについて
- imgタグとレスポンシブについて
- imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、直前にブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？imgをフルイドイメージにする方法は、直前のブロック要素のサイズに合わせて画像の大きさを調整する必要がありますか？
- imgタグの直前にブロック要素で囲まれていなくても、ずっと先にブロック要素があってそこから入れ子になっていれば問題ありません。imgをフルイドイメージにする場合、直前のブロック要素のサイズに合わせて画像の大きさを調整する必要があります。また、ブロック要素の中の内容が増えた場合は、サイズの調整を再計算する必要があります。
- CSS
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、 また聞きではだめですよ。基本から HTML(Hyper Text Markup Language)は、文書をそれを構成する要素に分解し、ひとつひとつの要素をタグを用いてマークアップするメタ(機械相手の)言語(機械相手の)です。 由来はSGMLです。⇒Standard Generalized Markup Language#背景 - Wikipedia( http://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language#.E8.83.8C.E6.99.AF ) ★そのために、それぞれの要素は、何を含む事ができるかが決められています。 段落(Paragraph)要素は、 <!ELEMENT P - O (%inline;)* -- paragraph --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.3.1 ) 意味は <!要素 P 開始タグ-必須 終了タグ0省略可 (%inline行内要素)*0個以上 --段落 --> p要素には、他のブロック要素は含むことができないことを意味します。そして、終了タグが省略可能ですから、つぎにブロック要素が登場すると、自動的にこの段落要素は終了と見なされます。 body要素は、 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ですから、 <!要素 BODY 開始タグO省略可 終了タグO省略可能 (%block;|SCRIPT)ブロック要素かスクリプト要素+一つ以上 +および(INS|DEL)の何れかも可能 -- 文書の本文 --> ということ。 ※HTML要素は、BODY要素のみ必須ですから、<body></body>で囲まれていなくても、それがbodyだと判断されます。(開始タグ/終了タグとも省略可能なので) ★以上のことから、 ※body要素内にはブロック要素しか置けないために、画像のような行内要素(%inline)は、必然的に必ずブロック要素の中にしか存在しないことになります。 『imgタグなどのようなインライン要素は、ブロック要素で囲まないといけない』 は結果としては正しいですが、根本的な意味は間違っています。 body要素直下にimg要素は置けない!!です。 ・・・・・以下、サンプルに対して・・・・・・・ ＞<div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> DIVはむやみに使いません。HTML5ではこの使い方はできなくなります。 <p class="copyright"><img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24"> </p> とかです。 <td class="copyright"> <address> ★決して、文書を成型するためにtableを使用してはなりません!! 『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 『 ⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 と、1999年HTML4.01勧告以来、随所で厳しく指摘されています。 ＞下記のimg をフルイドイメージにしたい場合は ＞のように入れれば良いのですよね。 いいえ、リキッドの場合は、img要素をブロック要素にして、static以外の抱合ブロックのサイズを参照させます。 ＞下記はだめですよね。 <H2>画像</H2><!-- h2はブロック要素ですからOK --> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> <!-- h2を含む全体がDIVで囲まれていれば文法的には誤りではありませんが、文書構造上は 謝りになります。なぜなら、次にブロック要素が現れた時に、仮想ブロックを作らなければならなくなる。--> <!-- imgのborder,align属性は非推奨です。--> 文字が上揃えになります<BR><BR> <!-- brは段落内の視覚的強制改行です。行間を調整するために使用してはなりません。ブラウザによると連続したbrは無視するものもあります --> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> <!-- border要素は非推奨です スタイルシートで --> 以上ですが、一言で言うとHTML4.01移項のHTML文書作成の根幹である「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が、まったくできていません。 <body> <div class="header"> <!-- 文書のヘッダ部であることをclassで --> </div> <div class="section"> <!-- 文書の本文であることをclassで --> </div> <div class="footer"> <!-- 文書のフッタであることをclassで --> <address> 〒***-*** **県**市**町 1-5-10 <span class="tel">TEL.0977-84-****</span> </address> <ul><!-- フッターのナビゲーションは囲まない --> <li><a href="/index.html">トップ</a></li> <li><a href="/sitemap.html">サイトマップ</a></li> </ul> <p>株式会社ABC</p> </div> </body> ※DIVに使用するidやclassは、あくまで『文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ですよ。デザインのためじゃない。 これが理解されなかった反省からHTML5では文書構造を示す要素が追加され( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )、DIVは他に適切な要素があるとき以外は使えなくなります。 『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )』 比較のため最後にHTML5で書いた例を上げておきます。 1) リキッドでデザインしましょう。 2) 画像自体がそのページのコンテンツでないときは背景にします。 リンクの背景とか、見出しの背景とかにする。 3) HTML4.01勧告時に「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」 とされました。HTML5が勧告を迎えました。(2014.09.16)５日前 [HTML5] <body> <header> <!-- 文書のヘッダ部 --> <header> <section> <!-- 文書の本文 --> </section> <footer> <!-- 文書のフッタ --> <address> 〒***-*** **県**市**町 1-5-10 <span class="tel">TEL.0977-84-****</span> </address> <ul> <li><a href="/index.html">トップ</a></li> <li><a href="/sitemap.html">サイトマップ</a></li> </ul> <p>株式会社ABC</p> </footer> </body>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞body要素直下出なければインライン要素はブロック要素で囲まなくても良いのですか？ ですから、ちゃんと読まないと・・ <body> <strong>ここは大事です。<a href=""><img src="" width="" height="" alt=""></a> </body> はダメです。なぜなら<strong><a><img>すべて行内要素ですからね。 ★BODY要素内にはブロック要素しか置けない≠画像はブロックで囲まないとならない この二つ、まったく意味が違いますよ。 画像の前後を<p></p><div></div>で囲めばよいとも違いますね。 ★「構造とプレゼンテーションの分離」の良いサンプル Chrome以外の代替スタイルシートが利用できるブラウザで ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) に行って、表示→スタイルシートへ進み、色々なスタイルを選択してみてください。ウィンドウ幅を変えてみたり、印刷プレビューを確認しても良いです。 スタイルシート無しで画像の読み込まない状態が検索エンジンが理解するページです。SEO的にも完璧 あわせて、このページをAnother HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックしてみても良いでしょう。 文書構造(HTML)とプレゼンテーション(スタイルシート)が独立していますから、HTMLの変更も、デザインの変更も楽です。気が向いたときにデザインを自由に変更できる。 たぶん、ウェブページの作成方法、スタートを間違えられて？？、沢に迷い込まれてらっしゃる。スタート時点に戻って本道を歩まれるほうが、はるかに早く簡単じゃないかと。やがてHTML5の時代が来ます。HTML5は、文書構造とプレゼンテーションは完全に分かれています。 HTML4.01の勧告時の予告参照!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 推奨しない 推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より 皆が通ってきた道です。頑張ってください。私は15年前、50代にHTML書き始めました。そして、このような壁に何度もぶつかりました。 一度HTML4.01の仕様書を通しで読んで置かれることをお勧めします。 そのほうが、絶対に早いですし簡単です。
お礼
＞ ★BODY要素内にはブロック要素しか置けない≠画像はブロックで囲まないとならない この二つ、まったく意味が違いますよ。 画像の前後を<p></p><div></div>で囲めばよいとも違いますね。 つまりbody直後にブロック要素が来てればOKということではないのですか？ body div h1 h1 img div でもOK body img div h1 h1 div では駄目なのですよね
お礼
＞『imgタグなどのようなインライン要素は、ブロック要素で囲まないといけない』 は結果としては正しいですが、根本的な意味は間違っています。 body要素直下にimg要素は置けない!!です。 つまり、下記のimgはbody直下でないのでOKなのですね。 ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> body要素直下出なければインライン要素はブロック要素で囲まなくても良いのですか？