掲示板/HTML質問板/過去ログ/一覧/ imgに背景色の指定

0 名前：める： 2007/03/04（日） 12:37 ID:IznCOHFA sub-.G

イメージタグについて教えて下さい。
ロゴを描いたバナーの背景を透過処理し、画像の背景色を以下のようにimgタグ内で指定する使い方は文法的に正しくないのでしょうか。

<img src="gazou.png" alt="バナー" width="200" height="50" style="background-color:#990000;">

1 名前：匿名： 2007/03/04（日） 12:37 ID:Z/T9lFdK sub-kJ: 逆に、何で文法的に正しくないと思ったん？

2 名前：める： 2007/03/04（日） 12:37 ID:IznCOHFA sub-.G: HTMLやCSSの解説サイトなどを自分なりにあれこれ見て回ったのですが、上記のようにイメージタグ内で背景色を指定する（画像自体に背景色を指定する）やり方が紹介されているサイトがどこにもなかったので、こういう指定の仕方自体間違っているのかと思ったのです。

この方法は問題ない、というか普通に使われる方法でしょうか？

3 名前：匿名： 2007/03/04（日） 12:37 ID:Z/T9lFdK sub-kJ: 了解。ポイントは 2 点かな。

> 画像の背景色

CSS リファレンスの background-color の項を見てみよう。たとえば：
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-color

「適用要素」を見てみると、「あらゆる要素」とある。つまり、img 要素に対して background-color を指定することは、何ら問題ない。

> イメージタグ内で背景色を指定する...やり方が紹介されているサイトがどこにもなかった

CSS を使う場合、通常は style 要素か link 要素（外部スタイルシート）に一括して書いておく。そうでなければ、わざわざマークアップとスタイルシートを分離する意味がないでしょ？

style 属性は、余程のことがない限り使わないと思って良い。もちろん、使っても構わないが。

というわけで、img 要素に対する背景色指定自体は、文法的に無問題。ただし、それを style 属性で行うのは、サイトのメンテナンスという観点からは好ましくない、ということ。

4 名前： K+S ： 2007/03/04（日） 12:37 ID:nROqylMa sub-YS: 文法違反していない限り、それは文法的に不正ではないと言えるのではないでしょうか。
ただ、そのような方法でのimg 要素に対する背景色の表現が適しているかについては考慮すべきかもしれません。

> 画像の背景色を以下のようにimgタグ内で指定する使い方
背景色をタグ内で指定（style 属性）というよりスタイルシートで指定する方法が適しているかについて。

記述されたスタイルシート指定が有効とならない場合には、背景色部分に他の色が表示されることになりますが、それは問題ありませんか？
そのスタイルシート指定が有効でないページでその画像を用いられる場合、背景色に関して不都合が生じませんか？

前者は、あなたのページの閲覧者がスタイルシートを利用できない場合に関して。
後者は、バナー画像として他者が、或いは他所でその画像を用いる場合に関して。

これらの考えられる不都合に関して、支障がないようであればそのような方法を用いてもよいかもしれません。
この方法は問題ない、というか普通に使われる方法でしょうか？
img 要素に対しては上記のような問題が考えられるため、行われることはあまりないかもしれません。

透過GIFを用いた同様の発想は、背景画像に対しては非常に有効かもしれません。
cf. http://www.lucky-bag.com/archives/2006/09/background-patterns.html

5 名前：める： 2007/03/04（日） 12:37 ID:IznCOHFA sub-.G: 匿名様、K+S 様、詳しい説明とアドバイスありがとうございます。

＞CSS を使う場合、通常は style 要素か link 要素（外部スタイルシート）に一括して書いておく。そうでなければ、わざわざマークアップとスタイルシートを分離する意味がないでしょ？

おっしゃるとおりですね。
だからそういう指定を例にしているサイトがなかったのですね。納得です。

＞記述されたスタイルシート指定が有効とならない場合

こちらもおっしゃるとおりですね。そこまで考えていませんでした。

最初に説明すべきでしたが（汗）、
バナー画像を配布しようと思っていて、この方法だと利用してくださる方が自分のサイトデザインに合わせて背景色を指定できるので便利かなと（勝手に）思ったのです。

