frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

意外と知られていない!?dlの直下にdivを置いてもOK!

スポンサードリンク


スポンサードリンク


質問サイトにもdl要素の直下にはdt、dd以外置いていけないという答えで終わっており意外と知られていないかもしれません。

MDNのdl要素のページでも下記のように記しています。

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

WHATWG HTMLは

要素の
要素に各名前 - 値グループをラップできます。これは、マイクロデータを使用する場合、またはグローバル属性がグループ全体に適用される場合、またはスタイリングの目的に役立ちます。

つまりCSSでスタイリングする目的でdivを挟むことに問題はありません。

ulはliしか直下に置けないですが、dlに関してはバリデータエラーが出ないことが確認できると思います。

dt ddをdisplay:flexで横並びにする

floatからflexへ移行してる流れでdtddは未だにfloatで横並びにしている人も多いと思います。
もちろんそれが悪い訳ではありません。選択肢を増やすことをこの記事では紹介したいと思います。

See the Pen Yxxbyz by funclur (@funclur) on CodePen.

一つ目は、dtにclearプロパティを指定し、floatを解除しています。dlの::after要素にもclearfixが必要ですね。

二つ目が、div要素を挟みdivにdisplay:flexを指定するだけです。

htmlは記述が増えますが、cssはプロパティ1つでdt,ddを横並びにすることができました。

dlのスタイリングにdt,ddだけでは要素が足りない場合は遠慮なくdivを挟みましょう!