Smallville

smallville

Bootstrapで改行されないdlをつくる方法

CSS

Bootstrapを使用しているWebサイトでdlのリストを改行させずにスマートに表示させる方法を紹介します。

dlとはどのようなタグなのか

まずは、dlタグの説明を行います。olは順番を表すリスト表示で、ulは順序のないリスト表示で使用するタグです。dlタグは定義付けのリスト表示で使用するタグです。

dlタグの使い方

dlタグのなかにdtとddダグを入れます。dtタグの内容をddで定義づけます。例えば下記のように

加入者番号
加入時に決められた7桁の番号
パスワード
ログイン時に必要な自分で決めた英数字
公開確認番号
排出事業者に伝える6桁の数字
マニフェスト番号
11桁の数字

コードはこのように記載します。

<dl>
<dt>加入者番号</dt><dd>加入時に決められた7桁の番号</dd>
<dt>パスワード</dt><dd>ログイン時に必要な自分で決めた英数字</dd>
<dt>公開確認番号</dt><dd>排出事業者に伝える6桁の数字</dd>
<dt>マニフェスト番号</dt><dd>11桁の数字</dd>
</dl>

改行せずにわかりやすくdlリストを表示する方法

ではこのdlリストをわかりやすく表示させてみたいと思います。

改行されたdl

加入者番号
加入時に決められた7桁の番号
パスワード
ログイン時に必要な自分で決めた英数字
公開確認番号
排出事業者に伝える6桁の数字
マニフェスト番号
11桁の数字

いかがでしょうか。見やすく表示されていると思います。この表示方法は、dlリストのclass名に「dl-horizontal」をつけるだけでかまいません。

class名に「dl-horizontal」をつけるだけでok。

サンプルコード

<dl class="dl-horizontal">
<dt>加入者番号</dt><dd>加入時に決められた7桁の番号</dd>
<dt>パスワード</dt><dd>ログイン時に必要な自分で決めた英数字</dd>
<dt>公開確認番号</dt><dd>排出事業者に伝える6桁の数字</dd>
<dt>マニフェスト番号</dt><dd>11桁の数字</dd>
</dl>

このようにdlにクラス名を追加するだけでわかりやすくdlリストが表示されます。bootstrapを使用する際にはぜひ活用しましょう。

スポンサーリンク