- ベストアンサー
CSSの定義リスト <dl>で、用語の部分を太字で表示するには？
CSSの定義リスト <dl>で、用語の部分を太字で表示するには？ スタイルシートの記述先がリンクになっています。<dt>用語</dt>の部分を常に太字で表示したいのです。方法をお教えください。 <dl> <dt>用語</dt> <dd>説明</dd> </dl>
- grizzly
- お礼率81% (895/1101)
- ホームページ作成ソフト
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
関連するQ&A
- 定義リストのコーディングについて
定義リストのコーディングについて 添付画像のようなデザインを、css3だけで実現可能でしょうか。 ソース <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> ポイント ・見出し（dt）とテキスト（dd）のフォントサイズ・スタイルは違う ・見出しとテキストの文字数＝高さは一定ではない ・リスト部分に背景色あり。一番高さのある項目に合わせて可変 素直にulでやれよという感じですが、リストの意味合い的に、できれば定義リストを使いたく… divやその他のタグの追加は、文書構造的におかしくなければある程度許容できます。 モダンブラウザで正しく見えればokです。 無理そうな気もしますが、もし方法があれば、どうぞご教授ください。 よろしくお願いいたします。
- ベストアンサー
- 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
- 定義リストの横並びと<DIV>要素の改行
スタイルシートでテーブルのように横並びでレイアウトさせた定義リストの<dt>の内容にリンクを張っているのですが、 FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。 文字色はリンク用のスタイルシートを反映した色になっています。 スタイルシートの記述に問題があるのだと思うのですが、どこが悪いのかが分かりません。 アドバイス頂けると幸いです。 <dl id="sample"> <dt><a href="aaa.html">リンク１</a> <dd>説明 <dt><a href="bbb.html">リンク２</a> <dd>説明 <dt><a href="ccc.html">リンク３</a> <dd>説明 <dt><a href="ddd.html">リンク４</a> <dd>説明 </dl> dl#sample { margin-left: 1.5em; float: left; width: 450px; padding: 1px 1px 0; color: #000; } dl#sample dt { float: left; clear: both; width: 70px; margin-right: 10px; margin-bottom: 1px; padding: 2px 0 2px 2px; } dl#sample dd { float: left; width: 350px; margin-bottom: 1px; padding: 2px; } --------------------------------------- それともう一つ、 http://jquery.andreaseberhard.de/toggleElements/ このJavascriptを利用してDIV要素を開閉しているのですが、 DIV要素を以下のように二つ並べた場合 <div class="toggler-c" title="タイトル１"> <p>内容</p> </div> <div class="toggler-c" title="タイトル２"> <p>内容</p> </div> 二つとも閉じた状態の時、改行せずに タイトル１タイトル２ と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。
- ベストアンサー
- 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
- cssでリンクに下線を表示したり非表示にしたりする
CSSの設定方法についての質問です。 ホームページで以下のような構成になっているのですが それぞれの場所によってリンクの下線を表示させたり非表示にしたりしたいです。 CSSをどのように設定したらいいでしょうか？ <dl> <dt><A Href="#01">○○</a>（→dtタグは下線を表示する） <dt><A Href="#02">××</a>（→dtタグは下線を表示する） </dl> <h3><a name="01">○○</a></h3>（→名前定義では下線を非表示にする） ・・・ 詳細については<a href="../□□.html">こちら</a>をご覧ください。 （→本文中のリンクは下線を表示する） <A Href="#03"><img src="../images/△△.jpg"></a>（→画像リンクは下線を非表示にする） お願いいたします！
- ベストアンサー
- 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
- 関数内でonclickし、必要部分を表示させたい
Q&Aサイトを作成しており、自己解決できない問題に直面し、大変困っております。 ＜理想の動作＞ 答え1の「こちら」をクリックしたら、「100.質問」がクリックされた状態にし、 答え2の部分を表示させるようにしたいのです。 答え1の「こちら」をクリックしたら、答え2の部分を表示させるようにアンカーを 設定しているつもりですが、うまく飛びません。 記述方法を検索して、色々試したのですが、なかなか自己解決できません。 ヒントでも構いませんので、どのように記述すればいいのか教えて頂けませんか？ よろしくお願いいたします。 <script type="text/javascript"> <!-- function Aanswer(n) { var target = document.getElementById('answerbox'+n); if( target.style.display != "block" ) { target.style.display = "block"; } else { target.style.display = "none"; } } function myLink01() { location.href = "test.html#show02"; } // --> </script> <title>TEST</title> </head> <body> <dl> <dt onclick="Aanswer(1)">1. 質問</dt> <dd id="answerbox1" onclick="Aanswer(1)">答え1<br /><a href="javascript:myLink01()">こちら</a>を参照してください。</dd> </dl> <dl> <dt onclick="Aanswer(2)">100. 質問</dt> <dd id="answerbox2" onclick="Aanswer(2)"><a name="show02">答え100</a></dd> </dl> </body> </html>
- ベストアンサー
- JavaScript
- 普通の印刷はできるのに、レーベル印刷のみ印字されないトラブルについて相談します。
- お使いの製品は【DCP-J982N LAN】です。普通の印刷は問題なくできるのに、レーベル印刷だけが印字されない状況です。
- パソコンのOSはWindows 10で、接続は無線LANで行われています。関連するソフトはNewsoft CD labelerです。
補足
バッチリでした。 助かりました。 ありがとうございます。