imgタグとレスポンシブについて

Question

imgタグとレスポンシブについて imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね下記のように直前にブロック要素で囲まれていないといけないのでしょうか？

下記のように直前にブロック要素で囲まれていないといけないのでしょうか？それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？～

〒***-***　**県**市**町 1-5-10　TEL.0977-84-****

～下記はだめですよね。

画像

文字が上揃えになります

枠の太さを２にしています

〒***-***　**県**市**町 1-5-10　TEL.0977-84-****

ORUKA1951 · Accepted Answer

＞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)要素は、　　　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.3.1 ) 意味は　p要素には、他のブロック要素は含むことができないことを意味します。そして、終了タグが省略可能ですから、つぎにブロック要素が登場すると、自動的にこの段落要素は終了と見なされます。　body要素は、　ですから、　ということ。 ※HTML要素は、BODY要素のみ必須ですから、で囲まれていなくても、それがbodyだと判断されます。(開始タグ/終了タグとも省略可能なので) ★以上のことから、　※body要素内にはブロック要素しか置けないために、画像のような行内要素(%inline)は、必然的に必ずブロック要素の中にしか存在しないことになります。『imgタグなどのようなインライン要素は、ブロック要素で囲まないといけない』は結果としては正しいですが、根本的な意味は間違っています。　body要素直下にimg要素は置けない!!です。・・・・・以下、サンプルに対して・・・・・・・＞

　DIVはむやみに使いません。HTML5ではこの使い方はできなくなります。

　とかです。

★決して、文書を成型するために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以外の抱合ブロックのサイズを参照させます。＞下記はだめですよね。

画像

文字が上揃えになります

　以上ですが、一言で言うとHTML4.01移項のHTML文書作成の根幹である「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が、まったくできていません。　　

　 ※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] 　

ORUKA1951 · Answer

＞body要素直下出なければインライン要素はブロック要素で囲まなくても良いのですか？　ですから、ちゃんと読まないと・・　ここは大事です。はダメです。なぜならすべて行内要素ですからね。 ★BODY要素内にはブロック要素しか置けない≠画像はブロックで囲まないとならない　この二つ、まったく意味が違いますよ。　画像の前後を
で囲めばよいとも違いますね。 ★「構造とプレゼンテーションの分離」の良いサンプル 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の仕様書を通しで読んで置かれることをお勧めします。　そのほうが、絶対に早いですし簡単です。　　

imgタグとレスポンシブについて

＞imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、

＞body要素直下出なければインライン要素はブロック要素で囲まなくても良いのですか？

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

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

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