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

最終更新日:2017年10月01日  (初回投稿日:2011年06月10日)

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

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

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

<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>
#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 を使うと、マーカーとテキストがずれて見える場合もあります(ブラウザによる)
ですので「リンク領域がテキストのみ」でも良い場合に使える構造です。

<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>
#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(表組)を作ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.