CSSでdlのdtとddを横並びにする方法

定義リスト「dl」タグを使用したときに、普通はdtとddが2行に表示されます。

下記普通にdl要素を記述したときの見え方

name

xxxxxxxxxxxx

mail

xxxxxxxxxxxx

tel

xxxxxxxxxxxx

code

<dl>
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

それを横並び（inline）で表示したい場合の方法を紹介します。

dtとddを横並びにするCSS

下記コードのスタイルを当てた表示

name

xxxxxxxxxxxx

mail

xxxxxxxxxxxx

tel

xxxxxxxxxxxx

code

// html
<dl class="dl-inline">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

// CSS
.dl-inline dt {
  float: left;
  clear: left;
  margin-right: 10px;
}
.dl-inline dd {
  margin-left: 0px;
}

上記だとdtのboldが外れてしまっているので、必要であればfont-weightなどで調整してください。
また、dtのwidthをそろえたい場合は、dtに対してwidthを指定してあげればOKです。

name

xxxxxxxxxxxx

mail

xxxxxxxxxxxx

tel

xxxxxxxxxxxx

code

// html
<dl class="dl-inline same-width">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>
// CSS
.dl-inline dt {
    float: left;
    clear: left;
    margin-right: 10px;
}
.dl-inline dd {
    margin-left: 0px;
}
.dl-inline.same-width dt {
    width: 120px;
}

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

htmlの基礎から学べるのでおすすめ
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

SASSの基本が学べます。
Web制作者のためのSassの教科書

Tweet