CSSで定義リストを横並びにする方法についての質問です。


現在CSSを勉強中で、上記のレイアウトを本や参考サイトを見ながらやってみたところ、他の人に違うと注意を受けました。
※質問文が長くなってしまいますので、HTMLとCSSはコメント欄に書きます。

私が取った方法も教えてもらった方法も、どちらも同じように横並びになり、表示もほぼ同じになりました(Windows IE7、Firefoxで確認。他にもスタイルがあるのでその影響をうけているかもしれませんが…)。

できるだけ正しいCSSを書きたいと思っているので、この2つの書き方ならばどちらの書き方のほうがより良いCSSなのか、具体的にどこら辺が良い/悪いのかご教授ください。
またもともとのマークアップ自体に間違いや注意点があったら、ご教授いただけるとうれしいです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/06/18 13:35:03
  • 終了:2007/06/25 13:35:03

回答(2件)

id:fragarach No.1

fragarach回答回数41ベストアンサー獲得回数72007/06/18 14:23:56

ポイント35pt

http://www6.plala.or.jp/go_west/nextcss/

URLはダミーです。


どちらかと言えば、質問者の方のCSSの方がいいかと思われます。逆に、知り合いの方がどうしてそういう記述にしようと思ったのかが分かりません。注記の定義文をマージンでなくパディングで位置指定しようとしただけのようですが、それが何を意味してるのか分かりません。

borderを表示させれば分かりますが、質問者の方のCSSでは枠線が揃うのに対し、知り合いの方のCSSでは枠線が交差しますし、上下にパディングが入るせいで上下位置もずれています。

何故間違っているかの指摘についても、dt要素が既に一般指定で横幅固定になっている以上、注記部分だけ書き換えても意味が無いはずです。質問者の方がCSSを書き間違えたか、知り合いの方が勘違いをしたかのいずれかでしょう。


ただ、質問者の方のCSSも、dt要素に入るテキストが長くなり改行が入った場合など、デザインが崩れる可能性があります。たとえば、(注1)部分が二行に渡る場合、(注1)の定義文の下・(注1)の右に(注2)が来てしまいます。

なので、横幅を広めに取っておくか、(注)部分があまり長くなりそうならいっそ定義リストは捨ててdivとspanを使った方がいいような気もします。

id:Aprikose

回答ありがとうございます。

仕組みについて説明いただき大変助かります。

コメントにも書かせていただいたのですが、知り合い曰く、文字数が違うものがdt要素に入ってしまうとモノによって間が空きすぎるのでパディングで対応したようでした。

border表示させてみたところ、確かに交差していますね。何故か上下位置がずれていないのですが、他でも同じようなスタイルを使っているので、そちらが影響しているのかもしれません。

dt要素に入る文字数は1行で収まるだろうと勝手に考えていたのですが、確かに2行以上になる可能性もありますね。ただ、divとspanについては、このレイアウトは定義リストでという指定を受けているので、変えられないかもしれません…。ですが方法として検討、場合によっては交渉しようと思います。

ありがとうございました。

2007/06/18 14:41:36
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/06/18 17:23:19

ポイント35pt

答えとしては、どちらも良くないです。なぜなら、dt要素の内容が2行になった場合に対応できない、変更に弱いCSSだからです。

dt要素に「clear: left」を付け加えれば解決したかと思います。

本題ですが、他の人が

>なぜ間違っているといわれたのかというと、(注1)とその後に続く文章の間が開きすぎるからダメとのことでした。

という理由で、paddingを使ったのには理解に苦しみます。margin-leftを縮めるのではだめだったのでしょうか。

dt/ddの1セットごとに背景色や背景画像を指定したいという意図であれば、paddingを使ったのには納得できます。

http://q.hatena.ne.jp/

id:Aprikose

回答ありがとうございます。

dt要素に「clear: left」ですね。追加しておきたいと思います。

今回は単に(注1)と内容を並べたいというだけなので、「dt/ddの1セットごとに背景色や背景画像を指定」というのはありません。margin-leftではなくpaddingで、というのは見たことのない方法だったのでご質問した次第です。

ありがとうございました。

2007/06/18 17:54:17
  • id:Aprikose
    <HTML>

    <div id="setsumei">

    <dl>
    <dt>1.</dt>
    <dd>内容その1です。</dd>
    <dt>2.</dt>
    <dd>内容その2です。</dd>
    </dl>

    <dl class="chuki">
    <dt>(注1)</dt>
    <dd>注記その1です。</dd>
    <dt>(注2)</dt>
    <dd>注記その2です。</dd>
    </dl>

    </div>

    ※本来なら「1.」「2.」の部分は番号リストでやるべきなのですが、この部分の表記がページによって変わったり、今後表記が変わる可能性が高いので定義リストでマークアップしています。ご理解ください。
    ※(注1)は(注)になる場合もあり、(注)と(注1)が混同する場合もあります。

    <CSS>

    ○私のとった方法

    #setsumei dt {
    width: 1.5em;
    float: left;
    }

    #setsumei dd {
    margin-left: 1.5em;
    }

    #setsumei dl.chuki dt {
    width: 2.5em;
    }

    #setsumei dl.chuki dd {
    margin-left: 2.5em;
    }


    ○他の人がとった方法

    #setsumei dt {
    width: 1.5em;
    float: left;
    }

    #setsumei dd {
    margin-left: 1.5em;
    }

    #setsumei dl.chuki dt {
    width: 2.5em;
    }

    #setsumei dl.chuki dd {
    padding: 0.2em 0.2em 0.2em 2em;
    }

    ※横ならびに関係ないものは省かせていただきました。
  • id:Aprikose
    付け足し付け足しで申し訳ないのですが、なぜ間違っているといわれたのかというと、(注1)とその後に続く文章の間が開きすぎるからダメとのことでした。(注1)の部分は文字数が一定ではないのでどうしたらよいのか…。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません