【HTML】リスト表示に欠かせないdlについて、CSSを使ったデザインも踏まえてわかりやすく解説。
  • facebookページ
  • twitterページ
  • 2020.02.19

    【HTML】リスト表示に欠かせないdlについて、CSSを使ったデザインも踏まえてわかりやすく解説。

    HTMLでリスト表示をさせる場合には<dl>というタグを使用します。

    今回はこの<dl>について解説していきたいと思います。

    リスト表示はよく使うものなのでこの記事を読んでしっかりと学習してみてください。

    dlとは

    冒頭でも述べましたが、<dl>はリスト表示のためのタグです。

    正式には「description list(記述する・描写するリスト)」の略であり、リストの中でも定義といったものをリスト表示させるために用いられます。

    以前は「definition list(定義リスト)」でしたが、HTML5で変更され、用語的にも汎用性を持った意味に置き換えられました。

    このタグを使用することでブラウザ上で簡単にリスト表示をさせることが出来るようになります。

    これと似たようなタグで<ul>や<ol>といったタグもありますが、それぞれ異なる性質を持っていますので注意してください。

    dlタグはそれだけでは作用せず、このタグの中に<dt>タグと<dd>タグをネストして使用します。

    因みに<dt>タグは「description Term(項目)」で<dd>タグは「description(説明)」の略です。

    dlの基本的な使い方

    <dl>タグの基本的な記述方法は以下の通りです。

    <ul>や<ol>と違い、<dl>はその中に記述されているタグ<dt>と<dd>を必ず1回以上使用します。
    具体的な使用方法については自己紹介などが挙げられます。

    ブラウザでの表示

    CSSを利用せず表示させた場合のデフォルトはこのように段落っぽい表示になります。

    HTMLでは<dd>の部分がインデント表示されていることが確認できます。

    なおMicrosoft EdgeでもGoogle Chromeでもブラウザであれば同じようにインデント表示されます。

    CSSだけでも同じように表示させることは可能ですが、正しいタグの使い分けを覚えることでSEOに強くなったり管理や開発が楽になったりしますのでしっかりと覚えていきましょう。

    dtとddを複数使う方法

    先ほどdlにはdtとddを1回以上使うことが前提と説明しましたが、複数同時に使うこともできます。

    dtとddをそれぞれ複数回使う場合は次のようになります。

    dtを複数回使うケースとしては複数の定義が必要な場合などです。

    またddを複数回使うケースでは主に説明が複数に分けられることが想定される場合が多いでしょう。

    dfnタグを使う

    検索エンジンではdlもulもolも同じタグで違いを認識することが出来ません。

    この問題を解消するためには「<dfn>」というタグを使用します。

    この<dfn>を使用することで事典的な書き方をすることが出来ます。

    またブラウザでよく見かける斜体にも用いられています。

    ブラウザでの表示

    こうすることで検索エンジンにどういうものなのかを認識させると同時に、リストが定義であることを強調することが出来ます。

    dlをネストする

    dlタグはネストすることも可能です。

    あまり利用するシーンはないかもしれませんが、覚えておくと良いでしょう。

    ネストするには以下のようにします。

    ブラウザでの表示

    CSSを使って表示を変える

    制作現場ではよくつかわれているメジャーな方法ですが、dlやulなどのレイアウトをCSSを使ってデザインする方法があります。

    ここではdlでよく使われている表示方法をご紹介します。

    ブラウザでの表示

    <style>タグで”float: left”とすることで、横並びのdlを作ることが出来ます。

    また、widthで幅を指定することで左揃えのテキストにすることが可能です。

    dlを使用する際の注意

    dlに限ったことではないのですが、タグの定義はHTMLのバージョンによって頻繁に変わってきます。

    例えばdtやddには改行が入ります。これを強制的に改行しないようにするために以前では当たり前のようにcompact属性が使用されていました。

    しかし時代はHTML5になりこの方法は廃止されています。

    そして今では全てのデザインはCSSで一元管理することが当たり前の時代になりました。

    このようにHTMLのバージョンが異なる場合、以前まで使えていた技術がまるで使えなくなったり、使い方が変わったりということがありますので、コーディングをする際には理解していても定期的に変更区分を確認するよう癖付けておくようにしてください。

    また、HTMLに変更を加えていないのにレイアウトデザインがある日を境に突然崩れてしまった場合なども、定義に変更が加えられたり使用が不可能になったりということが挙げられます。

    こういった問題を未然に防ぐためにも、更新作業の必要ないようなWebサイトであっても定期的に巡回して確認することをお勧めします。

    まとめ

    いかがでしたか?

    今回はdlについて具体的な例を交え解説してみました。

    現代ではHTMLはそれだけで使うことが少なくなっており、コーディングの学習と同時に他の技術も学習することが必要となっていますが、Webサイト制作においてはHTMLはプログラミングなどよりも重要なセクターです。

    この部分がしっかりと出来ていなければ表示に不具合が発生します。

    表示の崩れたサイトではユーザー定着率も激減してしまいますので十分に理解しながら学習していきましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE