HTML CSS ヘッダー*.jpgにalt=""

質問

CSSとＨＴＭＬでＨＰを作成しているのですが、下記ＣＳＳの部分でheaderにalt=""　と title=""　を入れる事は出来るのでしょうか？
問題の記述は下記の通りです。

/*ヘッダー*/
div#header {background-image: url(http://www.hogehoge.com/header1.jpg);
padding: 28px 18px 42px}

HTMLだけでしたら簡単に出来たのですが、ＣＳＳ＋ＨＴＭＬ、しかもＣＳＳ部分に記載しているimgファイルなので、どうしたら良いのか判りません。

上記の件、ご指導願いたく思います。

宜しくお願い致します。

回答No.3

think49

画像には前景/背景の二種類が存在します。
img要素は前景、background-imageは背景です。

前景は「コンテンツとしてなくてはならないもの」なので画像が非表示であっても代替テキストを表示する仕組みになっています。
背景は「コンテンツとしてはなくてもいいもの」であり、前景に表示されているコンテンツと背景を重ねて表示する事で背景が表示されなくても問題ない仕組みになっています。
従って背景には代替テキストそのものが不要です。
そもそも、代替テキストを表示したら前景に表示されているコンテンツと重なって見づらくなるはずです。
もし、あなたが背景を前景としての機能を期待している(コンテンツを空にして背景にコンテンツとしての意味を求めている)のなら実装法が誤りですのでimg要素に変更してください。

<div style="background-image: url(http://www.hogehoge.com/header1.jpg)"></div>

これは画像非表示にしたり、CSSを無効化すればコンテンツが見えなくなります。
背景は次のように使います。

<div style="background-image: url(http://www.hogehoge.com/header1.jpg)">ここにコンテンツを書く</div>

背景画像がなくてもコンテンツは表示されているので問題ありません。

# Re: pekochan18さん

回答No.2

ORUKA1951

ウェブページをHTMLを使用して作られているという事ですね。(ホームだけじゃなく)
　⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 )
HTML/CSSと文書構造とプレゼンテーションを分離する事は最初の基本です。
　⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

　すなわち、HTMLには文書構造だけを記述して、それをどのように表現（プレゼンテーション）するかはスタイルシートで行ないます。
　画像にaltをつけなければならないのは、画像がレンダリングできないユーザーエージェントに対してそれに変わる情報を提供するためです。
　⇒alt( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )
　背景画像はあくまでプレゼンテーションで、文書の主要なコンテンツではありませんから、代替テキストの必要はありません。

　title属性は画像(IMG)要素やオブジェクト(OBJECT)要素、フォームなど限られた要素の属性で、titleはほぼ同じ目的＋情報の補足でより広い要素に使用出来る属性です。
　以前のHTMLでは持ちうる要素が限られていましたが、HTML5ではグローバル属性となりすべての要素に使用可能になります。・・・よって、altと併用することは少ないでしょう。

＞HTMLだけでしたら簡単に出来たのですが、
　div要素にaltは使えませんからできないはずです。

回答No.1

hitomura

……えーと、なぜ単なる背景の画像にタイトルやら代替テキストやらが必要なのでしょうか?

CSS で設定できる項目は、修飾する HTML ページの文書構造自体には一切関係しない、単なる見た目等に関する事柄だけに限られます。つまり、その CSS で設定する背景画像は、ページに書かれた内容を読みに来た人にとってはどうでもいいことです。
一方、画像のタイトルや代替テキストはその画像が HTML ページでどのような意味を持つかを示すものです。つまり、ある画像にタイトルや代替テキストを設定したいという事は、その画像はそのページにとって必要不可欠なものという事を表します。
したがって、背景画像にタイトルや代替テキストを付けたいというのはありえないはずなんです。

というか、
> HTMLだけでしたら簡単に出来たのですが
とのことですが、ひょっとしてそれは以下のようなものでしょうか?
　<div class="header" background="http://www.hogehoge.com/header1.jpg" title="うんたら" alt="かんたら">...（中略）...</div>
でしたらその title や alt は背景画像のものではなく div そのものに対する記述です。

すみませんが、画像を背景に置いて、なおかつその画像にタイトル等をつけたいと思った理由や事情について補足願います。
また、「HTML だけ」で書いた内容が上記と異なるならば、具体的にどのように書いたかも補足願います。