CSSの定義の方法について混乱しています
- CSSの定義の方法について混乱しています。特に以下のサイトで見たサンプルコードについてわかりません。
- 通常のCSS定義では、クラスやIDを使って要素を指定しますが、上記の方法はどういった意味なのでしょうか。
- また、aa.bbといった形式の定義も見かけることがありますが、この文法についても理解できません。
- ベストアンサー
CSSの定義の方法
CSSの定義の方法で混乱しています。 以下サイトで見たサンプル http://www.geocities.jp/eijispace/2011/0810.html dl#sample1 dl,dt,dd { margin: 0; padding: 0; } dl#sample1 dl,dt,dd { これがわかりません。 dl,dt,dd が l#sample1の子クラスのようなものなのはわかりますが dl#sample1が不明です 通常定義は ．class{ や #id { など ．や# で始まるはずですが、上の方法はどういった意味なのでしょうか また、 aa．bb { のような形も見かける気がします。 cssの本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。
- roksy
- お礼率48% (50/104)
- その他([技術者向] コンピューター)
- 回答数4
- ありがとう数11
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
何はともあれ、疑問があれば仕様書を確認する。・・・その上でわからない時に聞く・・・ そうしないと中途半端な一部の情報しかわからないままになってしまいます。 CSS2以降は、基点となるセレクタから書き始めることになりました。 すなわち dl#sample1 dl,dt,dd {} でいうと dl#sample1 dl dt dd のそれぞれに対して、指定しているわけです。,は「グループ化」です。 dl#sample1 dl はdlが基点となるセレクタですからsampleという一意セレクタを持つdl要素 ' '半角スペースの子孫セレクタが続いていますから、意味は sample一意セレクタを持つdl要素の子孫のdl要素と言う意味になり、詳細度は [0,0,1,2]になりますね。 dt とddはタイプセレクタですから、いずれも詳細度は[0,0,0,1]になります。 ＞ ．class{ や #id { など ．や# で始まるはずですが、 いいえ、それは逆です。 本来は、*.classや*#idと書く----詳細度は[0,0,1,0][0,1,0,0] ・・・*は全称セレクタで、詳細度は0です。CSS1との整合性のために設けられました。 ※そのうえで、「全称セレクタが単体セレクタの唯一の構成要素でない場合、"*"を省略してよい。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )」 ということです。あくまでCSS1の書き方を解釈するために設けられた解釈であって、本来の書き方ではありません。 ＞cssの本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。 クズ本と言うだけです。 4 構文と基本データ型 5 セレクタ 6 プロパティ値とカスケーディング、継承の割り当て は、メディアごとのプロパティの説明より前に書かれています。 ・Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification[邦訳]( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) ★CSSは、Cascading Style Sheetsの略です。当然、セレクタやカスケーディングの仕組みがあればこそのスタイルシートですのに、「セレクタやカスケーディングの仕組み」という命ともいえる部分を説明していない参考書は「クズ」です。・・と断言できます。 ただ、この指定は通常は dl#sample1,dl#sample1 dt,dl#sample1 dd{} とすべきじゃないかと思います。 samle1のIDをもつdl要素の子孫であるdt、およびdd要素 他の場所でこれら(dt,dd)の要素が出てきたときに、このスタイルが適用されてしまいます。dl要素の下位に、またdl要素があるというのも変です。 ★スタイルシートもですが、HTMLの書き方も身についていないような気がします。 idやclass名はDIVやSPANに限らず、「文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ためのものであって、スタイルシートのために書くものではありません!!。 具体的には、 <body> <div class="header"> <div class="nav">ナビゲーション</div> </div> <div class="section"> ・・・本文 <div class="aside">この記事と直接関係ない記事</div> </div> <dl <div class="footer"> この文書のfooter </div> </body> とかになり、その上で div.header div.nav dl, div.header div.nav dt, div.header div.nav dd{} と指定するのが本来の方法 スタイルシートもHTMLも一度・・通しで読んでおかれるほうが、早道ですよ。 ★HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
その他の回答 (3)
- Zilant
- ベストアンサー率38% (29/75)
『子孫セレクタ（Descendant selectors）は、空白類で区切られた、2つ以上の単純セレクタから構成されています。 祖先-子孫関係から要素をマッチさせるのに使います』 『セレクタは,コンマで区切って、グループ化する事が出来ます』 なので h1 > b #z79h, h2[style] b, h1 + em.env, h2 * em, dl#sample1 dl,dt,dd{ color: red } と、途中で改行しても「複数のセレクタを１つの定義に纏める」ということができます。
- saintandre
- ベストアンサー率31% (194/607)
「dl要素でidがsample1のものの下位要素のdl要素」と「dt要素」と「dd要素」ですね ただしidは通常1要素だけですのであまりこういう指定のしかたはしませんが そもそもdt要素とdd要素への指定が明らかに浮いてるので 下記のようにしたかったような気もします dl#sample1 dl,dl#sample1 dt,dl#sample1 dd
補足
sampleがクラスなら dl．sample1 として idなら dl#sample1 となるわけですね
- kmee
- ベストアンサー率55% (1857/3366)
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#id-selectors むしろ「 ．や# で始まる」方が「特殊な形(*が省略されている)」です。
関連するQ&A
- cssを用いる表の作り方
いつもいつもお世話になっております。 cssを用いた表の作り方で迷っています。 dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> </style> </head> <body> <dl id="sample3"> <dt>施設名</dt> <dd>あああああああああああああああ</dd> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> <dt>職員体制</dt> <dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd> <dt>アクセス</dt> <dd> <ul> <li>・えええええええええええええええええええええええええ</li> <li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul> </dd> <dt>総居室数</dt> <dd>３室</dd> <dt>居室面積</dt> <dd>２０平米</dd> <dt>電話番号</dt> <dd>12-3456-7890</dd> <dt>FAX番号</dt> <dd>12-3456-7890</dd> </dl> </body> </html> dl#sample3 { width: 600px; } dl#sample3 dt{ border-top: 1px solid #fff; float: left; width: 6em; padding: 10px; background-color: orange; } dl#sample3 dd{ border-left: 1px solid #fff; border-top: 1px solid #fff; margin-left: 115px; padding: 10px; background-color: silver; } ul { list-style-type: none; margin: 0 auto; padding: 0; } 各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、 "電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。 もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。 ご存知の方、どうぞどうぞご教示お願いいたします。
- ベストアンサー
- CSS
- 定義リストで先頭にアイコン
先頭にアイコンをつけたいのですが、テキストが重なってしまいます。 できれば下記のように定義リストで実現したいです。 .qaarea dl { margin: 1em; padding: 0; } .qaarea dt { font-weight: bold; color: #035AA3; background: #CCCCCC url(../qa_img/q_back.gif) no-repeat left center; padding: 5px; } .qaarea dd { background: #FFFFFF url(../qa_img/a_back.gif) no-repeat left top; padding: 5px; margin: 10px 0 10px 50px; } ------------- <div class="qaarea"> <dl> <dt>質問が入ります。</dt> <dd>回答が入ります。</dd> </div>
- ベストアンサー
- HTML
- IE7だけに出る謎の空白（CSS）の解決方法
以前も似たような症状が出たのですが・・・ IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。 イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。 ですがIE７でだけ空白ができてしまうのです。 原因と解決方法を教えていただけないでしょうか？ <div id="right"> <img class="top" src="img/bg-rtop.gif" /> <dl> <dt><img src="img/right-tit1.gif" /></dt> <dd>ああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit2.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit3.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit4.gif" width="200" height="20" /></dt> <dd>あああああああああああああああああああああああああ</dd> </dl> <!-- ここで空白ができてしまう・・・--> <img class="under" src="img/bg-runder.gif" /> </div> ■CSS @charset "shift_jis"; body { text-align: center; margin: 0px; background-image: url(img/bg.gif); vertical-align: bottom; line-height: 165%; letter-spacing: 1px; font-size: 12px; } /* 右側の設定*/ #right{ width:200px; float:right; } #right .top { margin: 20px 0 0 0; } #right dl { background-image: url(img/bg-rmiddle.gif); margin: 0px; padding: 0 0 20px 0; } #right dt { padding: 10px 0 0 0; } #right dd { margin: 10px 0 0 12px; padding: 0 0 0 0; } #right .under { margin: 0px; } 一部省略してます・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- 横並びしたいのですが
横並びしたいのですがdd.sub内のテキストがwidthサイズを超えて2段になった場合や 改行(<br>)を入れた場合それ以降のclear: both;が効かない状態になってしまいます。 dl, dl dd { padding-left: 20px; padding-bottom: 15px; } dl dd.sub { float: left; clear: both; width: 55em; } dl dd.page { margin-left: 55em; margin-bottom: 10px; } <dl> <dt>1 あああ</dt> <dd class="sub">サブ1</dd> <dd class="page">p1</dd> <dt>2 いいい</dt> <dd class="sub">サブ2</dd> <dd class="page">p2</dd> <dt>3 ううう</dt> <dd class="sub">サブ3</dd> <dd class="page">p3</dd> </dl> 理想の並びとしては 1 あああ サブ1 p1 2 いいい サブ2 p2 3 ううう サブ3 p3 のようにしたいのですがCSSをどのようにすれば可能でしょうか？ 仮に<dd class="clear"></dd>を追加すれば回り込みの解除はできるのですが 無駄に要素を入れたくないもので他にいい方法はないものかと悩んでおります。
- ベストアンサー
- HTML
- 入れ子にしたddタグをcssで制御できません。
入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。 </dd> <dl> <dt>111111</dt> <dd>22222222222222222</dd> <dd>33333333333</dd> <dt>４４４４４４</dt> <dd>５５５５５５５</dd> <dl> <dt>６６６６６６６６</dt> <dd>７７７７７７７７７</dd> </dl> </dd> </dl> のようにｄｄの中にまたdlから始まるのを入れ子にしました。 それで、cssで .hoge dd{ color:#FFFFFF; margin:10px; } とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の７７７７７７のように入れ子になったddだけにスタイルシートを掛けたいのです。 試しに .hoge dl dt dd dl dt dd{ color:#FFFFFF; margin:10px; } や、 .hoge dd dl dt dd{ color:#FFFFFF; margin:10px; } を試してみましたが、うまくいきませんでした。 どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。
- ベストアンサー
- HTML
- DD,DT,DDを横並び。paddingとmarginと無指定で
DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>
- ベストアンサー
- HTML
- CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一
CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。 詳しい方ご教授願います！！ ・スクロールバーが出ずに指定した高さを超えてデカデカと表示される ・ボックスを囲む線が表示されない ・その他の設定（余白、色、フォント・・・）は指定通り表示される 外部CSSの記述は下記の通りです。 ----------------------------------- #main dl.info { height: 130px; overflow: auto; margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; } #main dl.info dt { font-weight: bold; float: left; } #main dl.info dd { border-bottom: 1px solid #cccccc; padding-left: 8em; } ----------------------------------- ちなみに、mainは下記の通りです。 ----------------------------------- #main { float: left; margin-top: 20px; margin-left: 40px; width: 500px; } #main h2 { font-size: 110%; background-image: url(images/h2bg.gif); background-repeat: no-repeat; background-position: bottom; padding-left: 10px; color: #696969; clear: both; } #main p { padding: 2px; } ----------------------------------- htmlファイルへの記述は下記の通りです。 ----------------------------------- <div id="main"> <h2>更新情報</h2> <dl class="info"> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> </dl> </div> <!--/main--> ----------------------------------- いくら見直しても書き直してみても、直りません・・・ きっと私がどこか抜けているか間違っているのだと思うのですが・・・ 宜しくお願い致します！
- 締切済み
- HTML
- 定義リスト dl dd dt
困っています。お願いします。 このソースのレイアウトとしましては、 dl1、dl2、dl3と横に並んでいます。 各dtに画像、ddにテキストです。 このカタチが2行続いています。 3行目は、三列の一番左にdl7が置かれるかたちです。 全体としては、 dl1 dl2 dl3 dl4 dl5 dl6 dl7 という感じです。 dl1～dl7まで全て、同じサイズの画像とddにテキストが入っています。 問題はレイアウトではなく、リンクです。 dl1～dl7のdtの中の画像には全てリンクがはれるのですが、 dd部分の一部テキストにはリンクがはれません。 リンクがはれるのは、dl5、dl6、dl7です。 後はリンクを設定しても、リンクがはれない状態です。 いろいろ試してみたのですが、原因がわかりません。 一つ思うことは、dl1、dl2、dl3、dl4の下にはdl4、dl5、dl6があるわけなので、何か下にあるとリンクが効かないのかなあとも思います。 どなたか、教えて頂きたいです。 分かりづらい説明で申し訳ないのですが、宜しくお願い致します。 <dl id="dl1"> <dt id="dt1"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">ああああ</a> </dd> </dl> <dl id="dl2"> <dt id="dt2"> <a href="#"><img src="img/image1.jpg" /></a> </dt> <dd class="dd1"> <a href="#">いいいい</a> </dd> </dl> このカタチをdl7まで繰り返し、htmlに記述します。 次にcssです。 #dl1 { position: relative; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0px 0px 0px 0px; float: left; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } #dt1 a { display: block; width: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a:hover { background-image: url(img/image1-2.jpg); text-decoration: none; } こちらも同様に、dt7まで繰り返しcssを指定。 cssの中身は、画像にホバーしたら、画像が切り替わるようになっています。 次に、テキストのdd部分のcssです。 こちらはクラス指定で、dl1～dl7までの各dd使用。 .dd1 { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd1 a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd1 a:hover { text-decoration: underline; color: #ffffff; } 長々と失礼いたしました。
- ベストアンサー
- HTML
- 定義リストに下線をつけたいと思っています。
定義リストに下線をつけたいと思っています。 （実際は、dt=日付、dd=お知らせ内容を記載するので、１行ごとの仕切りとして） dt,ddの両方に下線をつけたところ、 ・"compact"を入れると下線がdtとddの下線が重なり、破線が一部直線になる ・"float:left；"と幅指定をするとdtとddの間に2pxの隙間ができてしまう という問題がおきます。 そこで、ddにのみ下線をつける方法で回避しようとしました。 が、下記の記述では”dtの前半分くらいに下線がつかない”という現象になります。 《CSS》 dt { width: 70px; margin-left: 5px; padding: 5px 0 5px 0; } dd{ border-bottom:1px dotted #999 ; padding: 5px 0 5px 70px; } 《HTML》 <dl compact> <dt><img src="./image/aaa.png">2010.9.1</dt><dd>*****</dd> <dt><img src="./image/aaa.png">2010.9.2</dt><dd>****</dd> <dt><img src="./image/aaa.png">2010.9.3</dt><dd>***</dd> </dl> どのようにすれば、きれいにdtの最初からddの最後まで下線がひけるでしょうか。
- ベストアンサー
- CSS
- css3のセレクタについて
質問させてください。 CSS3で疑問に思っていることがあります。 たとえば、 例1） <div id="sample"> <p>サンプル1</p> <p>サンプル2</p> <p>サンプル3</p> </div> に対して、cssで #sample p:nth-cihld(3){ color:red;} とすればサンプル3だけ赤文字になると思います。 また 例2） <div id="sample"> <dl> <dt>サンプル1</dt><dd>sample1</dd> </dl> <dl> <dt>サンプル2</dt><dd>sample2</dd> </dl> <dl> <dt>サンプル3</dt><dd>sample3</dd> </dl> </div> に対して、 #sample dl:nth-cihld(3){ color:red;} とするとサンプル3 sample3が赤文字になります。 (検証ブラウザはクローム/FF/IE9・10) IE7・8はCSS3に対応していないので、赤文字になりません。 IE7・8にも対応するようにselectivizr.jsを使用します。 すると 例1はIE7・８で赤文字になりますが、例２は変化なしでした。 これはselectivizr.jsの仕様なのでしょうか。 それとも、厳密に言うとdl要素はdiv要素の子要素には当たらないのでしょうか。 腑に落ちなくてかなり時間を使ってしまいました。 ご教授いただけませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
お礼
総合の定義と扱いの説明があるのですね。 ちょっと訳なので読みにくいですが、こういうものを探していました。 市販の本にあればもっと良かった。 全体にかなり理解が進みました。