[15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）

今回は <dl>要素のリストでナビゲーションを作ってみます。
<dl>には 2つのアイテム（ <dt> と <dd> ）があるので、サイドバーのナビゲーションにピッタリです。
CSSを使います。今回は 横に並べたりしませんので 比較的簡単です。

dl要素でナビゲーションをつくる

<dt>要素をタイトルとして、<dd>要素はリンクテキストとして使います。

カテゴリー

はじめてのHTML

はじめてのCSS

ちょっとメモ

追加修正

月別アーカイブ

◯◯年12月

◯◯年11月

◯◯年10月

◯◯年9月

◯◯年8月

◯◯年7月

HTMLはこちら。

<div id="smp1">
<dl>
  <dt>カテゴリー</dt>
  <dd><a href="#">はじめてのHTML</a></dd>
  <dd><a href="#">はじめてのCSS</a></dd>
  <dd><a href="#">ちょっとメモ</a></dd>
  <dd><a href="#">追加修正</a></dd>
  <dt>月別アーカイブ</dt>
  <dd><a href="#">◯◯年12月</a></dd>
  <dd><a href="#">◯◯年11月</a></dd>
  <dd><a href="#">◯◯年10月</a></dd>
  <dd><a href="#">◯◯年9月</a></dd>
  <dd><a href="#">◯◯年8月</a></dd>
  <dd><a href="#">◯◯年7月</a></dd>
</dl>
</div>

CSSはこちら。

#smp1 {
	margin:1em 0;
	padding:0;
	width:280px;
	}
#smp1 dl {
	margin:0;
	padding:0;
	background:#e7f9ee  /*薄いグリーン（dd部分の背景）*/
	}
#smp1 dl dt {
	margin:0 0 0.7em;  /*下マージンを指定してddの開始を0.7文字分下げています*/
	padding:0;
	background:#69c3ae;  /*グラデーション未対応のブラウザ用*/
	background:linear-gradient(#327b60, #69c3ae 25%);  /*グラデーション*/
	font-size:14px;
	line-height:2.2em;  /*dtの高さを指定しています*/
	font-weight:bold;
	color:white;
	text-indent:0.7em;  /*0.7文字分の字下げ（左側の空き）*/
	}
#smp1 dl dd {
	font-size:14px;
	line-height:1em;  /*ddの高さを1文字分にしています*/
	margin:0;
	padding-bottom:0.7em;  /*ddの下部を0.7文字分空けています*/
	}
#smp1 dl dd a {
	display:block;
	color: #666;
	background: url(img/dd_bg.gif) no-repeat left center;  /*三角の画像*/
	margin-left:0.7em;  /*画像を左端から0.7文字分離しています*/
	text-indent:1.2em;  /*画像のスペースを作っています（テキストの始まりをずらす）*/
	text-decoration:none;
	}
#smp1 dl dd a:hover {
	color:#f90;
	background-position:2px center;  /*画像の位置を右に2pxずらします*/
	}

画像 を <dd>要素の中の <a>要素の背景に使用しています。
マウスオーバーの状態で、この画像が右に2pxだけ動くように指定しています（38行目）

<dd>要素の中に <ul>のリストを仕込む

わざわざ手動でマーカーを付けなくても、<dd>要素の中に <ul>のリストを入れ子にすれば、<li>要素のマーカーが使えます。

この「ほんっとに...」のサイドバーもこの構造です。
テンプレートがそうだったから。作り変えても良いのですが 面倒くさくて放置していますw

ただしこの構造だと、<li>要素の中の <a>要素に display: block を使うと、マーカーとテキストがずれて見える場合もあります（ブラウザによる）
ですので「リンク領域がテキストのみ」でも良い場合に使える構造です。

カテゴリー

• はじめてのHTML
• はじめてのCSS
• ちょっとメモ
• 追加修正

月別アーカイブ

• ◯◯年12月
• ◯◯年11月
• ◯◯年10月
• ◯◯年9月
• ◯◯年8月
• ◯◯年7月

HTMLはこちら。

<div id="smp2">
<dl>
  <dt>カテゴリー</dt>
  <dd>
  <ul>
    <li><a href="#">はじめてのHTML</a></li>
    <li><a href="#">はじめてのCSS</a></li>
    <li><a href="#">ちょっとメモ</a></li>
    <li><a href="#">追加修正</a></li>
  </ul>
  </dd>
  <dt>月別アーカイブ</dt>
  <dd>
  <ul>
    <li><a href="#">◯◯年12月</a></li>
    <li><a href="#">◯◯年11月</a></li>
    <li><a href="#">◯◯年10月</a></li>
    <li><a href="#">◯◯年9月</a></li>
    <li><a href="#">◯◯年8月</a></li>
    <li><a href="#">◯◯年7月</a></li>
  </ul>
  </dd>
</dl>
</div>

CSSはこちら。

#smp2 {
	margin:1em 0;
	padding:0;
	width:280px;
	}
#smp2 dl {
	margin:0;
	padding:0;
	background:#ecf8fe  /*薄いブルー（dd部分の背景）*/
	}
#smp2 dl dt {
	margin:0;
	padding:0;
	background:#7abddc;  /*グラデーション未対応のブラウザ用*/
	background:linear-gradient(#357fb1, #7abddc 25%);  /*グラデーション*/
	font-size:14px;
	line-height:2.2em;  /*dtの高さを指定しています*/
	font-weight:bold;
	color:white;
	text-indent:0.7em;  /*0.7文字分の字下げ（左側の空き）*/
	}
#smp2 dl dd {
	margin:0;
	padding:0
	}
#smp2 dl dd ul {
	margin:0;
	padding:0.7em 0 0.7em 2em  /*左側はマーカーのスペースを2文字分、上下は0.7文字分のスペース*/
	}
#smp2 dl dd li {
	font-size:14px;
	line-height:1.7em;  /*li要素の高さ*/
	margin:0
	}
#smp2 dl dd a {
	color:#666;
	text-decoration:none;
	}
#smp2 dl dd a:hover {
	color:#f90;
	}

次回予告

いかがでしたか？　リストのついでに CSSの話が多かったですね。
（要素の説明だけでは 実際に表示するとき CSSの知識もないとムリだから セットで説明しました）
今回でリスト関連の要素については終わります。

前回 display: table が先に出てきちゃいましたが、display: table は、<table>要素ではない要素を <table>要素の性質にする CSSなんです。
次回から、<table>要素を使って table（表組）を作ってみましょう。