• ベストアンサー

画像配置のimgタグとbackgroundの違い

画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、 何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。 例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、 タイトルの画像はimgタグとbackgroundのどちらでしょうか? 他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。

  • nkmyr
  • お礼率67% (403/600)
  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

HTMLが何かをしっかり理解していれば、わかりきった話です。 ★少なくとも仕様書は目を通しておきましょう。特に 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 ) 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) は、隅々まで目を通しておきましょう。  簡潔に言うと、画像が伝えたい内容の場合はHTMLで、そうでない場合は背景で・・・と言うことになります。  上記の下のリンク先に # テキストを画像に置き換えて表現する。 # 余白制御のために画像を用いる。  に当てはまるものはだめと言うこと。 ですから、一般的には、h1も、画像ではなく背景にすべきと言えます。 ・・・ 画像を使うにしても、 <h1><img src="[URL]" width="[Length]" height="[Length]" alt="オレンジについて"></h1> が、精一杯の妥協点かな。非推奨です。 >他のサイトで拝見してみましたら、どっちも使いますが… は、この世界では根拠になりません。W3Cがあちこちで言っているように「多くの製作者が誤った使い方をしているので、明確にした」・・・  常に仕様書を参照する!!!それしかありません。

nkmyr
質問者

お礼

ありがとうございました。

その他の回答 (1)

  • shokodei
  • ベストアンサー率33% (2/6)
回答No.2

その画像が無いと内容が伝わらなくなるような場合は、imgタグで指定します。 その画像が無くても内容が伝わる場合は、CSSのbackgroundで指定したら、いいんじゃないかと思います。 タイトルの画像は、……どっちでもいいです。 ていうか、好きにすればいいとか思いました。

nkmyr
質問者

お礼

ありがとうございました。

関連するQ&A

  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • pタグ内、一部の画像のみ左に配置したいとき。

    ホームページの記事のページをDIVタグでくくって、 その中の「p」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか? できればCSSで行いたいです。 ちなみにホームページは ​http://www.k-ban.net​ です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>~</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします!

    • ベストアンサー
    • HTML
  • imgタグのみで画像を中央に重ねる方法

    HTML5+CSS3で画像を中央にフィットした状態で重ねる方法を調べています。 一般的にはbackground-size:contain;で背景を適用したDIV要素にimg要素を挿入しますが、この場合だと一部のブラウザでは背景が印刷されないことがあります。 そのため、background-imageを使わずにこれと同じ方法を実現したいのですが、何かいい方法はありますでしょうか。

    • 締切済み
    • CSS
  • background-imageが効かない

    HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。

    • 締切済み
    • CSS
  • 画像imgタグについて質問です。

    XHTMLで画像を指定する方法で本来通り imgで正しいのでしょうか? それともCSSで背景画像にする方が正しいのでしょうか? どうかよろしくお願いします。

  • hタグの右横に画像を表示

    hタグ(今回は<h3>タグ)の右横に、「new」の画像を表示したいと思っています。 <h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。 全てに「new」がつく訳ではなく、任意のものだけに表示です。 css の background image で試してみたのですが 当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。 right 指定で%で指定していけば、なんとなくバランスよくはできますが あくまでなんとなくであって、 更にタイトルの文字数によって変わってきてしまうので 個別にcssを指定していかなければなりません。 (そういうものなのでしょうか。) ※例えば「new」画像が左置きなら、 background image を使って、hタグの css に padding-left:100px; などとすれば済みますよね(画像の分だけpaddingで空きを作る)。 でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。 hタグのタイトルから右横に(例えば)20px空きをつくり画像を配置、 ということが簡単には出来ないものでしょうか。 それとも <h3>テキストテキストテキスト<img src="********"></h3> なんてことをしてもいいものでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 画像を中心に配置したい

    画像の上下にも背景色を表示したいですが、うまくできません。 横幅は<align="center">で指定できたのですが、上下は・・・。 HTML、CSS、画像ファイル(gazou1.jpg)全て同じ階層にあります。 ・HTML <div class="gazou" align="center"><img src="gazou1.jpg"></div> ・CSS div.main { width: 100%; background-color: green }

    • ベストアンサー
    • CSS
  • IMGタグで画像の繰り返し使用は…

    IMGについて質問させてください。 ページの背景として画像を使う場合、画像は縦・横方向に繰り返し使われてページ全面に貼り付けられると思います。 IMGタグで指定する画像を縦方向に繰り返し使うことはできますでしょうか? テーブルの中で使用する画像なのですが、テーブルの高さが可変なために高さ指定ができないのです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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
  • CSSで文字と画像の配置方法は・・・

    HTML+CSSで書いています。 画像とテキストを配置しようとしています。 画像は位置固定にして、 テキストは回り込みではなく、その上にかぶさる感じにしたいの ですが、画像は画像、テキストはテキストに分離してしまいます。 (画像を背景みたいに扱いたいのですが、すでに背景はCSSで 指定されてしまっています。。。。) どのようにCSSを記述すればいいのでしょうか?

専門家に質問してみよう