dl・dt・ ddタグを使ってみよう

tags

ブログをやっていると毎日のようにあたらしい発見があります。

最近、これは便利だなあと思った発見、それが「説明リストタグ」とよばれる「dl・dt・ ddタグ」。

まだ使ったことがないひとも、けっこう多いのでは?

今回は、dl・dt・ ddタグの便利な使い方を紹介したいと思います。

ちなみに、これに関しては「こんな使い方があるよ」というだけにして、むずかしい説明はいっさいしないつもりです。

dl・dt・ ddタグが「説明リストタグ」とよばれる理由

説明リストタグとよばれるdl・dt・ ddタグは、複数ある事柄について「これはこういうものですよ」と、ひとつずつ説明(定義)してあげるときに使うタグのことです。だから「説明リストタグ」とよばれています。

dl・dt・ddタグの便利な使い方

dl・dt・ddタグは、リストタグ(ol・ul・liタグ)の代わりに使うと、よりスマートできれいな印象にみえることがあります。

リストタグというのは、こういうの(念のため)。

  • 清少納言
    「枕草子」の作者
  • 紫式部
    「源氏物語」の作者
  • 鴨長明
    「方丈記」の作者
<ul>
 <li> 清少納言 <br>「枕草子」の作者 </li> 
 <li> 紫式部 <br>「源氏物語」の作者 </li> 
 <li> 鴨長明 <br>「方丈記」の作者 </li> 
</ul>

これをdl・dt・ ddタグを使ってあらわすとこうなります。

清少納言
「枕草子」の作者
紫式部
「源氏物語」の作者
鴨長明
「方丈記」の作者
<dl>
 <dt> 清少納言 </dt> 
 <dd> 「枕草子」の作者 </dd> 
 <dt> 紫式部 </dt> 
 <dd> 「源氏物語」の作者 </dd> 
 <dt> 鴨長明 </dt> 
 <dd>「方丈記」の作者 </dd>
</dl>

上の例では両方のちがいが分かりやすいように背景色のついた枠でかこっていますが、dl・dt・ddタグはこんなかんじで枠線や背景色のついた枠でかこってあげると、よりスタイリッシュでクールな印象になります。

どうですか?

なんかちょっと便利だと思いませんか、このdl・dt・ddタグ。

ここで見くらべてみたように、リストタグと改行タグ(brタグ)をいっしょに使うときなんかは、dl・dt・ddタグのほうがかっこよくみえると思います。

このdl・dt・dd、使いどころが多くてホント便利です。

よかったらぜひ使ってみてくださいね。

では、きょうはこんなところで。