dl：description list のレイアウト

dl：description list

• description listの略で用語説明型リストを表す要素
• HTML5より前は、definition listの略で定義リストを表す要素でした
• dl要素内は、dt：description term と dd：description details 以外入りません

dtとddの横並び

• 横に並べて１行として表現することが多い（スマートフォンでは、縦の並びが多い）

  <dl>
    <dt>HTML</dt>
    <dd>Webページの文章構造を記する言語</dd>
    <dt>CSS</dt>
    <dd>Webページの視覚的表現を行う言語</dd>
    <dt>JavaScript</dt>
    <dd>Webページの変化や動きを表現する言語</dd>
  </dl>

flexで指定

• 親要素が flex が指定されている場合、子要素には幅指定が必須
• dl 全体をwrap（囲む）する
• 「flex-wrap: wrap;」は、複数行を flex にするときに必須です

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
dl {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  margin: 30px auto;
}
dt {
  width: 7em;
}
dd {
  width: calc(100% - 7em);
}
dt, dd {
  border-bottom: 1px solid #999;
  line-height: 3.0;
}

calc()

• 「calc()」は、プロパティの値を計算式で実行することができます
• 計算された値は計算式自体であり、結果の値ではありません
• 「7em」は、7文字分の横幅の意味

gridで指定

• 「display: grid;」の場合、「grid-template-columns:」でカラム幅を左から順に指定していきます
• 「dt, dd」は、個別に幅指定は不要
• dt が７文字分、dd が残りすべての幅という記述のみ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
dl {
  display: grid;
  grid-template-columns: 7em 1fr;
  width: 600px;
  margin: 30px auto;
}
dt, dd {
  border-bottom: 1px solid #999;
  line-height: 3.0;
}

実践例

• プロフィールを作成

<div class="container">

<main class="main">

  <section class="section-wrap">
  <h2>プロフィール</h2>
    <dl>
      <dt>生年月日：</dt><dd>1998.2.22</dd>
      <dt>出身：</dt><dd>東京都池袋</dd>
      <dt>趣味：</dt><dd>カメラ撮影 / 音楽を聴くこと</dd>
      <dt>好きな言葉：</dt><dd>想像すること　できることできないことことが沢山ある　気づくことから始めよう（オノヨーコ）</dd>
    </dl>
  </section>
  <section class="section-wrap">
    <h2>略歴</h2>
    <dl>
      <dt>1998年02月：</dt><dd>東京都池袋で産まれる</dd>
      <dt>2004年04月：</dt><dd>池袋の小学校に入学</dd>
      <dt>2016年04月：</dt><dd>写真の専門学校に入学</dd>
      <dt>2018年12月：</dt><dd>Webデザインスクールに入学</dd>
    </dl>
  </section>
</main>

</div><!-- /.container -->

/* ------------------------------------
  layout
------------------------------------ */
.container {
  max-width: 680px;
  margin: 0 auto;
}

/* ------------------------------------
  section
------------------------------------ */
.section-wrap {
  margin-bottom: 40px;
}
  .section-wrap h2 {
    margin-bottom: 20px;
    padding: 8px 0 6px 1em;
    background-color: #397cc3;
    color: #fff;
    font-size: 22px;
  }
  .section-wrap dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 22px;
  }
    .section-wrap dt, .section-wrap dd {
      padding: 6px 0;
    }
    .section-wrap dt {
      width: 120px;
      font-weight: bold;
    }
    .section-wrap dd {
      width: calc(100% - 120px);
    }