【CSS】定義リストを横並びにしたもののdtに画像を指定したらレイアウトが崩れてしまった件の解決策

定義リスト（dl,dt,dd）の横並びなんてもう完全に頭に入っていたものと思っていたら、思わぬところで躓つまづいちゃいましたよ。

（”つまづく”を変換すると上のような漢字になるんですね。なんとなく読めはしても書けはしないなぁ）

定義リストのおさらい

定義リストって何？っていう方もいそうなので、ここでちょっとだけ復習しておきます。

 

通常のリストは項目を箇条書きにするときに使います。

HTMLではul,liを使って表示されます。

何もしなければ各リスト項目のアタマには中黒（・）がつくことが多いでしょうか。

数字リストっていうのもあります。

リストのアタマが数字になってるものです。

リストのアタマが丸数字になってるものもあったりします。

これに対し定義リスト（dl）というのは、定義する用語（dt）とその用語の説明（dd）を対ついにしたリストのことです。

たとえば「リンゴ」という単語があってその説明として「赤くて丸い果物。山地は青森県が有名。」とあったとします。

この場合「リンゴ」という定義（dt）と「赤くて丸い果物。山地は青森県が有名。」という説明はセット（対）になってます。

 

定義リストを使ってHTML化するとコチラのようになります。

その結果、ブラウザ上では（一般的には）こんなレイアウトで表示されます。

定義リストの横並び

この定義リスト、何もいじらずそのまま使ってもももちろん問題はないですよ。

ただ見た目の問題からか、定義（dt）と説明（dd）を同じ位置（高さ）の横並びにするレイアウトも多く見うけられます。

オーソドックなやり方としては”float”を使って横並びにする方法でしょうか。

（ここでは”float”の説明は割愛します）

 

たとえばこんな文言があったとします。

これを定義リストで表示するとこんなHTMLコードになります。

（※本来の定義リストの使い方とはちょっと異なるかも）

先ほどのHTMLコードの実際の表示がコチラ↓です。

そして上記を横並びにするため、以下のようにfloatを使ってスタイルを追加します。

”float”を使った実際の表示がコチラ↓です。【A】

うまく横並びになってくれました。

定義リスト横並びのレイアウト崩れ

さてここからが本題です。

「ポイント1」「ポイント2」「ポイント3」というテキストを画像に変えてみます。

使用画像はコチラ↓。（幅38px、高さ44px）

これらを該当するテキスト部分と差し替えてみます。

変更後のコードはこちら↓

そして実際に表示してみた結果がコチラ↓です。【B】

レイアウトのズレはさておき、ポイント画像と説明テキストの間隔が広すぎるので、dd {margin-left: 130px;}をdd {margin-left: 50px;}に変更して詰めておきます。

その結果がコチラ↓。【C】

【A】のようにdtにテキストを指定した場合は何の問題もなかったのに【B】や【C】のようにテキストを画像に置き換えただけでレイアウト崩れが起きてしまいました。

【B】と【C】の違いはddのマージンの違いだけですが、どちらも3つ目のポイント3が”字下げ”のような状態になってますでしょ。

 

ではテキストを増やしてみたコチラ↓はどうでしょう。【D】

レイアウトは正常です。

【C】との違いは、ポイント2の説明テキストの分量が増えて2行にまたがっていることです。

テキストの分量が多いとこのようにレイアウト崩れは起きません。

でも説明が1行で終わってしまう、つまり説明テキストの分量が少ないと次のddがレイアウト崩れ（字下げ状態）になってしまうんです。

 

これまでの経験から”float”を使ったときのレイアウト崩れは、だいたいがfloat:clear;かoverflow:hidden;かdisplay:block;かmarginやpaddingを敢えてつけてみるか、画像の幅＆高さを敢えて設定するとかで解決するんですが…何やっても一切変わらず。

いやあ、まいりましたね。

まぁ最終的にはどうにか解決したものの、CSSってこんなに難しかったっけ？と再確認させられましたわ。

今回の解決策

その解決策というのは、説明（dd）に最低高さ（min-height）を設定することです。

テキスト分量が2行になればレイアウト崩れが起きないということは、ある程度の高さを最初から確保しておけばレイアウト崩れにはならないだろうということです。

 

具体的には

のところを

とmin-heightを加筆してやります。

その結果がコチラ↓。

ちなみにこのmin-heightの数値ですが、画像の高さよりは大きくする必要があるものの、ほかの要素のmarginやpadding・line-heightの値などによってもいろいろ変動するので、実際に数値を入れてみてちょうどいい数値をその都度確認するしかないようです。

なお今回はfloatを使っての定義リストの横並びでしたが、そもそもテーブル（table）を使ったりflexboxを使って横並びするやり方もあります。

その辺はお好みでどうぞ。