[15-4-1] リストでナビゲーション( その1 : ul要素で )

今日は、ul要素でナビゲーションを作りましょう。

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

今日のサンプルHTMLです。
honttoni15-4.html ★画像をクリックするとHTMLファイルを開きます(別ウィンドウで開く)
★開いたHTMLのソースをブラウザで読んでもらえばOKですが、
 めんどくさい人は、こちらから↓zipファイルをダウンロードできます。
→本日のサンプル(sample15-4set.zip (5k))をダウンロード

ナビゲーションとは

メニューと言った方がわかりやすいかもですが、他のウェブページに移動するためのリンクがあるテキストやボタンを、ナビゲーションと呼びます。
ナビゲーションは、
●サイト全体にわたるグローバルナビゲーション
●ヘッダーやフッター部分に入れる、補助的なナビゲーション
●ページの右や左のカラムに入れる、サイトマップ的なナビゲーション
などいろいろあります。

このうちのグローバルナビゲーションには、HTML5から「nav要素」が使えるようになりました。

使用する要素 <nav> 〜 </nav>

使い方はこんなかんじ。ナビ全体をnav要素で囲み、主要ナビゲーションであることを示します。

<nav>
<ul>
  <li>HOME</li>
  <li>新製品</li>
  <li>事業案内</li>
</ul>
</nav>

どんなナビゲーションにもnav要素を使うのでなく、主要なものに対してのみ使用します。
このnav要素については、[17-2] セクションを表す要素(article, aside, section, nav)でも紹介しています。

ul要素でグローバルナビゲーションを作ろう

ul要素 li要素でリストを作り、li要素の内側に a要素をはめ込んで、リンクを作ります。

これは↓プレビュー画像。クリックするとサンプルHTMLで見られます(別ウィンドウで開く) 。
honttoni15-4.html

サンプルにロールオーバーすると、矢印のアイコン()が 変化するのがわかります。
これもCSSで作って行きますよ。

HTMLはこのようにとてもシンプル。

<nav>
<h3>Navigation</h3>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">新着情報</a></li>
<li><a href="#">新商品のご紹介</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">お客様の声</li>
</ul>
</nav>

a要素のリンク先URLに書いてある「#」は「ヌルリンク」といって、そのページそのものにリンクします。ヌル(null)値とは空の値の事です。リンク先のファイルが未完成なときなどで仮にリンクを貼りたいときに便利です。

CSSは下記のように指定しています。

ul {  /*デフォルトのmarginやpaddingは邪魔なので0pxに*/
	margin:0;
	padding: 0;
}
ul li {
	list-style: none;  /*リストマーカー(●)も邪魔なので無しに*/
	height: 25px;      /*矢印のアイコン画像は17px×17pxなのでちょっと大きめに*/
}
ul li a {
	background: url(../img/110521.gif) no-repeat 0 0;  /*矢印のアイコン画像を指定*/
	margin-left: 17px;
	padding-left: 22px;
	color: #666;
	text-decoration: none;
}
ul li a:hover {
	color: #F90;
	background: url(../img/110521.gif) no-repeat 2px 0;  /*画像の位置を2px右にずらす*/
}

サンプルページでは ul要素にid名をつけています。
 サンプルページでは同じHTML文書内に ul要素が複数あるので、idで特定しないと全部の ul要素が同じスタイルになるため。
(この記事本文では話がややこしくなるので、id無しで説明しています。かえってややこしいか?)
★idについては、【3】id とか classって何?(セレクタの「種類」を知っておこう)をご覧ください。

リンクのためのCSSは、a要素に対して指定します。(9行目以降)
背景やテキストのスタイルを li要素にいくら指定しても、内側にあるa要素に指定が無ければ無駄。

ul li aで、リンク部分のマウスアウトの状態(通常の状態)を指定します。(9〜15行目)
背景(background)に、矢印のアイコン画像を指定。もちろんno-repeatで。
リストのマーカー画像は「list-style-image」で指定する方法もありますが、画像とテキストの上下の位置をピタッと合わせるには、背景画像にするこ方法のほうが便利です。

ul li a:hoverで、マウスオーバーした時の指定をします。(16〜19行目)
ここでは背景画像の位置を2px右にずらす指定をしています。これだけでマウスオーバー時にちょっとした動きがでます。

★今回は CSSの指定が少しわかりにくかったかもしれませんね。
背景画像を貼るには CSSの「backgroundプロパティ」を使います。このページではその「ショートハンド」という書き方を使ってます。
「backgroundプロパティ」については、【15-1】background関連のプロパティ(1/4)から解説していますので、詳細を調べたい方はこちらも読んでみてください。

次回予告

「リスト要素でメニューを作る」を1回の記事でまとめようと思ってましたが、
長くて読むのがしんどそうなので、3回にわけることにします。

次回は、今日作ったナビを横に並べましょう。
よく、ヘッダー部分に横に並んだグローバルナビがありますよね。あれを作ります。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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.