- ベストアンサー
定義型リストの<dd>の配置位置
kazumeroの回答
<dd>には、デフォルトスタイルシートとして margin-left:40px; が指定されています。 これは、左側のマージン（余白）として、40pxだけ取ってあげようという意味です。 確かに、40pxの余白は大きく、CSSで直そうという人が多いです。 よって、この値を40pxより小さくすることで、右に寄り過ぎているのを解消することができます。 例） dd { margin-left:10px; }
関連する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
- 定義リストに下線をつけたいと思っています。
定義リストに下線をつけたいと思っています。 （実際は、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
- 定義リスト 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の定義リスト <dl>で、用語の部分を太字で表示するには？
CSSの定義リスト <dl>で、用語の部分を太字で表示するには？ スタイルシートの記述先がリンクになっています。<dt>用語</dt>の部分を常に太字で表示したいのです。方法をお教えください。 <dl> <dt>用語</dt> <dd>説明</dd> </dl>
- ベストアンサー
- ホームページ作成ソフト
- Openoffice Calc の画像配置について
Openoffice3.3のCalcの使い方について教えてください。 小さめの画像を一枚の表の中に複数配置したいのですが、 セルの中に挿入した画像の位置指定の仕方が分かりません。 挿入した画像を右クリックしたメニューの中の「配置」という項目は、 「何も選択できません」と表示されてしまいます。 また、同じく右クリックのメニューの中の「位置とサイズ」という項目でも、 位置の数値指定をすれば配置位置は動きますがセルごとに一枚一枚指定するのが大変です。 やりたいことは、テキストの「右揃え」「中央揃え」のように、 挿入した画像にも手軽にセルの中で位置指定がしたいのです。 分かりづらい文章で申し訳ありませんが、ご存知の方居ましたら回答宜しくお願い致します。
- ベストアンサー
- オフィス系ソフト
- テーブルの位置について
3列以上のテーブルの位置についてお伺いします。 以下をxhtml,cssで実現するにはどのように指定すればよいのでしょうか？ ・テーブルの最終列は画面上の一番右に寄せる ・最終列以外の列が、画面の中央にくるようにする （各列の幅を吟味して、位置を自動調整させたいです） どうかお願いいたします。
- ベストアンサー
- HTML
- Photoshopのレイヤーを正確な位置に配置できますか？
Photoshop CS2 を使っています。 あるビットマップのレイヤーを、別のファイルの同じ位置に貼り付けたいのですが、何か良い方法はありませんでしょうか？目分量ではなく正確な位置を指定して並べたいのですが、どうしてもうまく行きませんでした。 例えば、このレイヤーは（何ピクセル，何ピクセル）の座標に配置、といった風に指定できないのでしょうか？ また、レイヤーのサイズが、何ピクセル×何ピクセルかという事も調べる方法もあればお願いいたします。 Painter に慣れていたせいか、Photoshop での配置方法がどうしてもわかりませんでした。
- ベストアンサー
- グラフィックソフト
- jqueryについて、$("+dd",this)について教えていただけ
jqueryについて、$("+dd",this)について教えていただけませんでしょうか 【参考サイト】 http://ascii.jp/elem/000/000/498/498710/index-6.html 上記のページのアコーディオンメニューを作る記述において、 $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); の if($("+dd",this).css("display")=="none") の部分の"+dd"に何故、+が付くのでしょうか。 確かに上記の様に記述をすると上手く動作をしますので、正しいのだと 思うのですが、そうなる理由が解らなくて混乱してしまっています。 thisが示す$("dl dt")の下層の要素を指定するための記述ならば、 if($("this dd").css("display")=="none") として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。 まだ、ほとんどjqueryの記述ルールを把握していないので、お恥ずかしいのですが、 何卒、宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 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の本を見ても書いていないし、こういう定義の文法がわからないのでお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
なるほど。デフォルト設定でかなり右寄りになっているんですね。 それを指定してやるのが「margin-left:」なんですね。 ありがとうございました。