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

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

解決済

  • 質問者：kikitaiOK
  • 質問日時：
  • 回答数：5件

（例）
<div id="TOP">空</div>

<div id="MID">たくさんのコンテンツ</div>

<div id="BTM">空</div>

#TOPは背景画像の一番上

#ＭＩＤは真ん中の画像をリピートさせる

#BTMは背景画像の一番下

このような組み合わせでページを作成したいことがあります。
例えばこのOKWaveの質問欄の灰色の部分です。（ＰＣ版）

記載したコードではdivタグを使用していますが

divタグは要素のグループ化に用いるものなので向いていないと思います。

pタグは１つの段落を示すのでそれも不向きかなと・・・

そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな？って思えてきました。

皆さまのご意見をお聞かせ下さい。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.1ベストアンサー

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

＞そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな？って思えてきました。


　わかってらっしゃる。
　HTMLは、文書構造だけ記述し、それをスタイルシートでプレゼンテーションする。これがウェブページの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」という大原則です。
　DIVはデザインのためではなく文書構造をマークアップするために用意されています。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　そして、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 … )」

　ページに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;

とか・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなってしまい、申し訳ありません。

詳細な解説をありがとうございます。

基本的にそのようなタグは容易されていないことと
その理由がよくわかりました。

IE8対応を捨ててCSS3にするか
スマートなコーディングを諦めるかしたいと思います。

通報する
お礼日時：2014/01/22 17:12

No.5

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

＞スマートなコーディングを諦めるかしたいと思います。


　いえ、全く逆です。!!!

　コーディング--HTMLやCSSのコードをスマートにする最善の方法は、文書構造
とプレゼンテーションの分離です。決して逆じゃないです。HTMLがスマートに
コーディングされていると、シンプル（スマート)なスタイルシートですばらし
いデザインのスタイルシートかけるのです。

　仕様書どおりに厳密にHTMLを作成する事とデザインと逆行すると誤解されてい
る人が多いですが、実際は全く逆です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプ
レゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やイン
デントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々
なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣［Style Sheets in HTML documents (ja)(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
)］より

　HTMLに文書構造しか書かれていないからこそ、デザインの自由度も大幅に良く
なるので、全く異なるデザインに変更することも可能になるのです。

＞IE8対応を捨ててCSS3にするか
　IE8が問題になるのは、互換モードです。標準モードで動作するようDOCTYPEを
宣言しておくと、基本的にどのブラウザでも大きな差はなくなるはずです。

＞基本的にそのようなタグは容易されていないこと
＞その理由がよくわかりました。
　画像が(アルバムページの写真とか)そのページのコンテンツでしたら、
<object></object>や<img>要素を使用しますから用意されています。
　内容とは関係ないものでしたら、スタイルシートで背景として指定すればよい
だけです。(スタイルシートで内容の追加も出来ますが・・)
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： tkmojo
  • 回答日時：

画像を入れるだけなら<img>タグです。



背景画像なら<div>や<p>等、何にでも入れられます。
ただ、背景画像の為だけのdivなんかはスマートではありませんね。

> 意味のない装飾のためだけの画像を入れるのに向いているタグ
これはdivなんでしょうが、向いているというわけではなく「他に使うタグが無いから最終的に使用する」という消去法での使用ですね。
仕様書でもdivは他に適当なものが無い時に最終的に使用するものだとあります。

現在はcss3で複数の背景画像を指定できるので、
装飾の為だけに空のdivを作ったりdivを何個も入れ子にしたり、という必要はほぼ無くなってます。

この質問欄の灰色の部分、と言えば角丸の事でしょうか。
昔は角丸を表現する為だけに背景画像を作り、divをいくつか入れ子にしたり、と言うのが一般的でしたが、
今は角丸だけならcss3で出来ますし、古いブラウザで角丸が再現されていないとしても別に閲覧に問題があるわけではないので私は気にせずcss3を使ってます。

そのように作成すると、意味のない画像の為だけにdivを書く必要はほぼ皆無に近くなりますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなってしまいました。

>仕様書でもdivは他に適当なものが無い時に最終的に使用するものだとあります。

最終的にdivを使用するのは問題ないんですね。
ただ空のdivに背景だけ指定するなんてなんかスマートじゃなくてモヤモヤします。

いっそのことXPのサポート期限が切れるのと一緒にCSS3に対応していないIE8もサポートしないってなってくれるといいんですが。
そうすれば、サポートされていないブラウザのことなんて考えずにCSS3を使えるのでありがたいって思っています。

通報する
お礼日時：2014/01/22 17:03

No.3

  • 回答者： hue2011
  • 回答日時：

ブラウザの横幅を変えられたりすると、画像がはみでたりしてブサイクになる可能性がありますので、


<iframe>で画面枠を作り、それを囲む形で制御するというテクニックを試してみてください。

それを囲む枠が<div>であるか<section>であるかはやってみてください。

<div>はhtml5では推奨されないといわれているだけで、使えないということではありません。
<section>を使うのがおすすめですが、コンテナ要素では思い通りにならない点、IE9以前のブラウザでどうするかという例のくだらない問題が発生しますから、<div>でもいいですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

実装方法はいろいろあると思うんですが、実際どれがスマートなのかな？と思ってます。

通報する
お礼日時：2014/01/22 17:05

No.2

  • 回答者： ueshita123
  • 回答日時：

画像を表示するなら<image src="画像のファイル名">です。

この回答への補足

画像の表示の仕方はしっています。

補足日時：2014/01/22 17:07
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報