CSSテクニックコミュの画像の一部のカラーをCSS指定できますか？！

上手いタイトルが思いつかないで、
説明が解かりにくくてすいません。

仕事で頼まれているんですが、
例えば、header部分の画像のカラーをcssで指定すると、
カラーが変わったり、テキスト部分のフォントの種類が
変更できると聞いたのですが、
作成した画像をどのように指定すると、
そういう可変ができるのでしょうか？
私がスクールで習ったのは、例えばナビボタンだったら、
マウスオーバーボタンを又別に用意しますよね？
それを1つのボタンを使ってｃｓｓで色とかを変えるってことらしいですが・・・可能ですか?！
宜しくお願いします。

コメント(14)

最初
全て
最新の40件

[1] mixiユーザー 08月09日 14:57

画像の中にうめこまれてる文字とかの色はさすがに変えれないと思いますが・・。ただ、画像を背景にして、その上にテキストを置いて、そのテキストの色を変更する、という形だったら可能だと思いますよ。

[2] mixiユーザー 08月09日 15:08

スクールで習った方法というのは、
Javascriptの代わりにcssを使用して
マウスオーバーさせる方法じゃないですかね。

[4] mixiユーザー 08月09日 17:28

>えどさんへ
レスありがとうございます。テキストは画像の上に載せることにします。

>けろりさんへ
レスありがとうございます。スクールでは、それぞれの画像を用意してというやり方でしたが、
会社でやってほしいというのは、画像を書き出すときに？
（うまく説明できないのですが）ある一部分の色を可変できるように設定することができるというのです。

>ゆうぼんさんへ
レスありがとうございます。それは、背景の一部分だけのカラーを変えることは可能でしょうか？もし可能なら、このページはこの部分は青でとか、次のページは緑でとか、ボタンはひとつでCSSで色を変更できますでしょうか？

[6] mixiユーザー 08月09日 19:16

ロールオーバーで色を変えるのと、ページによって背景色を変えるのは全く別のことですよ。

具体的にどういう挙動にしたいのかよくわからないので、サンプルになりそうなサイトを提示してもらうか、簡単な絵を描いてもらった方がいいと思いますが。

[7] mixiユーザー 08月09日 19:27

http://edo-freiheit.sakura.ne.jp/eblog_sample/070809/

ちょっとサンプルを作ってみました。
こういうことかな？

ひとつの透過した画像を用意して、
各色についてはCSSで指定しています。
（詳しくはソース見てください）

ただ、IE6だけはそのままではPNG画像を正常に読み込んでくれないので、少し手間がいりますが・・・。

[8] mixiユーザー 08月09日 19:31

Javascriptなんじゃ？
なんだかcssでは不可能っぽい感じですが。

どっちにせよ、cssで可変するなら、その色分の要素や画像が必要です。

ボタンひとつでcssを切り替える（例えば青主体のページだったのをボタンひとつで赤主体に変える）ことは可能ですが、これもたしかJavascriptが必要だったような。

[9] mixiユーザー 08月09日 20:51

言ってること良くわからないけど、こういうこと?
まあ、こんな簡単なことなら皆さんご存知だとは思いますが。

.navi{
color: blue;
background-image: url("a.jpg");
}
.navi:hover{
color: red;
background-image: url("b.jpg");
}

[11] mixiユーザー 08月09日 22:26

グラデ背景の色指定をbackground-colorから指定したい
という流れですが合ってます？汗

▼ベタの上にシステムフォントの場合

1-1.フォントの色だけを変えたい場合
　a { color: #c00; }
　a:hover { color: #ccc; }

1-2.背景色だけを変えたい場合
　a { background: #c00; }
　a:hover { background: #ccc; }

▼ベタの上にデザインフォントの場合

2-1.フォントの色だけ変えたい場合
　文字の箇所を透過でつくります。
　白抜きじゃなくて透過抜きと考えると分かりやすい。
　<p><a><img></a></p>
　a { background : black; } a:hover { background: red; }
　透過の画像文字にはアンカーの背景色が出ます。

2-2.背景色だけを変えたい場合
　1-1と同じです。2-1も同様ですが、
　色の変化が激しい場合、gifはアルファが効かないので
　アンチエイリアスの箇所が汚くなります。
　デザインのクオリティを考えるなら画像を二枚用意した方が良いです。
　pngはアルファが効きますが、要javascript。

▼グラデで色指定はcssからしたい
3-1.背景色だけを変えたい場合
　pngを使うので要javascript。
　ie6用で代替にgifを使用するなどが多く使われていますが、
　ユンさんのテクニックを使ったほうが綺麗に表示されます。
　http://blog.l-xs.com/yungsang/2006/12/png_alpha_filter_ie7.html
　グラデではありませんが、
　添付画像がユンさんのテクニックを使用して動作確認用にデザインしてみたものです。
　結構思いのままのhtmlに出来ます。
　ソースが欲しければ、言ってください。（会社のPCにしか入ってない・・。）

3-2.デザインフォントの色だけを変えたい場合
　3-1を応用、2-1のpngバージョンです。
　pngのアルファ情報でジャギジャギが無いため、
　綺麗に表示されると思います。

[12] mixiユーザー 08月09日 23:33

>皆さまへ

いろいろ沢山の丁寧なアドバイス有難うございました。
どれが実現したいことと近いのかが、いまいちよく解かりませんが、（すいません）
1つづつ、検証してみたいと思います。

上手く質問を伝えられないながら、
皆さまにいろいろ丁寧に書いていただき、感謝です。
また宜しくお願い致します。

[13] mixiユーザー 08月10日 01:07

uriちゃんさん＞
もう少し、仕様をまとめてみてください。
そしたら、みなさんも適切なアドバイスが出来ると思いますよ。

まず、1番最初にどのように表示されているのか？
２）マウスオーバーでどういう動きをしたいのか？
３）マウスアウトでどういう動きをしたいのか？

こういった要求仕様をまとめることをRPF(Request For Proposal)といいますが、これがないと、技術はついていきませんです。
どんなときに、なにがおきて欲しいのかを箇条書きにまとめてみましょう。
お願いいたします。

[14] mixiユーザー 08月10日 04:08

求められている機能が、人にきちんと説明できない程度にしかイメージできないとすると、どんなアドバイスをもらっても実現は難しいと思います。

まずはクライアントと話し合って、それがどういう状態なのかを人に説明できる程度にはイメージできるようにしましょう。

その上で、CSSのみで可能なのか、クライアントサイドかサーバサイドのスクリプトを使うほうがいいのか、はたまた実現は無理なのか、が初めて判断できると思います。

ログインすると、みんなのコメントがもっと見れるよ