[15-4-3] リストでナビゲーション( その3 : dl要素でサイドメニュー)

サイドメニューなどによく使われる、dl要素のナビゲーションをCSSで整えてみましょう。

今回でやっと「リスト要素」最終です。
早く終わらせて次に行きたいので、ガラにも無く2日連日更新です。

dlでサイドナビゲーションを作ろう

これは↓プレビュー画像。クリックするとサンプルHTMLで見られます。
前回、前々回と同じサンプルページですけどね。(別ウィンドウで開く) 。
honttoni15-4.html

サンプルのダウンロードはこちら

★サンプルは前々回、前回とおなじです。上のサンプル画像クリックでHTMLファイルを開きます。
★開いたHTMLのソースをブラウザで読んでもらえばOKですが、下記でzipをダウンロードOK。
→本日のサンプル(sample15-4set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

dl要素でナビをつくる

ますはHTMLソースを見てみましょう。すっきりしてますね。

<dl class="sample3">
<dt>最近の記事</dt>
	<dd><a href="#">リストを作ってみよう</a></dd>
	<dd><a href="#">GIFとJPEGの違い</a></dd>
	<dd><a href="#">ブラウザでソースを見る</a></dd>
<dt>月別アーカイブ</dt>
	<dd><a href="#">2011年5月</a></dd>
	<dd><a href="#">2011年4月</a></dd>
	<dd><a href="#">2011年3月</a></dd>
	<dd><a href="#">2011年2月</a></dd>
	<dd><a href="#">2011年1月</a></dd>
	<dd><a href="#">2010年12月</a></dd>
</dl>

dl要素に「.sample3」というclass名を付けてます。
idでもいいんです。ページに1回しか使わなければ。
私は、サイドナビを途中で1回切って、バナーを貼ったりして、その後に改めてdl要素をおく場合が多いので、たいがいはclassにしています。

★idとclassの違いについては…「CSSレイアウトメモ : 本文2段組[0]基本のキ : IDとCLASSの違い」をご覧ください

CSSソースはこちらになります

dl.sample3 {
	margin: 0px;
	padding: 0px 0px 5px;
	background: #DFF4E7;
	width: 240px;
}
dl.sample3 dt {
	background: url(../img/dt_bg.jpg) repeat-x;
	height: 32px;
	width: 240px;
	font-size: 15px;
	line-height: 32px;
	font-weight: bold;
	color: #FFF;
	text-indent: 0.7em;
	margin-bottom: 5px;
}
dl.sample3 dd {
	font-size: 12px;
	line-height: 18px;
	height: 18px;
	text-indent: 0.7em;
	margin: 0px;
	padding-bottom: 5px;
}
dl.sample3 dd a {
	color: #666;
	background: url(../img/dd_bg.gif) no-repeat 0px 0px;
	text-decoration: none;
	padding-left: 14px;
}
dl.sample3 dd a:hover {
	color: #F90;
	background: url(../img/dd_bg.gif) no-repeat 2px 0px;
}

CSSについては前々回のナビの応用ですので、要所(8、28、34行目)だけ説明します。
前々回の記事はこちら→[15-4-1] リストでナビゲーション( その1:ul要素で )

まずdt要素の背景をグリーンの帯状の画像を配置します。 画像はこれ

この画像を repeat-x で貼っています。
このサンプルではdt要素にリンクが無いので、dt要素にbackground指定をします。
(リンクがある場合は、dt要素の内側の a要素にbackground指定しますよ。)

ナビの横幅に合わせた、↓こんなサイズの画像を作っても良いんですけどね。

あとで「やっぱりdlの幅をもっと広くしよう」なんて事になったときに、
画像編集するのも、CSSでrepeat指定にし直すのも、めんどい。
だから、横や縦にrepeatが使える画像は、小さめにしてrepeat。
最初からこうしとけばラクです。画像のファイルサイズも若干小さくなるし

ちなみに、ファイルサイズ極小を狙うなら、画像幅は1pxのほうが良さそうに思いますが、
あんまり小さいと、かえってブラウザプレビューに時間がかかります。ビジタのCPUに負担。
上のサンプル画像のように幅20pxくらいが妥当なところ…と思います。

次に、dl部分のロールアウト時には、この画像をno-repeatで配置してます。→
セレクタは「dl.sample3 dd a」と、dd要素の中の a要素に指定しているのがミソですよ。

3番目。dl部分のロールオーバー時の指定です。セレクタは「dl.sample3 dd a:hover」で
background: url(../img/dd_bg.gif) no-repeat 2px 0px;
と、画像のX位置を2px右にずらしています。
これでロールオーバー時にピョコッとした動きがでます。

★この「background: url(../img/110521.gif) no-repeat 2px 0px」の書き方はショートハンドと言います。
後半のno-repeatのあとの「2px 0px」は、X軸は2px、Y軸は0pxという意味。
CSSのショートハンドについては…「CSSレイアウトメモL-[TIPS] CSSのショートハンド」をご覧ください

次回予告

いかがでしたか? 今回でリスト要素については終わります。

次回から、table(表)を作ってみましょう。
table要素は「表組」をつくるための要素です。
データを整理して表示するのに便利。これもよく使うので、知ってて損は無いです。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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