CSS classとidの使い方

前へ 次へ
このQ&Aのポイント
  • CSSのclassとidを使って、<p></p>内の文をitalicに、<span>内をboldかつ赤色にしたいですが、うまく変更できません。どこを修正すれば良いでしょうか？
  • <p></p>内の文をitalicに変更するには、<p>タグにclass属性を追加し、そのクラス名をCSSで指定する必要があります。同様に、<span>タグにid属性を追加し、そのid名をCSSで指定することで、<span>内の文をboldかつ赤色に変更できます。
  • 具体的には、<p>タグにclass属性を追加して、そのクラス名をCSSの.profileクラスで指定し、<span>タグにid属性を追加して、そのid名をCSSの#attentionセレクタで指定します。CSSの.profileクラスにはfont-styleプロパティをitalicに、#attentionセレクタにはfont-weightプロパティをboldに、colorプロパティをredに指定すると、<p>内の文がitalicに、<span>内の文がboldかつ赤色に変更されます。
回答を見る
  • ベストアンサー

css　classとidの使い方

あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> 　</BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }

  • isman
  • お礼率84% (22/26)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • Safe_Mode
  • ベストアンサー率48% (1329/2725)
回答No.1

提示されたソースとスタイルシートをIE8で表示させて見ましたが、特に問題なく表示されますね。 ただ、#attention内のfont-style: italic; は不要だと思いますけど。 ソースやスタイルシートを修正していて上書き保存とリロードが前後して上手くいってなかったなどということはありませんか？

isman
質問者

お礼

今また確認してみたところ、Safe_Modeさんの言うように正しく表示されました。もしかして２つのファイルの間で上書き保存がずれてたのが原因かもしれません。。attention内のitalicもついでに直しました。 わざわざ確認していただきありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSで使う　CLASSに関して

    こんにちは。ＣＳＳに関しての質問なのですが。 外部スタイルシートで登録していて <span class="c5"> 文字<br> </span> といった設定をしていて 外部スタイルシートで .c5 { color:#FF9934; font-weight: bold; } といった設定をしています。 しかしIEでは正常にカラーが変わって表示されるのですが、FireFoxでは表示されません……。 IEよりもFireFoxの方がタグ等に対して厳密な解釈をしていると思うのですが、この設定は何がおかしいのでしょうか？ どなたかわかる方、回答をよろしくお願いします。

    • ベストアンサー
    • HTML
  • クリックした際にCSSが変更できない jQuery

    jQueryについて詳しい方教えていただけませんでしょうか？ クリックをした際、スライドさせるように作っているのですが、同時にspanのCSS変更（arrowFD→arrowFR）もやりたいのですがなぜかうごきません・・・ ＜jQuery＞ $(window).load(function(){ $('#faq .answer').not(':first').hide(); $('#faq .question').click(function() { if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); $("span.arrowFD").html('<span class="arrowFR"></span>'); //★ホントは、CSSだけ変更したい } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } }); });//]]> ＜CSS＞ .question { padding:5px; font-weight:500; font-family: メイリオ; font-size:14px; border:1px solid #ddd; background:#eee; cursor: pointer; } .answer { padding:25px; font-family:MS UI Gothic; font-weight:500; font-size:13px; border:1px solid #ddd; } /* 三角矢印を前（Front）に（右向き：Right）でつける */ .arrowFR { position:relative; top:0; left:0; padding-left:18px; } .arrowFR:before { content: ""; position: absolute; top: 3px; left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #000000; } /* 三角矢印を前（Front）に（下向き：Down）でつける */ .arrowFD { position:relative; top:0; left:0; padding-left:18px; } .arrowFD:before { content: ""; position: absolute; top: 3px; left: 2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000000; } ＜HTML＞ <div id="faq"> <div class="question" id="tenmetsu"> <span class="arrowFD"></span> <span style="font-weight:bold">｜</span> 香川真司 </div> <div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 　長友佑都 </div> <div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span>　本田圭佑 </div> <div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div> </div>​

  • 文章のマークアップについて

    <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
  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSSで作ったテーブルのレイアウトが崩れ困っています

    テーブルで作成内容をCSSで作成中ですが勉強不足でレイアウトが崩れてしまいます。 テーブルの指定内容を以下のCSSに置き換えています table→dn2 tr→d0 td→d1・d11・d12・d2・d3　２文字目が列の順番です 　d3（最後の列）は、float:leftの指定が無いのに回り込むように表示されてしまいます。 以下のように記述しています　下の改行後の内容のように表示したいのですが <html><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css;"> <style type="text/css"><!-- .dn2 {position:static;font:17px/48px serif;width:477px;} .d0 {position:static;} .d1 {margin-left:17px;width:189px;vertical-align:text-top;font:17px/48px serif;float:left;} .d11 {margin-left:34px;width:17px;vertical-align:text-top;font:17px/24px serif;float:left;} .d12 {width:154px;vertical-align:text-top;float:left;} .d2 {width:99px;font:17px/24px serif;vertical-align:text-top;float:left;} .d3 {width:162px;font:17px/48px serif;vertical-align:text-top;} .p08 {font:13px/15px serif;} .p14n {font:17px/18px serif;} .mb18 {margin-bottom:15px;} --></style></head> <body><div class="dn2"> <div class="d0"><div class="d1"><div class="p08">姥ケ谷</div><div class="p14n">　下田弐拾八歩</div></div> <div class="d2">拾壱間<br>弐間半</div> <div class="d3"><div class="p08">南沼上村</div><div class="p14n">　伊左衛門</div></div></div> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">田廿三歩</div> <div class="d2">四間半<br>五間</div> <div class="d3"><div class="p08">川合村</div><div class="p14n">長三郎</div></div></div> <div class="d0"><div class="d1">　下畑拾六歩</div> <div class="d2">四間<br>四間</div> <div class="d3">　同　人</div></div><br> <!-- 以下の内容のように表示したいのですが--> <div class="d0"><div class="d11">下<br>下</div> <div class="d12">畑六歩</div> <div class="d2">四間<br>壱間半</div> <div class="d3"><div class="p08">同村</div><div class="p14n">曽右衛門</div></div></div> <div class="d0"><div class="d1">　下畑拾五歩</div> <div class="d2">五間<br>三間</div> <div class="d3">　同　人</div></div></div> </body></html> ie7 バージョン7.0.5730.11です 宜しくお願いします。

  • スタイルシートで指定した大きさにならない・・・

    スタイルシートにチャレンジしているのですが、 文字の大きさが指定したとおりになりません。 以下のようにした場合、 ＢＯＤＹの文字を１２ＰＸにしているのですが、 １４ＰＸの文字の方が大きく見えてしまいます。 ---------------------------------------------- <HTML> <HEAD> <TITLE>CCS勉強</TITLE> <STYLE type="text/css"> <!-- BODY{ font-size : 12pt; } .16 { font-size: 16px ; } /* 16 */ .14 { font-size: 14px ; } /* 14px */ .10 { font-size: 10px ; } /* 10px */ --> </STYLE> </HEAD> <BODY><SPAN class="16">16pxの文字</SPAN> <BR> <SPAN class="14">14pxの文字</SPAN><BR> <SPAN class="10">10pxの文字</SPAN> <P>ＢＯＤＹのもじ12px</P> </BODY> </HTML> ---------------------------------------------- 初心者なのでどこが間違っているのかよく分からず 困っていますので、ご存知の方がおられましたらよろしくお願いします。

  • スクロールバーが勝手に表示される

    htmlでサイトを作ったとき、スクロールが表示されなくてもいいページなのになぜか下の方に20行ほどの空白が出来てしまい、スクロールが表示されてしまいます(更新ボタンを押すと正常に戻ります) ページは下記のような記述です。(cssは外部指定です) <html> <head> <title>タイトル</title> <link rel="STYLESHEET" href="style.css" type="text/css"> </head> <body><div align="center"> 画像<br> <br> <p> 文章 </p> <br> <span class="p3"> 文章</span> </div> </body> </html> 原因のわかる方がいらっしゃいましたら教えて頂ければ幸いです。よろしくお願いします。

  • ネット上で見る事が出来ない・・・・

    <html> <head> <title>スタイルシート</title> <style type="text/css"> .bold｛font-weight:bold;} </style> </head> <body> <p class="bold" ようこそ ＜ｐ＞ 私のホームページへ </body> </html> ↑これのどこがおかしいのですかね？ ＨＰを見る事が出来ないのですが

  • HTMLとＣＳＳ

    ＣＳＳで、文字に影をつけようと思っても、プログラムを組んでもうまくいきません。他（ＣＳＳで文字に色をつける）のを組むと、上手くいきますが、影だけが失敗します。 他のＣＳＳが動いたって事は、ＣＳＳの基本は合っているので、多分、 影のＣＳＳタグが間違っていると思います。 使ったタグは下記で。 省略 <STYLE TYPE="text/css"> <!-- .ts1 {text-shadow:3px 3px} .ts2 {text-shadow:red 3px 3px;} .ts3 {text-shadow:red 3px 3px 2px;} --> </STYLE> </HEAD> <BODY> <SPAN CLASS="ts1">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts2">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts3">text-shadow</SPAN><BR><BR> </BODY> </HTML> 上記で失敗したので、このタグもつかいました td { filter:dropshadow (color=red ,offx=3 ,offy=3 ,positive=true) ; } 何処が原因でしょうか？

  • CSSの正しい記述の仕方

    CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか？ .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか？ 気にしすぎでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する