OCN光で最大124,800円おトク!

どなたか知恵を貸していただけないでしょうか。
定義タグを使って以下のような文書を作ってます。

(1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  テキストテキスト
(2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  テキストテキスト
(3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  てきすとてきすとてきすとてきすと
  てきすとてきすとてきすと

1.<dl><dt> ~ </dt></dl>で囲みました。
テキストが長すぎて、改行した時に↓次の行の先頭文字が(1)と同じところまできてしまうので困っています。

(1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキスト
(2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキスト
(3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  てきすとてきすとてきすとてきす
  てきすとてきすとてきすと

もともとの<dt>タグは改行した時、インデントが次の行にも効かないものでしょうか。
以前は効いていたページもあったのですが、スタイルシートが変わって
<dt>タグにいろいろ設定してしまったので、もともとの設定が効かなくなったのでしょうか。

2.<dt><dd>の横並びという方法も考えました。

XHTML
<dl class="list309">
<dt>(1)</dt><dd>テキストテキスト......</dd>
<dt>(2)</dt><dd>テキストテキスト......</dd>
<dt>(3)</dt><dd>テキストテキスト......</dd>
</dl>

dl.list309 dt {
clear: left;
float: left;
margin: 0 0 0 1em;
width: 1em;
padding-left: 0px;
}

dl.list309 dd {
margin-bottom: 1em;
margin-left: 0.5em;
}

ところが、(3)の本文中↓で<dd>を使いたいので困っています。
「  てきすとてきすとてきすとてきす
   てきすとてきすとてきすと」

いったいどうすればよいでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

(3)の本文中でddを使うというのが、



<dl>
<dt>(3)</dt>
<dd>あああああ
<dl><dd>あああああ</dd></dl>
</dd>
</dl>

ということでしたら、

dl.list309 dd {
margin-bottom: 1em;
margin-left: 0.5em;
}

dl.list309 dd dl dd {
margin-bottom: 別の値;
margin-left: 別の値;
}

で中のddだけ別の値で上書きできます。
    • good
    • 0
この回答へのお礼

お礼が遅くなりスミマセン。
やはり、シンプルというのは難しい相談でした。
こちらのように設定してみます。
ありがとうございました。

お礼日時:2010/07/22 11:22

定義タグではありませんが…


リストタグで。

HTML
----
<ol>
  <li>テキストテキストテキスト…</li>
  <li>テキストテキストテキスト…</li>
</ol>

CSS
----
ol { margin: 0; padding: 0; }
li { margin: 0 0 0 2em; padding: 0; }

バッティングしてしまう時はidやclassとの組み合わせで対処すれば問題ないかと。

どうしても定義タグでの設定が必要な場合は申し訳ないです(平伏)
    • good
    • 0
この回答へのお礼

ご丁寧にありがとうございます!
今回は定義タグで...ということだったんですが、
他にもいろんな方法があると知り勉強になりました。
今後の参考にさせていただきます。

お礼日時:2010/06/29 10:36

よくわかってませんが…


 dl.list309 { margin-left:1.5em; }
 dl.list309 dt { text-indent:-1.5em; }
みたいなのではダメでしょうか?

この回答への補足

早速のご回答ありがとうございます!
質問自体が分かりにくく申し訳ありませんが、すごーくヒントになっている気がします。
「dl.list309」の設定は苦し紛れのものでして、なければない方がよく...
シンプルに<dt>タグが改行されてもインデントが効いてくれさえすればよいんです。
実際このように↓してみたらいいでしょうか?
お手数ですが、もう一度ご回答いただけませんでしょうか。

/*テキスト 定義タグ*/

.text dl {
padding-left: 1em;
}

.text dl dd {
margin-bottom: 5px;
margin-left: 0;
padding-left: 2em;
}

.text dl dt {
padding-left: 0em;
margin-bottom: 3px;
text-indent:-1.5em; ←ここだけ付け加える。
}

補足日時:2010/06/25 15:57
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング