なぜこのCSSはaタグに適用されないのか

前へ 次へ
このQ&Aのポイント
  • 要素名.クラス名で指定した「要素以下の指定クラス」が適用されないため、aタグにcls1クラスが適用されません。
  • 正しく適用するためには、div.cls1と指定する必要があります。
  • 記述方法を間違えている可能性があるため、確認する必要があります。
回答を見る
  • ベストアンサー

このcssが適用されない理由を教えて下さい

下のcssはaタグにcls1クラスが適用されません。 div.cls1を.cls1とすると適用されます。 要素名.クラス名で「要素以下の指定クラス」を対象に出来る筈なのですが 何か記述方法を間違えているでしょうか。 ここから<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <html> <head> <style> div.cls1 { display: block; border: 1px solid red; width: 200px; height: 100px; } </style> </head> <body> <div> <a class="cls1" href="www.google.co.jp">google</a> </div> </body> </html> ここまで<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  • CSS
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

divの次に半角が「有る/無い」で意味が違う・・・ 半角が有る ＝ 「～の中の」って意味 半角が無い ＝ 「～の」って意味 div.cls1 { } この場合のHTMLは、 <div class="cls1"><a href="www.google.co.jp">google</a></div> の場合にcls1のdivをどうするかって話。 div .cls1 { } この場合のHTMLは、 <div><a class="cls1" href="www.google.co.jp">google</a></div> の場合に、cls1のaをどうするかって話。 div.cls1 a{ } この場合のHTMLは、 <div class="cls1"><a href="www.google.co.jp">google</a></div> の場合に、cls1のdivの中のaをどうするかって話。

ygn001
質問者

お礼

ご回答ありがとうございます。 そういう事なんですね。やり方を少し勘違いしていたようです。

その他の回答 (1)

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

セレクタの書き方を復習しましょう。 プロパティなんかより先に覚えないと、a要素にいちいちidを振るなんて酷いものになりますよ。 .はクラスセレクタですが、それより前に覚えなきゃならないのは 全称セレクタ タイプセレクタ 子孫セレクタ 兄弟セレクタ 属性セレクタ 　　属性セレクタの一種であるクラスセレクタ 一意セレクタ 擬似クラスセレクタ 擬似要素セレクタ の順番で学ぶほうが良いです。 div.cls1は、class要素の半角スペースで区切られた値のリストのひとつにcls1の値を持つdiv要素と言う意味ですから <div class="cls1">や<div class="cls1 top">などにマッチします。 　あなたの書かれたHTMLに該当するものはありません。 　もし適用させようとしたら div .cls1{}と子孫セレクタ(半角スペース)を使うことになりますが、CSS2の書き方としてはお勧めしません。 　CSS2以降は、タイプセレクタに続いてつなげるセレクタを書くことになりました。そのために詳細度0の*全称セレクタが追加されました。 　すなわち div a.cls1{} 詳細度 [0,0,1,2]　divの子孫であるa要素のうちcls1クラスに属するもの div *.cls1{} 詳細度 [0,0,1,1]　divの子孫であるすべての要素のうちcls1クラスに属するもの になります。div .cls1{}はdiv *.cls1{}とみなすと言うことです。 　細かく言えば--とっても大事なことなのですが-- DIVの使い方が間違っています。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』ですから、デザインのためではなく、あくまで他に適切な要素がないときにやむを得ず使い、classやidで文書構造を保管するのです。 　ここは文書のヘッダですよという要素がないために、 <div class="header"> 　<h1>タイトル</h1> 　<p class="goTop"><a href="/">トップへ</a></p> </div> 　のようにね。これで誰が見ても何がどういう意味で書かれているか分かる。十年後に見ても。 　その上でスタイルシートで div.header p.goTop{width: 200px;height: 100px;margin:5px auto;} div.header p.goTop a{display:block;width:100%;height:100%;border:outset 3px blue;text-decoration:none;background-color:aqua;} div.header p.goTop a:active{border-style:inset;} とすれば良いのです。スタイルシートを見ただけでHTML開かなくても、header内のgoTopクラスの段落は、200px幅で100px高さのブロックで中央。その中のa要素はそのサイズに合わせて指定されている・・・とね。 いずれにしても ⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ⇒6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 　を読んでおきましょう。 　なお、 <a href="www.google.co.jp">google</a> に対して a[href="www.google.co.jp"]{color:red;font-size:2em;display:block;width:200px;height:100px;} とかもかけることはかけるのですよ。要素セレクタ 　まあ、div.cls1と半角スペースが抜けているが答えではありますが・・・ Make a little space king and and,and and and queen.→kingandand

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

関連するQ&A

  • cssのfloatについて質問があります。

    cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • firefoxでdivタグ要素が突き抜ける

    お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 中枠の太さを1pxにしたい

    以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • floatがうまくいきません。

    以下のスタイルシートに設定したのですが、 #content　の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }

    • 締切済み
    • CSS
  • cssによる画像リンク枠の色変更

    CSSでリンクが貼られた画像の４隅のボーダーに色を付け、 オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？ 一番簡単なＣＳＳを教えて下さい。 ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css"> <!-- IMG a{ border-width : 7px 7px 7px 7px;border-style : solid solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia; } --> </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>

  • CSSでのレイアウト（Firefox向け）

    下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） 　　　┌──────────────┐ 　　　｜┌─────┐┌─────┐│ 　　　｜｜TEXT　　　　｜｜TEXT　　　　｜｜ 　　　｜｜　　　　　　　　｜｜　　　　　　　｜｜ 　　　｜└─────┘└─────┘│ 　　　└──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。

    • ベストアンサー
    • HTML
  • div要素を半透明にして且つ外枠をつけたい

    div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>

    • ベストアンサー
    • HTML
  • div#left {width:50%;

    div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？

  • CSSを使いたいのですが上手くいきません

    テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

  • css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（

    css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する