POSTED: / UPDATED:2019年11月27日

dlの中にdivを入れて作るレイアウト

dlの中にdivを入れるのは問題ありません。これを使うと、こちらのようなレイアウトを1つのdlだけで実現できます。

PCサイズでは1行ごとに左右に並び、スマホサイズでは縦1列に並ぶレイアウトです。

このレイアウトは意外と難しく、2つのdlを左右に並べてしまうと、スマホで1列にしたときに左のdlが上、右のdlが下になってしまいます。

1行ごとに折り返すのためには、1つのdlでまとめる必要があります。

ソースコードの例

HTML

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="clearfix">
<dl class="definition_list">
<div>
<dt>項目1</dt>
<dd>内容1</dd>
</div>
 
<div>
<dt>項目2</dt>
<dd>内容2</dd>
</div>
 
<div>
<dt>項目3</dt>
<dd>内容3</dd>
</div>
 
<div>
<dt>項目4</dt>
<dd>内容4</dd>
</div>
 
<div>
<dt>項目5</dt>
<dd>内容5</dd>
</div>
 
<div>
<dt>項目6</dt>
<dd>内容6</dd>
</div>
</dl><!-- /.definition_ist -->
</div>

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
dl.definition_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}
dl.definition_list div{
    width: 48%;
    margin: 0;
    padding: 0;
}
dl.definition_list dt{
    float: left;
    width: 80px;
    padding: 10px 0;
    border-top: solid 1px #A5A5A5;
    font-size: 12px;
    font-weight: bold;
}
dl.definition_list dd{
    float: left;
    width: calc(100% - 80px);
    padding: 10px 0;
    border-top: solid 1px #A5A5A5;
    font-size: 12px;
}
/* 768px以下 */
@media only screen and (max-width: 48em) {
dl.definition_list{
    display: block;
}
dl.definition_list div{
    width: 100%;
}dl.definition_list dt{
    font-size: 10px;
}
dl.definition_list dd{
    font-size: 10px;
}
}
/* floatがあるのでclear */
.clearfix::after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: "";
}

実際の表示

このソースを実際に表示させるとこのようになります。スマホ(横幅768px以下)では1列になります。

項目1
内容1
項目2
内容2
項目3
内容3
項目4
内容4
項目5
内容5
項目6
内容6

このような表示になります。

dtとddを横並びにするのにfloatを使っているので、全体をdivで囲い、after要素で最後にclearを入れています。

よく使うけど意外と難しい、という感じの組み方だと思いますので、ご紹介挿せていただきました。

この記事をシェアする

  • Xにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア

関連記事