人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: Aprikose
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS firefox HTML IE7 Windows
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● fragarach
●35ポイント

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

URLはダミーです。


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

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

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


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

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

◎質問者からの返答

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

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

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

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

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

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


2 ● wizemperor
●35ポイント

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

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

本題ですが、他の人が

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

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

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

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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