- ベストアンサー
CSSセレクタを使用してクラスを一括で適用する方法
naokitaの回答
No.3.8 naokitaです。 複数のページや特定箇所以外にも、 class="label"があって、 特定の箇所の大量に続くspanが想定する場所のspanを class="label"未使用で、他のclass="label"と統一したいって事ですね？ 更に、.label{ } と #view span{ } とを 一箇所のみ（一発/一気）で一元管理したいんですね？ ----- 今現在、２つのセレクタがあります。 .label{ } と #view span{ } この場合、当然、２つの同じ値も存在するので、 変更時は、２カ所の変更が必要だから、一元管理とはいえません。 よって、２つのセレクタを一箇所で統一設定します。 １カ所だけの変更なら、一元管理と言いますね！？ ＞＞あくまで一元管理したいんですよ。 １カ所だけの値を変更すれば、他のHTMLの .label と 特定箇所の #view span を同時に変更は出来る。 セレクタで値を定義するが、値をセレクタで定義は出来ない。 （属性セレクタを除く） だから、 セレクタと同じ値を持つセレクタを同時に定義するって事！ これをCSSの「一元管理」と言う。 つまり、 .label と #view span を同時に指定し、値を統一する事。 .label , #view span{ color:blue;} ■ まずは、下部のソースを表示してから、CSSを変更しましょう。 ↑↑↑↑↑↑↑↑↑ １、下部のソースを表示すると、「青」が見えると思います。 ２、color:blue; を color:green; に一箇所変更すると、 id="view"とid="view"以外のところも変更します。 ※これが、CSSでの「一元管理」です！ このソースで１カ所で「color:green;」と変更できても 一元管理では無いと言うのなら、 動的に出力するしかないです。 class名をインクルードしましょう。 但し、適応させる為に別の動的ソースが必要です。 単に、CSSと同じですが、動的に一箇所で管理出来ます。 また、更に面倒なプログラムで書けば、 ボタン選択で適応させる事も可能。 それも面倒だというなら、XML,XSLで書いて下さい。 http://ja.wikipedia.org/wiki/Extensible_Markup_Language spanで統一させる事すら必要はありませんから。 これならお望み通りの事が出来るでしょう。 ----- <html> <head> <style type="text/css"><!-- .label , #view span{ color:blue;} /* ←ここ１カ所のみ */ .red , #view span.re{ color:red;} --></style> </head> <body> <div id="test"> <h1>CSS一元管理 | 色比較</h1><hr> <h2>以下は、id="view"以外のHTML</h2> <div id="<b>test</b>"> <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> </div> <p>上のHTMLソースが<q><strong>146</strong>文字</q></p> </div><hr> <div id="view"> <h2>以下は、id="view"</h2> <div id="<big class="re">view</big>"> <span>青</span> | <span class="re">赤</span> | <span>青</span> | <span class="re">赤</span> | <span>青</span> </div> <p>上のHTMLソースが<q><strong>104</strong>文字</q></p> </div><hr> <h3>一箇所の値を変更するだけで、全部適応されますが・・・</h3> <p>あとは、頭を柔軟に、貴方のHTML,CSSの書き方次第で、どうにでもなります。</p> </body> </html>
関連するQ&A
- 文章のマークアップについて
<p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。</p> <p><span class="blue">「あ…、雪だ」</span></p> ↑このような使い方は誤り…。 かと言って <div class="red">「今日は寒いね」</div> 彼はそう言って笑った。<br> ←この部分だけCSSで指定したフォントスタイルが適用されない。 <div class="blue">あ…、雪だ」</div> <div class="red">「今日は寒いね」</div> <div> 彼はそう言って笑った。<div> <br> <div class="blue">「そうだね」<div> ↑これでは少しこの会話が続いた時に「div病(？)」テキストに書いてありました。 全て同じフォントスタイルを使い且つ１行空けたい場合はどうマークアップすれば良いのでしょうか。 HTML初心者のweb作家です。 タグと具体例を示して頂けるとありがたいです。
- ベストアンサー
- HTML
- CSSの子孫セレクタの使い方について
CSSでsatelliteクラスの中に含まれるP要素のフォントサイズを一段階小さくしたいのですが、 div#satellite p{ font-size: small; } と書いても反映されません。 どのように書けばよろしいのでしょうか。 回答お願いします。
- ベストアンサー
- CSS
- Dreamweaver8でＣＳＳをつかったときのズレについて
Ｄｒｅａｍｗｅａｖｅｒ8をつかっていて、 ＣＳＳでレイアウトをし、コンテンツの中にもdivやspanを頻繁につかっているのですが、Ｄｒｅａｍｗｅａｖｅｒ8内のデザインビューだとデザインがずれてしまっているのに、プレビューすると全くずれていません。 タグ上でやることが多いので、おそらく間違っていないとは思うのですが、ソフト上のデザインビューで見たときも、ブラウザでみたときのように正常にする方法はないのでしょうか？
- ベストアンサー
- HTML
- 外部ＣＳＳからクラスを呼び出すとき
ＣＳＳスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部ＣＳＳファイルを読み込ませて統一したいと思っています。 Ｈ１などのＨＴＭＬタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをＨＴＭＬソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部ＣＳＳの場合もこのような形で記述してよいのでしょうか？ ホームページビルダーを使っていて、上記のように指定すると、ＣＳＳがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか？ どなたか是非アドバイスを宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- CSSで定義していないclass指定を削除したい
CSSで定義していないクラスを、HTML内に多数記述しているのですが、それを簡単に特定出来る方法はありますでしょうか。 例をあげますと、 [HTML] <div class="test01">XXXXXXXXXX</div> [CSS] .test000 { font-size: 18px; } みたいな状態で、HTMLで呼び出しているclass名がCSSで定義していないのです。 CSSとHTMLを照らし合わせ、１個づつ確認するのが確実だとは思うのですが、1000ページ程度あり目視確認は現実的ではないので、、、。 アプリケーションはDreamweaverをつかっています。 どなたか方法をご存知の方がいらっしゃいましたら、宜しくお願いします。
- 締切済み
- HTML
- CSSの使い方の流儀？
先日業者にホームページの作成を依頼したところ、 子孫セレクタを駆使したCSSを使ったページが できあがってきたのですが・・・ たとえばこんな感じ <div id="header"> <div class="block1"> <span>・・・・・・</span> ・・・・・・・ </div> <span>・・・・・・</span> ・・・・・・・ </div> <div id="contents"> <div class="block2"> <span>・・・・・・</span> ・・・・・・・ </div> <span>・・・・・・</span> ・・・・・・・ </div> これに対して CSSでこんなスタイルが設定されています（セレクタ部のみ抜粋） #header .block1 #header .block1 span #header span #contents .block2 #contents .block2 span #contents span 私だったらわざわざ複雑な子孫セレクタを使わずに、 個々にクラスかIDを設定すると思うのですが・・・ また、ただ画像が貼ってあるだけと思ったら、 CSSでspanの背景画像として貼ってあったり、 ただの仕切り線と思ったら、 やはりdivのボーダーラインを使っていたり・・・ こういう作りって一般的なのでしょうか？ あるいは、何か利点があるのでしょうか？ ブログのカスタマイズなどだと、元のHTMLを自分で直せない場合が多いので、 こういうコトをすることが良くある、というのはわかるのですが・・・ あまりにHTMLのタグの構造とCSSが密接に絡んでいて、 ほんの一文追加しようとしただけで苦労していまして・・・ なんでこういう書き方なのかな・・・と、 不思議に思っています。。
- 締切済み
- HTML
- ＣＳＳで、わからないところがあります
ＣＳＳを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 ＣＳＳのはフォルダを作っています。 default.css import.css style.css の3つです。 内容は下に書いています。 default.cssには @charset "UTF-8"; body { margin: 0; padding: 0; background-color:#FFFFFF; text-align:left; } import.cssには @charset "UTF-8"; /* CSS Document */ @import "default.css"; @import "style.css"; style.css これは他のＣＳＳと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか？style.css1つにまとめてもいいのではないでしょうか？ 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか？ 質問3 ＨＴＭＬ側にはShift_JISとなっていますが、ＣＳＳは@charset "UTF-8";となっており、これって間違いではないのでしょうか？ ネットで調べたら、文字化けの要因になると書いていました。 これはあっているのでしょうか？ ＨＴＭＬ側 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 質問4 <div id="header" style="background-image:url(img/header.jpg);"> <div id="a"> <div id="b"> <h1 id="a">猫の気持ち</h1> <div id="c"> <span class="blue big3 b">猫の気持ち</span> </div> というソースがありました。 <span class="blue big3 b">猫の気持ち</span> の中の、blue big3 bというの指定が見当たりません。 blue big3 b という各自の指定はＣＳＳでされています。 3つを合わせて指定することができるのでしょうか？ それともこれってタグですか？ <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 ＣＳＳの簡単なサイトを見てもやはりよく分からないのです。
- ベストアンサー
- HTML
- CSSのタグについて
今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#"> <em><img src="album/img/photo.jpg" /></em> <span>写真１</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 （※一部抜粋） --------------------------------------------- div#album ul li a em, div#album ul li a span { display: none; } --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか？ それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSについて
CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか？ divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか？ CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか？
- 締切済み
- HTML
- CSSでクラス内にクラスを横並びに配置したい
CSSでクラスを使用してレイアウトしているのですが、 クラス内に小さなクラスを二つ横並びに配置したいのですが改段落されてしまいます。 IDだと可能なのですがクラスではできません。 クラスにしたい理由は、同じdivタグを1ページに３０個以上使用したいためです。
- 締切済み
- HTML
補足
ご回答ありがとうございます。 また、丁寧なサンプルまでご提示頂きありがとうございます。 さて、サンプルも確認させて頂きましたが、やはり要件を満たす事が出来ないようです。 前回の補足でも書きましたがあくまでも「.labelという宣言」があり、それを 「別のセレクタでも適用したい」という話ですので、「#view spanに同じ内容を記述」という時点でアウトなんです。 ちなみに頂いたサンプルだと「.label , #view span{ color:blue;}」をcssファイルに記載した場合、 そのcssを読んだhtmlファイルで#view spanまでも適用されてしまいますのでその点でも厳しいかと思います。 今回のご回答を確認し、私のやりたい事はcssでは不可能であると判断致しました。 長々とお付き合い頂き、誠にありがとうございました。