• 締切済み

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

大変申し訳ありません、調べ方が悪いのか望む結果が得られなかった為、質問させてください。 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で動作するとありがたいです。 恐れ入りますが、良い方法ありましたらご教授ください。 よろしくお願いいたします。

  • CSS
  • 回答数3
  • ありがとう数1
回答 全件
それでしたら、それぞれの項目(子孫要素)に擬似要素を追加すればよいだけ…
body.fuga1{ background-position: le…
されたいことがイメージできません。 それぞれの背景は透明なのですか？そ…

みんなの回答

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

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

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} --> </style> <style type="text/css" media="screen"> <!-- div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.section{position:relative;} div.section h2,div.section p,div.section div.section{margin-left:160px;width:auto;min-width:0;} div.section div.section{min-height:100px;margin-top:5px;} div.section div.section p{margin:0;} div.section div.section h3{padding-left:40px;} div.section div.nav{position:absolute;top:0;left:0;width:155px;height:100%;} /* ここから内容によって背景を変える。*/ div.section *{position:relative;z-index:10;} div.products{background-image:url(./images/background/products.png);} div.manual{background-image:url(./images/background/manual.png);} div:before{position:absolute;top:0;left:0;} div:after{position:absolute;bottom:0;right:0;} div.products:before{content:url(./images/icons/product.gif);} div.manual:before{content:url(./images/icons/manual.gif);} div.news:after{content:url(./images/icons/new.gif);} div.old:after{content:url(./images/icons/old.gif);} /* ここまで */ body{background-color:gray;} div.header,div.section,div.footer{background-color:silver;} div.section div.section{background-color:white;} div.section div.nav{background-color:yellow;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- div.section div.nav{display:none;} div.products h3:before{content:url(./images/icons/product.gif);} div.manual h3:before{content:url(./images/icons/manual.gif);} div.news h3:after{content:url(./images/icons/new.gif);} div.old h3:after{content:url(./images/icons/old.gif);} --> ＿</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>

96buibui
質問者

お礼

ご回答、本当にありがとうございます。 私が例に出したものがあまりに簡単なものでしたので、確かにこれであれば、 :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)
回答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 )』という認識でよいですか？？

96buibui
質問者

補足

回答ありがとうございます！ 本当に本当に困っております！！本当にありがとうございます。 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; } のような感じです。 本当に申し訳ありません！ご教授ください！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSの優先順位に関して

    CSSで『後で書かれたものより、より厳密な条件に一致するセレクタによる指定が優先される』という規則は確実ですか？ 例えば .hoge.fuga{color:#00F} .fuga{color:#F00} という順番でスタイル指定されていたとしても、 class="huge fuga" の要素は確実に赤ではなく青になるんでしょうか？

    • ベストアンサー
    • HTML
  • CSSで背景を多重化する方法

    CSSでdivの中の背景を多重化したいと思いまして、 なんとかお知恵を拝借できればと思い投稿させていただきました。 やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。 こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。 【html】 <div class="parent"> <div class="bg_upper"> <div class="bg_lower"> <div class="content"> テキスト・・・ </div> </div> </div> </div> 【CSS】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } <div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは なったのですが、高さは可変なので使えませんでした。 なんとかヒントいただけましたら助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IE8で追加したcss背景画像が表示されません

    新しく追加した背景画像がFireFoxでは表示されるのにIE8だと表示されません。 ↓はソースで、「FILE3.gif'」が表示されません。 ------------------------------------------ <css内より抜粋> -css1.css- h2 { width: OOOpx; height: OOpx; background-repeat: no-repeat; background-position: O% OO%; } ※数値の部分は伏せています。 -css2.css- h2.hoge1{ background-image: url('画像場所/FILE1.gif'); } h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの <jsp内より抜粋> <%@ page contentType="text/html; charset=Shift_JIS"%> <% request.setCharacterEncoding("Shift_JIS");%> ～中略～ <h2 class="hoge3"><font class="none">ホゲ３画像</font></h2> ～以下省略～ ------------------------------------------ 以前からあった背景画像はちゃんと表示されています。 jspで<img src="画像場所/ファイル3.gif">とやれば一応IEでも画像は表示できるのですが、画像の位置がズレてしまうので、この方法はだめそうです。 文字コードはcss、jspともにShift-JISです。 追加した画像はファイル1,2と同じ場所にあります。 また、<h2 class="hoge3">を<h2 class="hoge2">に変更したら、FILE2.gifの画像がIEでも表示されました。（FILE3.gifとFILE2.gifはほぼ同じ大きさです。） どなたか解決策がわかる方、またはどこを調べればいいかわかる方いましたらお願いします。

    • 締切済み
    • CSS
  • CSSで「html」にも背景指定をするのはどのような場合？

    CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？ もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる？と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS
  • CSSで背景の重なり指定

    ページの背景を設定するために body { background: #000000 url(../img/back1.jpg) no-repeat right top; z-index:2; } とし部分的に表示したい背景を .side { background: #000000 url(../img/back2.jpg) repeat; z-index:1; } としています。 やりたいことはbodyで記述した背景を1番前に表示させたいと 思っているのですが.sideに記述した背景が手前に 出てきてしまいます。 これを解決する方法はないでしょうか？ブラウザはIE6.0です。

  • cssについて、レスポンシブな背景指定

    背景を指定し表示させる上で、PCだと何の問題無く表示されるのですが スマホ等画面の小さいでスプレイで見た際、背景画像が等倍では見ず来為、 画面サイズに合わせて縮小させたいと考えています、。 現状では、画面の幅が小さくなり、背景画像が等倍のまま表示されてしまいます。 以下の参考のサイトの場合、スマホの画面に合せて背景が縮小されるようなので、方法自体はあるようなのですが、どの様にすれば良いのか解らず、何か良い方法はありませんでしょうか？ http://jquery.shiftbrain.co.jp/ 記述としては以下の様にかいております。 <section id="section_photo" class="common_section"> <div class="content"> <h2><img src="images/tit_01.png" alt="" /></h2> </div> </section> .common_section { width: 100%; } #section_photo { background-attachment: fixed; background-image: url("../images/bg_section_photo.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; } どうぞよろしくお願いいたします。

  • 複数指定の背景が表示されない

    困っているのでどなたかお力添えをお願いします。 htmlとbodyにそれぞれ別の背景画像を指定しているのですが、 IE6でのみ片方の背景が表示されません。 html { background: url(../images/bg.jpg) repeat center bottom; } body { background: url(../images/header-bg.jpg) repeat-x center top; } どうすれば表示されるようになるでしょうか？ divを使う背景画像の複数指定が上手くいかなかったのでこのやり方をしています。

    • ベストアンサー
    • HTML
  • 背景画像を2枚使いうまく繰り返す方法

    htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか？

    • ベストアンサー
    • HTML
  • 背景と別の画像を右下に固定して表示するには？

    (1)背景を表示して、さらに(2)右下の位置に固定して別の画像を表示することは出来るのでしょうか？ (1)だけなら、BODYタグの中で設定すれば出来ました。 (2)だけなら、某サイトでコピペしたものを使わせてもらい、表示することが出来ました。 しかし、二つを同時にしようとすると、２番目のものしか表示されません。 どうすべきなのか、無理なのか、ご存知の方、教えてください。 ちなみに、(2)のコピペとは以下のものです。スタイルシートというのでしょうか？良くわかりませんが。 <STYLE TYPE="text/css"> <!-- BODY{ background-image:url(gazou.png); background-attachment :fixed; background-repeat: no-repeat; background-position: 100% 100%; } --> </STYLE>

    • ベストアンサー
    • HTML
  • cssで背景画像を記事本文の長さにあわせて自動に引き伸ばす方法。

    宜しくお願いします。 タイトル通りなのですが、 記事背景の画像を記事長さに合わせて自動的に引き伸ばす方法が判らず困っております。 background: url(背景.png) 上記のお尻部分に何か付け足すのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する