- ベストアンサー
横並びしたいのですが
- CSSを使用してテキストを横並びにする方法について教えてください。
- テキストの横並びに関する課題として、テキストが幅を超えた場合や改行が入る場合にclear: both;が効かない問題があるとのことです。
- 現在は<dd class='clear'></dd>を使用して回り込みを解除しているが、他に方法があるか悩んでいるとのことです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
サブに対するwidthが55emと大変長い事、pageというclassの内容がp1、p2…という事は、もしかしてインデックスの様なものを意図してらっしゃいますでしょうか？サブ項目の数も大項目毎に異なるとか… 1 大項目1 サブ項目1-1 p1 サブ項目1-2 p10 サブ項目1-3 p15 2 大項目2 サブ項目2-1 p21 3 大項目3 サブ項目3-1 p31 サブ項目3-2 p35 もしも上記の様な内容だと仮定するなら、やはりマークアップも少し変更された方がより適切な論理構造になるかと思います。それに依り、CSSでの詳細度を工夫できますので、HTML側でclass属性を減らす事が可能になります。 以下は、その仮定に基づくサンプルです。詳細がわからないので、DOCTYPEはとりあえずHTML 4.01 strictにしてあります。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link href="./css/sample22.css" type="text/css" rel="stylesheet" media="all"> </head> <body> <dl class="index"> <dt>1 大項目1</dt> <dd> <dl> <dt>サブ項目1-1</dt> <dd>p1</dd> <dt>サブ項目1-2 長い長い複数行になる様なテキスト（55em以上の長さ）</dt> <dd>p10</dd> <dt>サブ項目1-3</dt> <dd>p15</dd> </dl> </dd> <dt>2 大項目2</dt> <dd> <dl> <dt>サブ項目2-1</dt> <dd>p21</dd> </dl> </dd> <dt>3 大項目3</dt> <dd> <dl> <dt>サブ項目3-1</dt> <dd>p31</dd> <dt>サブ項目3-2</dt> <dd>p35</dd> </dl> </dd> </dl> </body> </html> ---------------------------------------------------------------------- 【CSS】※「←～」の補足は検証の際は削除して下さい。 ---------------------------------------------------------------------- /* 定義リストの余白を初期化 */ dl, dt, dd { margin: 0; padding: 0; } /* 以下、計算が容易になる様に、単位は全てemで指定。オリジナルで10px・15px・20pxだった箇所はそれぞれとりあえず0.7em・1em・1.5emと置き換えてあります。お好みで調整・再計算を。 */ /* 定義リストメイン */ dl.index { width: 64em;←サブ項目名部分の55emから逆算して定義リスト全体の幅を決め打ち（55＋3＋1＋2＋1.5×2） padding: 1em 0;←widthを指定しているので、paddingは上下方向のみ指定（左右は子要素dt、ddのmarginで置き換え） } dl.index dt { width: 61em;←定義リストサブと同じ幅（サブ項目名55em＋ページ数3em＋両者の間の余白1em＋左余白2em） margin: 0 0 0.5em 1.5em;←オリジナルではdlの左のpaddingとしていた値をdtのmarginに。ついでに定義リストサブとの余白を適度にとる為に下marginも設定。 } dl.index dd { width: 61em;←同上 margin-left: 1.5em;←同上（下マージンは子要素の定義リストサブで設定するので不要） } /* 定義リストサブ */ dl.index dd dl { zoom: 100%;←回り込み解除の為のclearfix（IE対策） margin-left: 2em;←サブ項目の左margin } dl.index dd dl:after {←ここ全体が回り込み解除の為のclearfix display: block; clear: both; height: 0; visibility: hidden; content: ""; } dl.index dd dl dt { float: left; width: 55em; margin: 0 0 0.5em 0;←必要なmarginは下方向だけだが、親要素定義リストサブ内で設定された左marginが継承されてしまうのでそれもリセットして一括指定 } dl.index dd dl dd { float: right;←定義リストサブの右端へ合わせる width: 3em;←ページ数を描画する領域を少し大目に（”p100”とか3桁になっても確保できます） margin: 0 0 0.5em 0;←同上（dl.index dd dl dtと） text-align: right;←ページ数の桁を右に合わせる } ---------------------------------------------------------------------- いかがでしょうか？一応、IE6/7、Firefox2/3、Safari3、Opera9.61等で同様の表示結果を得ております。 floatは、positionにはないメリットもありますので、理屈を分かった上で回り込みの解除などに対応ができるのであれば、特に扱いに困ることもないと個人的には思います。 想定している構成が上記とは異なる場合は、具体的に補足して下さい。
その他の回答 (3)
- KI401
- ベストアンサー率53% (44/82)
> #1補足・礼 インライン要素・ブロック要素って分かる？ #1のdisplay:inline;は、本来ブロック要素のddをインライン要素のように表示させよ、という意味。 インライン要素は普通（他に何の指定もなければ）横並びするので、 floatとか全部取っ払っても#1のCSSだけで要望の形に並ぶはずだ。 # 調べればわかるだろうと思ったんだがなぁ。 #2さんが指摘しているように、floatなんてあんまり使わない方がいい。 特に理解できていないなら、使わずにするに越したことはない。 ちなみにfloatのまんまでやるならば、dlの次の要素でclearしてやればいい。 もっとも、それをやろうとすると変なID名をつけるか、変なCLASS名をつけることになって、 非常に気持ち悪いので、個人的にはあまりオススメしたくない。 # 隣接セレクタ"dl + *"がちゃんと使えればいいのに。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
皆さん本当にfloatがお好きなようで・・ floatという扱いが難しいものを使わなくても、relativeで行えば簡単です。 いずれにしても、 <dl id="contentTable"> <dt>表題</dt> <dd class="page">リンク</dd> <dd class="description">説明</dd> <dt>表題</dt> <dd class="page">リンク</dd> <dd class="description">説明</dd> </dl> とするか・・ <dl id="contentTable"> <dt>表題</dt> <dd> <dl> <dt>説明</dt> <dd>リンク</dd> </dl> </dd> <dt>表題</dt> <dd> <dl> <dt>説明</dt> <dd>リンク</dd> </dl> </dd> </dl> のようにマークアップすべきです。
- KI401
- ベストアンサー率53% (44/82)
dd { display: inline; }
お礼
お返事ありがとうございます。 dl dd { display: inline; } を追加したところ回り込みは回避できました！ しかしp1,p2などが一段落ちてしまっているのですが単純に追加だけでは ダメなのでしょうか？ CSSは詳しくないのですがwidthの指定も効いていないようです^^; お手数ですが補足を頂けますと幸いです！
補足
追記です。現在のCSSは以下のようになっています。 dl { padding: 15px 0 15px 20px; } dd { display: inline; } dl dd.sub { float: left; clear: both; margin-left: 2em; width: 55em; } dl dd.page { margin-left: 57em; }