[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

ナビゲーションは、グローバルナビゲーションに限らず、奇をてらわず、ユーザーが迷わず感覚的に使えるように、目につきやすい適切な位置に配置しよう。

ナビゲーションの役割

目的ページに誘導すること。

ナビゲーションの種類

  • グローバルナビゲーション
  • ローカルナビゲーション  より細部のメニュー。通常、サイドに配置する。
  • ページナビゲーション 記事の前後へのリンク。
  • フッターナビゲーション

グローバルナビゲーションは、ユーザーが迷わず利用できるよう、どのページにも同じ位置に配置された「トップの横並び」がおすすめである。

・サイト全体の統一感を持たせながら、ナビゲーションの存在をアピールしたい場合、上手に配色を用いましょう。
メニュー項目の配色を変えることによって、ページ内がブロック分けされ、一目で目に付きます。

・また、メニュー項目は、7個を限度に4〜5個に絞るのが理想的である。
また、ユーザーが一目で理解できるように、メニュー項目は、日本語の方がよい。

ユーザビリティに優れたサイトにするには。

  • ユーザーが選択したメニュー項目に下線もしくは上線を付ける。
  • 選択中のメニュー項目に背景色をつける。
  • メニュー項目に文字と共にイラスト、アイコンを用いる。
  • 「問い合わせ」「検索窓」など目立たせたいものは、一番右に配置するとユーザーの目を引く。
  • リスト項目が多量の場合は、優先順位をつけ、メリハリを付ける。

HTMLのul 要素でメニューの作成

Webサイトのナビゲーションメニューは、HTML文書にリスト要素である ul 要素で作成する。

主要なナビゲーションメニューである場合は、nav 要素で囲み、HTMLを作成する。

<body>
<!-- グローバルメニュー -->
<nav id="navi"> 
 <ul> 
     <li><a href="iindex.html">HOME</a></li> 
     <li><a href="">Portfolio</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="">Blog</a></li> 
</ul> 
</nav>

ul 要素と li 要素は、いずれもブロックレベル要素である。

ブラウザでの表示

HTMLのul 要素でメニューの作成

リストマーカーを消す

CSSファイルで、list-style-type: none; でリストマーカーを消す。

li {
  list-style-type: none;
}

ブラウザでの表示

リストマーカーを消す

list-style-type プロパティの初期値は、disc (黒丸)。

メニュー項目を横に配置する

display プロパティで、メニュー項目を横に並べる。

li {
  list-style-type: none;
  display: inline-block;
}

display: inline-block;

表示形式をインラインブロック表示を指定することで、メニュー項目は、一行に収まり、横に並ぶ。

また、高さ、横幅などを指定できるようになる。

ブラウザでの表示メニュー項目を横に配置するnav ボックスのサイズを指定する。

メニュー全体の横幅と高さを、width プロパティと height プロパティで指定する。

nav#navi {
       width: 800px;
       height: 40px;
    }

ul 要素の margin (外側の余白)と padding (内側の余白)を指定する。

nav#navi ul {
       margin: 0px;
       padding: 5px;
     }

メニュー項目の横幅、高さを設定する

クリックできる範囲を広げるために、a 要素をブロック表示し、横幅、高さを設定する。

そして、li 要素をフロート配置にする。

nav#navi li {
  list-style-type: none;
  display: block;
  float: left;
}

nav#navi li a {
  display: inline-block;
  width: 150px;
  height: 35px;
}

ブラウザでの表示

.png

リンクの背景色と文字色を指定する

background-color プロパティと color プロパティで、リンクの背景色と文字色を指定する。

nav#navi li a {
  background-color: navy;
  color: #fff;
  display: inline-block;
  width: 240px;
  height: 35px;
  text-align: center;
}

ブラウザでの表示

.png

余白を設定し、センタリングを行い、下線を消す

下線は、text-decoration:none; で消す。

内側の余白として、padding を設定する。

nav#navi li a {
  background-color: navy;
  color: #fff;
  display: inline-block;
  width: 240px;
  height: 35px;
  padding: 15px 0 0 0;
  text-align: center;
  text-decoration:none;
}

ブラウザでの表示

.png

リンク部分に背景画像を指定する。

背景画像は、background-image プロパティで設定する。

マウスが乗った時の挙動として、:hover 疑似クラスを使い、背景画像を指定します。

マウスが乗る前の背景画像

bg_menu1
bg_menu1.png

マウスが乗った時の背景画像

bg_menu2
bg_menu2.png

これらの画像を images フォルダに保存しておきます。

nav#navi li a { 
background-color: navy; 
color: #fff; 
display: inline-block; 
width: 240px; 
height: 35px; 
padding: 15px 0 0 0; 
text-align: center; 
text-decoration:none; 
background-image:url(images/bg_menu1.png);
background-repeat: no-repeat;
}
nav#navi li a:hover {
background-image: url(images/bg_menu2.png);
}

ブラウザでの表示

リンク部分に背景画像を指定する。

マウスが乗った時の背景色を設定する。

ユーザーの閲覧環境によれば、画像を表示できない、また、あえて画像を表示させない設定としている場合があるので、背景画像に背景色を追加させておく。

nav#navi li a:hover {  
background-color:#c9c9ee;
background-image: url(images/bg_menu2.png);
}

参考書籍

TECHNICAL MASTERはじめてのHTML+CSS

ドリル式 やさしくはじめる Webデザインの学校

 

(Visited 20 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。