creatersnest

dl dt ddを上手く使いこなすためのテクニクまとめ


htmlを初めて一番最初につまづくタグはtableタグやdlタグの表を使ったり、
リストなどを定義するタグ関連ではないでしょうか。
筆者も勉強し始めの頃はtable関連のタグが理解できず苦しんだ記憶があります。

dlタグを使えば苦手なtebleを使ったようなデザインにできたり、
新着情報やフォームなどの実装などいろんな箇所で役立つこと間違いなしです!
今日はdlタグをマスターしちゃいましょう!

 

基本編

<dl><dt><dd>の基本的な使い方

基本的な使い方としては定義・説明リストを表す際に使用します。
<dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を、
<dd>タグでそれに対応する説明を配置してリストを作成します。

 

<dl>の中で、1セットにした<dt><dd>を繰り返す

サンプル

 

ひとつの<dt>に対し<dd>を複数並べる

サンプル

 

<dl>を1セットにてし繰り返す

サンプル

 

応用編

<dt><dd>を横並びにし、新着情報として表示する

サンプル

<dt>と<dd>を横並びにするにはcssのfloatを使用します。
まずはhtml側から記載していきます。

次にcss側を記載します。
ここではわかりやすいように<dt>領域の背景を緑に、
<dd>領域の背景を灰色にしました。

 

<dl>を使って画像を横並びにする

サンプル

上の応用編です。同じくfloatを使って横並びにしていきます。
まずはhtml側から記載していきます。

次にcss側を記載します。

 

<dl><dt><dd>を使って横並びのテーブルを作成

サンプル

html側から記載します。

次にcss側を記載します。

 

<dl><dt><dd>を使って縦並びのテーブルを作成

サンプル

html側を記載します。
上の横並びテーブルと全く同じです。

次にcssを記載します。

 

まとめ

応用編の最後のサンプルを見て頂ければわかりやすいのですが、
htmlは全く同じで、cssだけで横並びと縦並びの切り替えをすることができます。

<table>で組むとhtmlからかなり修正しないといけないレイアウトが、
<dl>を使用するとcssのみの編集で修正ができてしまいます。
これからは<dl>と<table>タグどちらが向いているかを考えて
コーディングしていくと後々調整する際に便利になりそうですね!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleCSSのみで実装された今風のh1デザイン30選