文法的には間違いではないことはわかりましたが、いろんな面であまり推奨されない方法だということもわかりました。
自分だけが使うならともかく、配布するのならこのような形のバナー（ソース）を配布するのはあまり賢い方法ではないと思われますか？（汗）
もしよろしければ皆様の参考意見をお聞きかせいただければと思います。（スルーしていただいても結構です）

6 名前： とおりすがり ： 2007/03/04（日） 12:37 ID:UWsZexeD sub-gm: > バナー画像を配布しようと思っていて、この方法だと利用してくださる方が自分のサイトデザインに合わせて背景色を指定できるので便利かなと

配布用画像（アイコンとか背景画像）なら、その配慮も嬉しいことはありますね。
でも、リンク用バナー画像なら背景部分まで凝ったデザインでも考えてくれたほうが見て楽しいです。
バナー画像って、自分のサイトを宣伝するためのものじゃないのかなぁ？

7 名前：匿名： 2007/03/04（日） 12:37 ID:Z/T9lFdK sub-kJ: >>5
> この方法だと利用してくださる方が自分のサイトデザインに合わせて背景色を指定できるので便利かなと

面白いアイデアだと思うよ。寝惚けながら少し考えてみた。

* style 属性をバナーに利用するのは、文法上問題があるか？
→ない。ただし、Content-Style-Type の指定も必須となることに注意。

* style 属性をバナーに利用するのは、理念上問題があるか？
→私見では、ない。ただし、配布したい「バナー」が、
- バイナリとしての「画像データ」なのか、
- 画像バイナリ・代替テキストなどを包含する「img 要素というオブジェクト」なのか、
で意見が分かれると思う。もし後者であれば、style 属性も「バナーとしての img 要素オブジェクト」から切り離すことのできないデータの一部と見なしうる。

* style 属性をバナーに利用するのは、運用上問題があるか？
→ありうる。
- スタイルシートは無視されうる（>>4 の指摘）。
- 透明度・背景色・背景画像の組み合わせによっては、かえって見づらくなる可能性。
- 画像が表示されない場合、代替テキストと背景色との組み合わせは大丈夫か？
これらは、めるさんではなく、利用者がクリアすべき問題となる。つまり、結構な負担を利用者に強いるかもしれない。

→めるさん側でできることは？
- 背景色が何であれ、画像のメイン部分はきちんと見えるよう、大げさに縁取りしてみたり。
- 透過と不透過の両方を配布し、使いやすい方を利用者に選ばせる（>>6 の指摘）。

面白いアイデアだと思うので、試しにやってみて、そのうちノウハウを公開してくれれば嬉しい。そうすれば、この件に関してはめるさんが第一人者だ。

8 名前：める： 2007/03/04（日） 12:37 ID:SN/WiGns sub-.G: とおりすがり様、匿名様、ご意見ありがとうございます。
とても参考になりました。

バナーは他にも数種類あって以前から配布しています。

最初の質問の際に「どんな画像なのか」という説明は必要ないと判断したため詳細を書きませんでしたが、正確には "私のサイトの宣伝のバナー" ではなくブログの隅っこによく使われているような 80×15px 程度のブログパーツ？素材です。

定期的に新しいものを作っているのですが、「バナーの色をサイトに合わせて変更（加工）したい」とよく言われます。
サイトといいましても個人のブログの方ばかりです。ブログの性質上、出来上がった綺麗なテンプレートを簡単に差し替えてデザインを楽しむという方が増えてきた為にちょっとしたバナーの色にもこだわる方も増えたのではと思っています。

この方法で透過処理したバナーは周囲の知人にはもうだいぶ前から使ってもらっているのですが、「文法上正しいのか？」ということと、匿名様もおっしゃっているように「かえって見づらくなる可能性」などを考えて不特定多数の方へ配布は見送っていました。

最近こちらのサイトを知りまして、今回この掲示板で皆様の意見を聞くことができて大変勉強になりました。
皆様のアドバイスをふまえ、但し書きをきちんと添えた上で試しに配布してみようと思います。
貴重なご意見とても感謝しています。どうもありがとうございました。