締切済み

cssで複数背景を別セレクタ風に制御

2014/06/09 11:34

大変申し訳ありません、調べ方が悪いのか望む結果が得られなかった為、質問させてください。 cssで複数backgroundを設定できると思いますが、これを別セレクタ（のように）制御可能でしょうか？例えば、 body{background:url(hoge.png);} body.fuga1{background:url(fuga1.png);} body.fuga2{background:url(fuga2.png);} body.fuga3{background:url(fuga3.png);} とすると、勿論<body class="fuga1">には、fuga1.pngの背景だけがレンダリングされます。これを、hoge.png＋fuga1.pngの背景を設定、つまりbackground:url(fuga1.png),url(hoge.png);の状態にしたいのです。また、<body class="fuga1 fuga2 fuga3">の可能性もあり、この場合は、background:url(fuga3.png),url(fuga2.png),url(fuga1.png),url(hoge.png); として出力されたいです。※各bgは位置が被らないので順番は問いません。純粋なセレクタのみで対応しようとすると、 body{} body.fuga1{} body.fuga1.fuga2{} body.fuga1.fuga3{} body.fuga1.fuga2.fuga3{} body.fuga2{} body.fuga2.fuga3{} body.fuga3{} と、管理しづらく、また、fuga4が増えた場合にメンテナンス工数が多く発生する為、可能であれば、上記のようにマージされた結果を出力させたいです。グループ内画面なので、レガシー無視で問題ありません。 calc利用OK、sass利用OKです。※可能であればjsは利用無しでいきたいです。 IE、Chrome、Firefoxのそれぞれ最新verで動作するとありがたいです。恐れ入りますが、良い方法ありましたらご教授ください。よろしくお願いいたします。

96buibui
お礼率91% (57/62)

CSS
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/09 16:50 回答No.3

それでしたら、それぞれの項目(子孫要素)に擬似要素を追加すればよいだけでは？？先の例で言うと、印刷用スタイルシートのh3のように・・あるいは、それぞれの子孫要素に背景をつけるとか・・　HTMLがわからないので、具体的には示しませんが、方法はあるかと思います。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/09 15:30 回答No.2

body.fuga1{ background-position: left bottom, left top; } body.fuga2{ background-position: right bottom, left top; } body.fuga1.fuga2{ background-position: right bottom, left bottom, left top; } でおよその見当がつきました。　方法はいくつもありますが、具体的な方法はHTMLの詳細が分からないとベストな方法はわかりません。この場合、CSS3の複数背景画像を使用しなくても内容の追加で十分だと思います。＞管理しづらく、また、fuga4が増えた場合にメンテナンス工数が多く発生する為、　これは、HTMLがまずいからです。DIV要素がclass属性と併用して文書に構造を付加するために使用されていれば、HTMLもスタイルシートも管理しやすくなるはずです。下記は使いまわしのサンプルですが・・ ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA入力でチェック済みのHTML4.01 + CSS2.1です。 ★HTMLソースを見てもスタイルシートを見てもメンテナンスは簡単でしょう。HTML見なくてもスタイルシートかけるはずです。 ★IE8以降なら、ディスプレイ幅に関係せず利用できるはず。スマホでも。 ★印刷には別のスタイルが適用されます。(お試しを) ★タブは＿に置換してあるので戻す。 ★用意する画像　・repeatする背景画像 ./images/background/products.png、./images/background/manual.png 　・配置するアイコン画像 40px×40px 　./images/icons/new.gif、./images/icons/old.gif、./images/icons/product.gif、./images/icons/manual.gif <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css">  </style> <style type="text/css" media="screen">  ＿</style> ＿<style type="text/css" media="print">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section products news"> ＿＿＿<h3>1項見出し</h3> ＿＿＿<p>製品情報新製品</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section products old"> ＿＿＿<h3>2項見出し</h3> ＿＿＿<p>製品情報旧</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section manual news"> ＿＿＿<h3>3項見出し</h3> ＿＿＿<p>マニュアル新製品</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section manual old"> ＿＿＿<h3>4項見出し</h3> ＿＿＿<p>マニュアル旧</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section products"> ＿＿＿<h3>5項見出し</h3> ＿＿＿<p>製品情報</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

質問者

お礼 2014/06/09 16:24

ご回答、本当にありがとうございます。私が例に出したものがあまりに簡単なものでしたので、確かにこれであれば、 :before、:after要素でアイコンが出せるレベルなのですが、実際は擬似要素2つでは数が足りません。。。またも“例えば”で恐縮ですが、会員情報に (1)性別（.man/.woman） (2)年代（.age10/.age20/.age30/.age40） (3)居住地（.kanto/.kansai/.toukai） (4)結婚（.marriage/.single） (5)職業（.regular/.part/.nojob）の情報があったとします。その際、ログインした会員の情報を見て、女性/20代/関東在住/既婚/無職だった場合、 <body class="womaen age20 kanto marriage nojob">とし、 bodyのベースであるmain_bg.pngをrepeatで、それ以外をno-repeat/repeat-y/repeat-xのどれかで表示させたいのです。（※技術的にできるものにデザインを合わせ予定だった為、どれでも検討していました）空のdivなり何なり用意しておいて、phpでその中に該当する画像を出力する等は容易いのですが、正直、“ただの模様”に要素1つ利用するのが気持ち悪いという理由でした。「複数background指定できるんだから、 sassあたりで適当にmixin作ったらマージして吐き出せるんじゃね？」と、思ったのですが、上手くいかず。。。諦めて空のdiv用意するか、そもそもの要求仕様に対して、現実的では無い旨を伝える方向に持って行こうと思います。ご回答ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/09 12:15 回答No.1

されたいことがイメージできません。それぞれの背景は透明なのですか？それを重ねるということですか？背景画像のサイズは？？background-sizeなどで伸縮させるのか？また位置やリピートは？ＨＴＭＬ・fuga1、とかfuga2とか何か意味があるのですか？？　<div class="section products new"></div> 　<div class="section products old"></div> 　<div class="section manual new"></div> 　　というふうに、『　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』という認識でよいですか？？

質問者

補足 2014/06/09 12:43

回答ありがとうございます！本当に本当に困っております！！本当にありがとうございます。 hoge、fugaは「任意の文字列」の意図です。お察しのとおり、.newや.oldのようなclass名が付きます。 hoge.pngはrepeatです。 fuga[n]はno-repeatで、それぞれ任意の位置に配置したいです。本当に例えばですが、 body{ background-image: url(hoge.png); background-repeat: repeat; background-position: left top; } body.fuga1{ background-image: url(fuga1.png), url(hoge.png); background-repeat: no-repeat, repeat; background-position: left bottom, left top; } body.fuga2{ background-image: url(fuga2.png), url(hoge.png); background-repeat: no-repeat, repeat; background-position: right bottom, left top; } body.fuga1.fuga2{ background-image: url(fuga2.png), url(fuga1.png), url(hoge.png); background-repeat: no-repeat, no-repeat, repeat; background-position: right bottom, left bottom, left top; } のような感じです。本当に申し訳ありません！ご教授ください！