t-hoso.net

【HTML5.2】dlの中にdiv入れられるようになったことが嬉しくて...

とんでもなくご無沙汰な更新になってしまいました。いつもブログを更新しなくちゃなーと思いつつ、スマホばっかり触って家では全然PCに触らなくなってしまいました。このままではいけませんね...反省です。

今回は自分の備忘録にもしておこうとHTMLのテクニカルな内容になります。

趣味全開の内容も今後アップしていきます（たぶん）

では、今回の内容です?

HTML5.2で追加された内容に
「dlの子要素としてdivが追加できる」
という内容があります。

HTML5.2が勧告された時には一応内容をチェックしていたはずなのに、なぜかこの内容が頭から抜けていて、最近HTML5.2のことを調べなおす機会があり、この事実を再確認したわけです。

∑(ﾟ∇ﾟ|||)はぁうっ！

ってなりました。なりましたよ。
HTML5.2の追加点を丁寧に解説してくれているサイトをいくつか見ましたが、この内容ってわりとシレッと説明されているだけのところが多いんですけど、これ、めっちゃ便利じゃないですか？？

ちなみにdlは定義リスト（用語説明リスト）です。

用語をdt、その説明をddでマークアップして、その全体をdlで囲みます。

例）

<dl>
<dt>肉まん</dt>
<dd>中華まんの一種、中に肉が入っている。うまい</dd>
<dt>あんまん</dt>
<dd>中華まんの一種、中にあんこが入っている。あまい</dd>
<dt>ピザまん</dt>
<dd>中華まんの一種、ピザソースが入っている。うまい</dd>
</dl>

これが基本形です。
特にCSSを指定しないブラウザでは、以下のように表示されます。

で、ですね、このリストをサイトを作っていると使いたいところがちょくちょく出てくるわけです。

例えば...

<h2>サービス一覧</h2>
<dl>
<dt>初期設定</dt>
<dd>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</dd>
<dt>サポート</dt>
<dd>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</dd>
<dt>訪問修理</dt>
<dd>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</dd>
</dl>

このままブラウザで表示をすると以下のような感じです。

でも、実際にデザインとしては以下のように仕上げたいと思った場合...

これまではdlの子要素にはdtとddしか置くことができず、このデザインをdlのリストから作成するのは無理でした（めちゃくちゃCSSを凝って書けばできそうですけど現実的じゃない）

なので、これまではしぶしぶdl、dt、ddではなく、小見出しと本文でdivやらsectionやらで囲んで処理をしていました。

<h2>サービス一覧</h2>

<section>
<h3>初期設定</h3>
<p>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</p>
</section>

<section>
<h3>サポート</h3>
<p>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</p>
</section>

<section>
<h3>訪問修理</h3>
<p>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</p>
</section>

上記のsectionにクラスなんかをつけてフロートやらインラインブロックやらで並べるイメージです。

これで一応、思った体裁を作ることはできていたのですが、やっぱりCSSを外した素のHTMLで見れば、文章の流れ的にここは小見出し＋本文よりも用語説明リストの方がしっくりくるわけです。
これまで私は、ずーーっとこのもやもやを抱えながらページを作っていたわけです。

が！今回のdlの中にdivを入れられることによって、下記のマークアップが可能になりました。

<h2>サービス一覧</h2>
<dl>
<div>
<dt>初期設定</dt>
<dd>エンジニアがうかがって導入されるシステムの初期設定をおこないます。</dd>
</div>

<div>
<dt>サポート</dt>
<dd>使い方がわからなくなった時に24時間お電話やチャットで対応いたします。</dd>
</div>

<div>
<dt>訪問修理</dt>
<dd>故障や不具合が発生した場合に年中無休でエンジニアが訪問対応いたします。</dd>
</div>
</dl>

で、ここに以下のCSSをかけてあげるわけです。

dl {
display:flex;
justify-content: space-around;
}
dl div {
width:30%;
}
dt {
text-align:center;
font-weight:bold;
}
dd {
text-align:justify;
margin:0;
}

これで、もうめちゃくちゃスッキリです！
もやもや解消です！

これからは、積極的に使っていこうと思います。

これ、もっと注目されてもいい変更点なんだと思うんだけどなぁ...