dl dt dd の横並びと縦並びスマートフォンとPCでの表示の切り替え Prog-lab

HTML

2023.12.15

Prog-labの趣旨は解説よりも、メモ置き場に近い情報コーナーです。

タグの各意味と説明、目的
用語が上揃えとなるパターン
用語が下揃えとなるパターン

タグの各意味と説明、目的

dl,dt,ddを用い、tableのように横並びに表示させる。スマートフォンなどについてはdd,dtで改行させる。

dl 説明リスト
dt 説明たしい用語
dd 説明

用語が上揃えとなるパターン

下線(border-bottom)をdd側で設定し、paddingで左に間隔をあける。marginではない。marginをpx指定すると表示端末やブラウザのサイズによって予期せぬ動きをすることがある。%が望ましい。

一般的には上揃えが好まれ、よく用いられます。

<dl class="dl-dt-dd-list">
<dt>埼玉県</dt>
<dd>埼玉県についての説明文が書かれる。<br />
改行されることもありうる。</dd>
<dt>東京都千代田区</dt>
<dd>東京都千代田区について説明文が書かれる。<br />
改行されることもありうる。</dd>
</dl>

.dl-dt-dd-list dt{ 
    float: left;
    clear: left;
    width: 20%;
}
.dl-dt-dd-list dd{
    margin: 0;
    border-bottom: 1px solid #525252;
    padding: 0 0 0 20%;
}

埼玉県: 埼玉県についての説明文が書かれる。
改行されることもありうる。
東京都千代田区: 東京都千代田区について説明文が書かれる。
改行されることもありうる。

◆一番上にも線を引きたいときは、dlにborder-topを指定すればよい

dl.dl-dt-dd-list{
    border-top:1px solid #525252;
}

埼玉県: 埼玉県についての説明文が書かれる。
改行されることもありうる。
東京都千代田区: 東京都千代田区について説明文が書かれる。
改行されることもありうる。

◆スマートフォンで、縦に並ぶようにするには以下のコードを追加する。

@media only screen and (max-width: 640px){
  .dl-dt-dd-list dt{ 
    width: 100%;
    background-color:#d4d4d4;
    text-align:center;
  }
  .dl-dt-dd-list dd{
    margin: 0;
    padding: 3px;
    border: 0;
  }
}

用語が下揃えとなるパターン

dtとddをinline-blockとし、幅を指定する。下揃えになるため、border-bottomをdt,ddに書いて問題ない。用語ごとにdlで区切り、dlにborder-bottomを書く方法もあるが、構造上は望ましくない。

<dl class="dl-dt-dd-list-2">
<dt>埼玉県</dt>
<dd>埼玉県についての説明文が書かれる。<br />
改行されることもありうる。</dd>
<dt>東京都千代田区</dt>
<dd>東京都千代田区について説明文が書かれる。<br />
改行されることもありうる。</dd>
</dl>

.dl-dt-dd-list-2 dt{ 
    display:inline-block;
    width:20%;
    border-bottom: 1px solid #525252;
}
.dl-dt-dd-list-2 dd{
    margin: 0;
    display:inline-block;
    width:80%;
    border-bottom: 1px solid #525252;
}

埼玉県: 埼玉県についての説明文が書かれる。
改行されることもありうる。
東京都千代田区: 東京都千代田区について説明文が書かれる。
改行されることもありうる。

スマートフォンでは縦に並ぶようにするには以下のコードを追加する。

@media only screen and (max-width: 640px){
  .dl-dt-dd-list-2{
    border: 0; // 上に線を引いているとき、線を消す  
  }
  .dl-dt-dd-list-2 dt{ 
    display:block;
    width:100%;
    background-color:#d4d4d4;
    text-align:center;
    border: 0;
  }
  .dl-dt-dd-list-2 dd{
    display:block;
    width:100%;
    margin: 0;
    padding: 3px;
    border: 0;
  }
}