Home > TagScript > html、css、Java > html5css3

定義リスト<dl><dt><dd>に、cssでスタイルを追加する

新規作成日 2017-02-07
最終更新日

定義リストと呼ばれる<dl><dt><dd>タグは、cssを指定しないとあまり使いみちがないように感じます。しかし、cssでスタイルを追加するといろいろな使いみちがあります。

並べて表示する

htmlタグ

以下のように、htmlタグを記述します。

<dl>
	<dt>margin-top:</dt>
	<dd>上</dd>

	<dt>margin-bottom:</dt>
	<dd>下</dd>

	<dt>margin-left:</dt>
	<dd>左</dd>

	<dt>margin-right:</dt>
	<dd>右</dd>
	
	<dt>margin:  0;</dt>
	<dd>上下左右</dd>

	<dt>margin: 0 0;</dt>
	<dd>上下 左右</dd>

	<dt>margin: 0 0 0;</dt>
	<dd>上 左右 下</dd>

	<dt>margin: 0 0 0 0;</dt>
	<dd>上 右 下 左</dd>
</dl>

cssを設定しない状態の表示

cssを指定しないと以下のように表示されます。これでは、使いたくありません。(cssリセッタ、normalize.css適用後の状態です。)

cssを設定しない状態の表示

横に並べる場合のcss

cssを設定しない状態の表示

dl{
  line-height : 1.4em;
  padding : 10px 10px 10px 10px;
  overflow : auto;
}

dt{
  float : left;
  clear : both;
  width: 200px;
}

dd{
}

横並びにするcssを追加した結果

横並びにできました。定義リスト

は、cssの設定でいろいろなデザインが表現できそうです。

横並びにするcssを追加した結果

参考サイト

以下のサイトを参考にしました。いろいろなcssスタイルを適用して様々な使い方を試してみましょう。