dl - HTML

dl

dl は、説明リストを表します。

  • dl（description list）= 説明リスト
  • dt（description term）= 説明する言葉
  • dd（definition / description）= 定義文または説明文

description ： ディスクリプション

説明

<dl>
  <dt>説明したい言葉</dt>
  <dd>説明内容</dd>
</dl>
説明したい言葉
説明内容

Sample

index.html

<div class="dl-box">
    <dl class="clearfix side-by-side">
      <dt>説明したい言葉</dt>
      <dd>説明内容</dd>
    </dl>
  </div>
  <div class="dl-box">
    <dl class="clearfix side-by-side">
      <dt>説明したい言葉</dt>
      <dd>説明内容</dd>
    </dl>
  </div>

style.css

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.side-by-side {
  border: 1px solid black;
  padding: 2px 8px;
  margin: 0;
  display: inline-block;
  vertical-align: top;
}
.side-by-side dt {
  float: left;
  padding: 0;
  margin: 0;
  margin-right: 10px;
}
.side-by-side dd {
  float: left;
  padding: 0;
  margin: 0;
}
.side-by-side dt::after {
  content: '：';
}
.dl-box {
  padding: 0;
  margin: 0 0 20px 0;
}
説明したい言葉
説明内容
説明したい言葉
説明内容