- ベストアンサー
cssで#main dl > ddの「>」はどういう意味でしょうか？
タイトルの通りですが、 例） #main dl + dd { margin:0; padding:0; } #main dl > dd { margin:0; padding:0; } などの「+」や「>」はどういう意味でしょうか？
- sho27_2009
- お礼率78% (29/37)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- himajin100000
- ベストアンサー率54% (1660/3060)
関連するQ&A
- 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
- 入れ子にした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
- WinIE(5以降)で、ddタグをCSSで制御すると、ずれてしまいます。
WinIE(5以降)で、ddを下記のCSSで制御すると、「取締役/」と書かれた文字から先が、 前に3pxほどずれてしまいます。 ---------------------------------------------------- <html><head><title>dl組</title> <style type="text/css"> <!-- #works dl, dt, dd {font-size: 12px; line-height: 1.5em; margin: 0px; padding: 0px;} #works dt {padding: 0 0 5px 0; float: left;} #works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;} --> </style> </head> <body> <div id="works"> <dl> <dt>会社創業</dt> <dd>昭和63年2月1日</dd> <dt>改組設立</dt> <dd>平成15年3月1日</dd> <dt>役員</dt> <dd>代表取締役社長/あいうえお<br> 常務取締役/かきくけこ<br> <!-- ここから --> 取締役/さしすせそ<br> 取締役/たちつてと<br> 取締役/なにぬねの<br> 取締役/はひふへほ</dd> <!-- ここまで --> </dl> </div> </body></html> ---------------------------------------------------- そこで下記のCSSを追加して、いちよう解決したのですが、何かすっきりしません。 ---------------------------------------------------- #works dd .sage {padding: 0 0 0 3px;} /* WinIE用 */ html>body #works dd .sage {padding: 0;} /* WinIE以外用 */ <!-- ここから --> <div class="sage">取締役/さしすせそ<br> 取締役/たちつてと<br> 取締役/なにぬねの<br> 取締役/はひふへほ</div></dd> <!-- ここまで --> ---------------------------------------------------- これ以外の方法で、もうちょっとシンプルに解決する方法はないでしょうか。 よろしくお願いします。
- ベストアンサー
- 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
- 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の本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ul、dlタグでリストを作成すると行間に余白が
とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか？ ■htmlの記述 <ul> <li>画像１</li> <li>画像２</li> <li>画像３</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。
- 締切済み
- Mac
- ddの中にulを入れ子にすると上に余白が出来る
ddの中にulを入れ子にすると上に余白が出来る ddの中にリストを入れたいのですが、CSSでmarginやpaddingを「0」にしてもリストの上部に余白が出来てしまいます。 色々試してみたのですが、どうしても上の余白が消えません。 何処かタグがおかしいのでしょうか？ それともバグでしょうか？ *因みに、ulの上部marginにマイナスの数値を設定すると余白は消えるのですが・・・。 以下に、問題の個所を抜粋します。 －－－－－－－－－－－－－－－－－－－－－－－－ body { margin: 0; padding: 0; } html>/**/body { font-family: "MS Pゴシック", "MS P Gothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", sans-serif; } #about { margin: 0; padding: 0; width: 700px; background-color: #33FFFF; } #about dl { margin: 10px 0 0 60px; padding: 0; background-color:#99FFCC; } #about dl dt { margin: 0; padding: 0; font-size: 12px; background-color:#99FF00; } #about dl dd { margin: 0 0 0 15px; padding: 0; background-color:#0066FF; } #about dl dd ul { margin: 0; padding: 0; width: 500px; list-style-position: inside; } #about dl dd li { margin: 0; padding: 0; background-color:#CCFF99; font-size: 11px; } －－－－－－－－－－－－－－－－－－－－－－－－ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional/EN" "thhp://www.w3.org/TR/xhtml1/DTD/xhtml1-toransitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xhtlm="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>ulの上に余白が出来る</title> </head> <body> <div id="about"> <dl> <dt>動作確認</dt> <dd> <ul> <li>解像度：1440×990</li> <li>OS：Windows</li> <li>ブラウザ：IE7、Opera9.8、Chrome6.0、Safari5.0</li> <li>CSS及びJavascriptを使用しています。</li> </ul> </dd> </dl> </div> </body> </html>
- ベストアンサー
- HTML
- CSSの*はどういう意味
CSS下記の*はどういう意味なのでしょうか？ *を他に変えてCSSを組むことはできないのでしょうか？ * { margin: 0; padding: 0; }
- ベストアンサー
- CSS
- ameba ownd アメーバオウンド CSS
アメーバオウンドにてアコーディオンを使ったサイトを作りたいのですが、どうしても反映されません。 他のサイトのテンプレをそのまま貼り付けるだけ、でも反映されず… だれか助けていただけないでしょうか？ ちなみにその一例が下記になります。 【HTML】 <div class="qa-list mts"> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> </div> 【ＣＳＳ】 .qa-list dl { position: relative; margin: 30px 0 0; cursor: pointer; border: 1px solid #DDD; } .qa-list dl:first-child { margin-top: 0; } .qa-list dl::after { position: absolute; top: 27px; right: 26px; display: block; width: 7px; height: 7px; margin: auto; content: ''; transform: rotate(135deg); border-top: 2px solid #000; border-right: 2px solid #000; } .qa-list .open::after { transform: rotate(-45deg); } .qa-list dl dt { position: relative; margin: 0; padding: 20px 20px 20px 60px; font-weight: bold; background: #DDD; } .qa-list dl dt::before { font-size: 22px; line-height: 1; position: absolute; top: 20px; left: 20px; display: block; content: 'Q.'; color: #3285bf; } .qa-list dl dd::before { font-size: 22px; line-height: 1; position: absolute; left: 20px; display: block; content: 'A.'; font-weight: bold; color: #3285bf; } .qa-list dl dd { position: relative; margin: 0; padding: 20px 20px 20px 60px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } @media screen and (max-width: 767px) { .qa-list dl { margin: 10px 0 0; } .qa-list dl:after { top: 20px; right: 20px; width: 7px; height: 7px; } .qa-list dl dt { padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dt::before { font-size: 14px; top: 20px; left: 20px; } .qa-list dl dd::before { font-size: 14px; left: 20px; margin-top: 5px; } .qa-list dl dd { margin: 0; padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } } ご指摘いただけると幸いです。 よろしくお願い致します。
- 締切済み
- CSS
- IPアドレスを入力する際の要点をまとめました。
- 入力する製品名はmfcj737dnです。
- 接続環境については、Androidを使用し、無線LANで接続しています。電話回線の種類はSoftbankひかりです。
お礼
早速のご回答ありがとうございます。 お陰様で理解できました。