ブロック要素「dlタグ」とは? 使い方・横並びにする方法も分かりやすく解説!

dl要素について知りたい人

dl要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • dl要素とは?
  • dl要素の使い方
  • 横並びにする方法

dl要素はdt要素やdd要素といっしょに使います。

dlはdefinition listの略で定義リストを表す要素です。

定義リストはdl要素で範囲で表現し、定義する用語をdt要素で、用語の説明をdd要素で表現します。

よく利用する要素の一つなのでしっかりと理解しておくことをオススメします!

そこでこの記事ではdl要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

dl要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.dl要素とは?

dl要素は、description listの略で説明型リストを表す要素です。

dl要素の中にdt要素で定義・説明される言葉をdd要素でそれに対応する説明を配置してリストを作成することができます。

例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。




2.dl要素の使い方

それではdl要素の使い方をみていきましょう。

・・・

<dl>
 <dt>HTML</dt>
 <dd>HTMLはWebページを作成するために開発された言語です。 </dd>
 <dt>CSS</dt>
 <dd>CSSはWebページのスタイルを指定するための言語です。</dd>
</dl>

・・・

上記の例ではHTMLとCSSという用語(dt要素)に対して、説明(dd要素)を付けたものとなっています。

辞典などのように用語と用語説明文を掲載すべき内容に活用されやすいです。




3.横並びにする方法

ここではCSSで複数行のdt要素とdd要素を横並びにする方法について解説していきます。

dt要素とdd要素を改行させないcompact属性がHTML5からなくなったので、CSSで整える必要があります。

以下はHTMLのサンプルプログラムです。

・・・

<dl>
 <dt>HTML</dt>
 <dd>HTMLはWebページを作成するために開発された言語です。 </dd>
 <dt>CSS</dt>
 <dd>CSSはWebページのスタイルを指定するための言語です。</dd>
</dl>

・・・

次にdt要素とdd要素が横並びになるようにCSSを整えていきましょう。

・・・

dl {
 display: flex;
 flex-wrap: wrap;
}
dl dt {
 width: 50%;
}
dl dd {
 width: 50%;
}

・・・

上記のようにすることで横並びになります。

是非試してみてはいかがでしょうか?

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。