画像を表示するための最適なタグは何？

2014/01/18 16:59

このQ&Aのポイント

divタグやpタグは要素のグループ化や段落表示に用いられるが、装飾のためだけの画像を表示するには適していない。
最適なタグは、imgタグである。imgタグは画像を表示するためのものであり、alt属性を使用して画像の説明を提供することもできる。
画像を表示する場合は、imgタグを使用し、適切なalt属性を設定することが重要である。

kikitaiOK
お礼率89% (57/64)

HTML
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/01/18 19:33 回答No.1

＞そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな？って思えてきました。　わかってらっしゃる。　HTMLは、文書構造だけ記述し、それをスタイルシートでプレゼンテーションする。これがウェブページの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という大原則です。　DIVはデザインのためではなく文書構造をマークアップするために用意されています。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　そして、HTML5では文書構造を示す要素が追加されたためDIVは、原則として使えなくなります。「NOTE: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 )」　ページに3つの背景の異なるブロックがあるという事は、3つの異なる文書構造上のブロックがあるという事ですから HTML4.01でしたら <body> 　<div class="header"> 　　文書のヘッダ　</div> 　<div class="section"> 　　本文　</div> 　<div class="footer"> 　　文書のフッタ　</div> </body> とマークアップされてきたはずです。 HTML5では、divを使わなくても、文書構造をあらわせますので <body> 　<header> 　　文書のヘッダ　</header> 　<section> 　　本文　</section> 　<footer> 　　文書のフッタ　</footer> </body> とあらわせるので楽になります。もっと複雑な場合は <body> 　<header> 　　文書のヘッダ　　<nav>ナビゲーション</nav> 　</header> 　<section> 　　本文　　<section> 　　　階層ひとつ下　　</section> 　　<section> 　　　階層ひとつ下　　　<article> 　　　　<header></header> 　　　　<section></section> 　　　　<footer></footer> 　　　</article> 　　</section> 　　<aside> 　　　本文と関係ない記事　　</aside> 　</section> 　<footer> 　　文書のフッタ　</footer> </body> となります。　HTML4.01の場合はclass名で!!。headerもsectionも何度も登場する可能性があるのでidじゃまずい。　文字通り、背景だけでコンテンツがひとつしかなければ <html> 　<body> 　　<h1>見出し</h1> 　　<p>・・・</p> 　</body> </html> は最低限あるはずですから html,bodY{margin:0;padding:0;width:100%;height:100%;position:relative;} html{background:url(./images/background/underGreen.gif) repeat-x 0 top;padding-top:100px;} body{background:url(./images/background/gradiation.gif) 0 bottom repeat-x;padding-bottom:39px;} underGreen.gifは高さ10px; gradiation.gifは高さ39px; とか・・

質問者

お礼 2014/01/22 17:12

お礼が遅くなってしまい、申し訳ありません。詳細な解説をありがとうございます。基本的にそのようなタグは容易されていないこととその理由がよくわかりました。 IE8対応を捨ててCSS3にするかスマートなコーディングを諦めるかしたいと思います。

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/01/22 18:20 回答No.5

＞スマートなコーディングを諦めるかしたいと思います。　いえ、全く逆です。!!! 　コーディング--HTMLやCSSのコードをスマートにする最善の方法は、文書構造とプレゼンテーションの分離です。決して逆じゃないです。HTMLがスマートにコーディングされていると、シンプル（スマート)なスタイルシートですばらしいデザインのスタイルシートかけるのです。　仕様書どおりに厳密にHTMLを作成する事とデザインと逆行すると誤解されている人が多いですが、実際は全く逆です。【引用】＿＿＿＿＿＿＿＿＿＿＿＿スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。￣￣￣￣￣￣￣￣￣￣￣￣￣［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より　HTMLに文書構造しか書かれていないからこそ、デザインの自由度も大幅に良くなるので、全く異なるデザインに変更することも可能になるのです。＞IE8対応を捨ててCSS3にするか　IE8が問題になるのは、互換モードです。標準モードで動作するようDOCTYPEを宣言しておくと、基本的にどのブラウザでも大きな差はなくなるはずです。＞基本的にそのようなタグは容易されていないこと＞その理由がよくわかりました。　画像が(アルバムページの写真とか)そのページのコンテンツでしたら、 <object></object>や<img>要素を使用しますから用意されています。　内容とは関係ないものでしたら、スタイルシートで背景として指定すればよいだけです。(スタイルシートで内容の追加も出来ますが・・)

tkmojo
ベストアンサー率50% (105/207)

2014/01/20 12:02 回答No.4

画像を入れるだけなら<img>タグです。背景画像なら<div>や<p>等、何にでも入れられます。ただ、背景画像の為だけのdivなんかはスマートではありませんね。 > 意味のない装飾のためだけの画像を入れるのに向いているタグこれはdivなんでしょうが、向いているというわけではなく「他に使うタグが無いから最終的に使用する」という消去法での使用ですね。仕様書でもdivは他に適当なものが無い時に最終的に使用するものだとあります。現在はcss3で複数の背景画像を指定できるので、装飾の為だけに空のdivを作ったりdivを何個も入れ子にしたり、という必要はほぼ無くなってます。この質問欄の灰色の部分、と言えば角丸の事でしょうか。昔は角丸を表現する為だけに背景画像を作り、divをいくつか入れ子にしたり、と言うのが一般的でしたが、今は角丸だけならcss3で出来ますし、古いブラウザで角丸が再現されていないとしても別に閲覧に問題があるわけではないので私は気にせずcss3を使ってます。そのように作成すると、意味のない画像の為だけにdivを書く必要はほぼ皆無に近くなりますよ。

質問者

お礼 2014/01/22 17:03

お礼が遅くなってしまいました。 >仕様書でもdivは他に適当なものが無い時に最終的に使用するものだとあります。最終的にdivを使用するのは問題ないんですね。ただ空のdivに背景だけ指定するなんてなんかスマートじゃなくてモヤモヤします。いっそのことXPのサポート期限が切れるのと一緒にCSS3に対応していないIE8もサポートしないってなってくれるといいんですが。そうすれば、サポートされていないブラウザのことなんて考えずにCSS3を使えるのでありがたいって思っています。

hue2011
ベストアンサー率38% (2801/7249)

2014/01/19 13:23 回答No.3

ブラウザの横幅を変えられたりすると、画像がはみでたりしてブサイクになる可能性がありますので、 <iframe>で画面枠を作り、それを囲む形で制御するというテクニックを試してみてください。それを囲む枠が<div>であるか<section>であるかはやってみてください。 <div>はhtml5では推奨されないといわれているだけで、使えないということではありません。 <section>を使うのがおすすめですが、コンテナ要素では思い通りにならない点、IE9以前のブラウザでどうするかという例のくだらない問題が発生しますから、<div>でもいいですよ。

質問者