定義タグを横並びにする方法

定義タグとは

HTML

 <dl>
 <dt>定義する言葉</dt>
 <dd>説明文が入ります。</dd>
 </dl>

と記述するタグです。なんで定義タグを横並びにしないといけないかというとお仕事で使う機会が結構あるからです。例えば文章中に※1とあり、段落の後に※1の説明をするなどです。その時に何も指定しないと上記の例みたいに縦に並びますが、<dd>説明文が入ります。</dd>の部分を<dt>定義する言葉</dt>の右側に並べるようにデザインされたものが意外に多いです。

でも指定の方法は簡単です。指定は以下のようになります。

HTML

dt {
float: left;
width: 75px;
}

dd {
margin-left: 75px;
}

ポイントはddタグにマージンを記述することです。そして注意点はdtタグのwidthとddタグのmargin-leftは同じ幅を指定しないとズレがでてきます。

この方法以外にもmarginの指定だけでやる方法や、positionの指定でやる方法がありますが、おいおい載せます。

私はこの方法でよく企業のトップページにある最新情報にも使ってます。以下のようなものです。

HTML


<dl>
<dt>日付</dt>
<dd>配信する情報</dd>
</dl>

しかしこの方法では定義タグを使用すべきかどうかという疑問が残ります。最初に説明しましたが、ある言葉を説明する時に使用するタグなので「日付」を「配信する情報」で説明しているのはおかしいのではと思ってしまいます。
そこまで厳密にやるべきなのかは会社やサイト、もしくは個人の事情によって異なると思います。何かいい方法等がありましたらご報告します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください