アイキャッチ画像
HOME > ウェブデザイン > 【CSS】定義リストを横並びにしたもののdtに画像を指定したらレイアウトが崩れてしまった件の解決策
公開日:2019.6.26
この記事は約7分で読めます。

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

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

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

SIRIUSレビューイメージ画像

定義リストのおさらい

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

 

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

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

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

こちらはあくまでイメージです。

・リスト項目1行目

・リスト項目2行目

・リスト項目3行目

   

   

   

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

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

こちらもイメージです。

1.リスト項目1行目

2.リスト項目2行目

3.リスト項目3行目

   

   

   

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

こちらもイメージです。

①リスト項目1行目

②リスト項目2行目

③リスト項目3行目

   

   

   

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

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

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

 

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

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

こちらもイメージです。

リンゴ

      赤くて丸い果物。山地は青森県が有名。

スイカ

      熱帯アフリカ原産のウリ科のつる性一年草。緑と黒の縞模様がトレードマーク。

定義リストの横並び

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

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

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

(ここでは”float”の説明は割愛します)

 

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

ポイント1:通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。

ポイント2:これからは汗の臭いや汚れを気にしなくて済みます。

ポイント3:万一の事故時は対象品の再購入価格を100%補償。

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

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

ここからはイメージではなく実際の表示になります。

太字設定や字下げ幅などは使用テーマや使用テンプレートによって若干の差があります。

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

ポイント1
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
ポイント2
これからは汗の臭いや汚れを気にしなくて済みます。
ポイント3
万一の事故時は対象品の再購入価格を100%補償。

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

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

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

ポイント1
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
ポイント2
これからは汗の臭いや汚れを気にしなくて済みます。
ポイント3
万一の事故時は対象品の再購入価格を100%補償。

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

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

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

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

キャプチャ画像 キャプチャ画像 キャプチャ画像

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

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

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

キャプチャ画像
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
キャプチャ画像
これからは汗の臭いや汚れを気にしなくて済みます。
キャプチャ画像
万一の事故時は対象品の再購入価格を100%補償。

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

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

キャプチャ画像
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
キャプチャ画像
これからは汗の臭いや汚れを気にしなくて済みます。
キャプチャ画像
万一の事故時は対象品の再購入価格を100%補償。

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

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

 

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

キャプチャ画像
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
キャプチャ画像
これからは汗の臭いや汚れを気にしなくて済みます。これからは汗の臭いや汚れを気にしなくて済みます。
キャプチャ画像
万一の事故時は対象品の再購入価格を100%補償。

レイアウトは正常です。

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

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

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

 

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

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

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

今回の解決策

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

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

 

具体的には

のところを

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

min-heightというのは、”どんなに内容量が少なくても最低でもこの高さは確保しておきますよ”という意味のスタイルです。

その結果がコチラ↓。

キャプチャ画像
通常会員は10時~21時が集荷・配達時間ですが、プレミアム会員だと6時〜24時まで延長されます。
キャプチャ画像
これからは汗の臭いや汚れを気にしなくて済みます。
キャプチャ画像
万一の事故時は対象品の再購入価格を100%補償。

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

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

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

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)