• 締切済み

<sub>や<sup>タグを使用した箇所だけ、CSSでのフォントカラー指定が反映されない。

お世話になります。 HTMLとCSSでの表示について質問します。 <sub>や<sup>タグを使用した箇所だけ、CSSで指定したフォントカラーが反映されません。 ・ソースは <h2>CO<sub>2</sub>排出削減!</h2> ・CSSは h2{height:27px; line-height:27px; font-size:17px; font-weight:600; color:#283281;} このような指定になってます。 どうにか見出しタグを使ったまま、同じ色指定で下付き文字を使い、しかし<sub>や<sup>には直接フォントカラーを指定しないで解決する方法などありましたら教えてください。 *<sub>や<sup>は、インライン要素であると定義されてますが、この問題に関係してるのでしょうか。。

みんなの回答

noname#39970
noname#39970
回答No.1

>しかし<sub>や<sup>には直接フォントカラーを指定しないで解決する方法 無いんじゃない? h2{height:27px; line-height:27px; font-size:17px; font-weight:600;} h2,h2 sup,h2 sub{color:#283281;}

peche_moon
質問者

お礼

やはり無理ですか。 ありがとうございました。

関連するQ&A

  • 【CSS】フォントサイズや幅や高さの指定値の範囲を教えてください。

    <STYLE TYPE="text/css"> <!-- .sample { font-size: 123px; height: 50px; color: red; } --> </STYLE> たとえばこんなような感じでコードを書いてみたのですが、 font-size: 等で指定するサイズや%値には範囲は存在するのでしょうか。たとえば%値なら0%~100%までなのでしょうか。

  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 2beeブログで行間と文字の間隔を指定したい

    みなさん、こんにちは。 私は2beeのブログを利用しているのですが、行間と文字の間隔をCSSで空けようとすると、改行がおかしくなってしまいます。ちなみに私のヘッダーに打ったタグは… <style type="text/css"> <!-- H1{font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;} H2{font-size:10px; font-weight:lighter; color:#555; line-height:18px; letter-spacing:4px;}--> </style> の2種類です。また、これを使わずに、ボディに <span style="font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;"><!--body--></span> と打っても、行間が揃わず、改行も上手くいきませんでした。 とても困っているので、いい方法がありましたら、ご回答おねがいします。

  • marginを指定した見出し要素の後に段落要素をつけるとmarginが変なことになります。

    CSSとHTMLでホームページを作っています。 ですがなぜかIEの表示のみ、妙な表示になります。 <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します(IEのみ)。 この対策法を教えていただけないでしょうか? ソース(一部を抜粋、少し書き換え)は HTMLは4.01 Traditional(DTDあり)で、 <h3 class="st">ABOUT</h3> <p> ここは×××の管理する、・・・・サイトです。<br> ●●はメインからどうぞ。 </p> <h3 class="st">Update Log</h3> <p> 2009/03/24 ああああああああ<br> 2009/03/23 あああああああああ<br> ああ<br> </p> CSSは h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted} p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;} です。 CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • 一部のパソコンでスタイルシートが読み込まない

    こんにちわ 以下のスタイルシートを使っていますが一部のパソコンで読み込みにいかないような現象が起こっています。 相手のブラウザーはインターネットエクスプローラの6でOSはXPです。 サイトフォルダ内にCSSフォルダーを設けてその中のスタイルシートをいれています。 HTMLソース <LINK rel="stylesheet" href="css/body.css" type="text/css"> スタイルシート↓ h1 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; color:#FFFFFF; } h2 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h3 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } h4 { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } STRONG { font-size:12px; font-weight:100; margin:0px; padding:00px 0px 0px 00px; } em {font-size:12px;line-height:12px;font-weight : normal;normal;margin:0px;} .t0 {font-size:10px;} .t0h12 {font-size:10px;line-height:12px;} .t0h14 {font-size:10px;line-height:14px;} .t0h16 {font-size:10px;line-height:16px;} .t1 {font-size:12px;} .t1h14 {font-size:12px;line-height:14px;} .t1h16 {font-size:12px;line-height:16px;} .t1h18 {font-size:12px;line-height:18px;} .t2 {font-size:14px;} .t2h16 {font-size:14px;line-height:16px;} .t2h18 {font-size:14px;line-height:18px;} .t2h20 {font-size:14px;line-height:20px;}

    • ベストアンサー
    • HTML
  • IEでCSSのアンカー色指定が反映しない

    <style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • フォントと文字サイズを同時に指定するタグ

    gooブログを利用しています。 文字サイズ3でフォントを変更したいのですが、 どのようにタグを合わせればよいのか分かりません。 使用しているタグは下記の通りです。 フォント指定タグ <font face="表示したいフォント">本文</font> 文字サイズ指定タグ <font size="3" color="black" style="line-height:160%;"><b>本文</b></font></font> よろしく御願いします

  • <font color></font>以外でfontカラーを指定する方法

    私はこれまで部分的にフォントの色を変えるとき、<font color></font>を使っていましたが、これから徐々にこの種のタグがサポートされなくなると聞いてあせっています(現在cssを勉強中です)。 <font color></font>以外の方法で部分的に色を変える方法を教えてください。

  • 影つき文字をCSSで指定するタグについて

    さっそく質問なんですが <font style=filter:dropshadow(color=white,offx=1,offy=1,positive=true);width="100%";height="20pt">文字</font> これで影つき文字できると思うんですが、 <BODY>でじゃなく、 CSSで指定?できないのしょうか? (いちいち<BODY>の中でFONTごとに指定するのではなく、 <HEAD>~</HEAD>の中に入れて指定したいんです。) よろしくお願いします。 ちなみにちょっと急ぎです;

    • ベストアンサー
    • CSS
  • cssで最適なfont-sizeの指定は?

    (ブログのカスタマイズ初心者です。過去ログを探しても見つからなかったので、質問させて下さい) cssでのfont-sizeの記述は、どのような形が最適でしょうか? px, em, %, mediamやsmall、その他、単位が色々あって、迷ってしまいます。 pxで指定するのが一般的な気がしますが、IEで文字サイズを変えた時に、変わらないのが不便な気がします。 body {font-size: small;  line-height: 160%; } のような形が良いように思いますが、あまり見かけません。 皆様は、どのようにしていらっしゃるのか、教えて頂けたらと思います。 よろしくお願い致します。