• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:cssで定義したクラス情報をcssセレクタ内で使用)

CSSセレクタを使用してクラスを一括で適用する方法

abacabuの回答

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.4

趣味でWEBサイトを作ってる者です。 <span>が仮にその色を変える対象しかないなら span{......}でよいかと。 もしべつにもあるなら他の回答者様のような div#view span{.....} ←質問にも特にid指定、class指定なかったので。 一応「id」と「class」の使い分けは、 「id」.....<div id="header">など他に出現しない使い方。 「class」......<p class="note emph">など複数指定する場合         p.note{color:red} p.emph{text-decoration:underline} どちらも指定出来ますがこの様な感じで特定のspanにだけidもしくはclassをしていする。 こんなかんじでどうですか? ちなみに<div id="note">→div#note{....} <div class="note">→div.note{....} となります。 知ってたらごめんなさい。

himura99
質問者

補足

ご回答ありがとうございます。 すいません、質問内容がまとまっていなかったので整理します。 .label { font-size:95%; color:blue; } 上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから 使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。 これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは 大量にあるためこれはなるべく避けたいのです。 なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを 指定するというような方法が無いのかが知りたいというのが主旨です。

関連する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病(?)」テキストに書いてありました。 全て同じフォントスタイルを使い且つ1行空けたい場合はどうマークアップすれば良いのでしょうか。 HTML初心者のweb作家です。 タグと具体例を示して頂けるとありがたいです。

    • ベストアンサー
    • HTML
  • CSSの子孫セレクタの使い方について

    CSSでsatelliteクラスの中に含まれるP要素のフォントサイズを一段階小さくしたいのですが、 div#satellite p{ font-size: small; } と書いても反映されません。 どのように書けばよろしいのでしょうか。 回答お願いします。

    • ベストアンサー
    • CSS
  • Dreamweaver8でCSSをつかったときのズレについて

    Dreamweaver8をつかっていて、 CSSでレイアウトをし、コンテンツの中にもdivやspanを頻繁につかっているのですが、Dreamweaver8内のデザインビューだとデザインがずれてしまっているのに、プレビューすると全くずれていません。 タグ上でやることが多いので、おそらく間違っていないとは思うのですが、ソフト上のデザインビューで見たときも、ブラウザでみたときのように正常にする方法はないのでしょうか?

    • ベストアンサー
    • HTML
  • 外部CSSからクラスを呼び出すとき

    CSSスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部CSSファイルを読み込ませて統一したいと思っています。 H1などのHTMLタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをHTMLソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部CSSの場合もこのような形で記述してよいのでしょうか? ホームページビルダーを使っていて、上記のように指定すると、CSSがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか? どなたか是非アドバイスを宜しくお願い致します。

  • CSSで定義していないclass指定を削除したい

    CSSで定義していないクラスを、HTML内に多数記述しているのですが、それを簡単に特定出来る方法はありますでしょうか。 例をあげますと、 [HTML] <div class="test01">XXXXXXXXXX</div> [CSS] .test000 { font-size: 18px; } みたいな状態で、HTMLで呼び出しているclass名がCSSで定義していないのです。 CSSとHTMLを照らし合わせ、1個づつ確認するのが確実だとは思うのですが、1000ページ程度あり目視確認は現実的ではないので、、、。 アプリケーションはDreamweaverをつかっています。 どなたか方法をご存知の方がいらっしゃいましたら、宜しくお願いします。

  • 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が密接に絡んでいて、 ほんの一文追加しようとしただけで苦労していまして・・・ なんでこういう書き方なのかな・・・と、 不思議に思っています。。

  • CSSで、わからないところがあります

    CSSを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 CSSのはフォルダを作っています。 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 これは他のCSSと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか?style.css1つにまとめてもいいのではないでしょうか? 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか? 質問3 HTML側にはShift_JISとなっていますが、CSSは@charset "UTF-8";となっており、これって間違いではないのでしょうか? ネットで調べたら、文字化けの要因になると書いていました。 これはあっているのでしょうか? HTML側 <!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 という各自の指定はCSSでされています。 3つを合わせて指定することができるのでしょうか? それともこれってタグですか? <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか? 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 CSSの簡単なサイトを見てもやはりよく分からないのです。

    • ベストアンサー
    • HTML
  • CSSのタグについて

    今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#">  <em><img src="album/img/photo.jpg" /></em>    <span>写真1</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で効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。

  • 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を指定していると考えるのでしょうか?

  • CSSでクラス内にクラスを横並びに配置したい

    CSSでクラスを使用してレイアウトしているのですが、 クラス内に小さなクラスを二つ横並びに配置したいのですが改段落されてしまいます。 IDだと可能なのですがクラスではできません。 クラスにしたい理由は、同じdivタグを1ページに30個以上使用したいためです。