ナビゲーションは、グローバルナビゲーションに限らず、奇をてらわず、ユーザーが迷わず感覚的に使えるように、目につきやすい適切な位置に配置しよう。
ナビゲーションの役割
目的ページに誘導すること。
ナビゲーションの種類
- グローバルナビゲーション
- ローカルナビゲーション より細部のメニュー。通常、サイドに配置する。
- ページナビゲーション 記事の前後へのリンク。
- フッターナビゲーション
グローバルナビゲーションは、ユーザーが迷わず利用できるよう、どのページにも同じ位置に配置された「トップの横並び」がおすすめである。
・サイト全体の統一感を持たせながら、ナビゲーションの存在をアピールしたい場合、上手に配色を用いましょう。
メニュー項目の配色を変えることによって、ページ内がブロック分けされ、一目で目に付きます。
・また、メニュー項目は、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 要素は、いずれもブロックレベル要素である。
ブラウザでの表示
リストマーカーを消す
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;
}
ブラウザでの表示
リンクの背景色と文字色を指定する
background-color プロパティと color プロパティで、リンクの背景色と文字色を指定する。
nav#navi li a {
background-color: navy;
color: #fff;
display: inline-block;
width: 240px;
height: 35px;
text-align: center;
}
ブラウザでの表示
余白を設定し、センタリングを行い、下線を消す
下線は、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;
}
ブラウザでの表示
リンク部分に背景画像を指定する。
背景画像は、background-image プロパティで設定する。
マウスが乗った時の挙動として、:hover 疑似クラスを使い、背景画像を指定します。
マウスが乗る前の背景画像
マウスが乗った時の背景画像
これらの画像を 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);
}
参考書籍
この記事を読んだ人はこんな記事にもご興味があるかも
2018-04-02 [ CSS ] 3カラム・レイアウト、コーディング clearfix
2021-05-30 使うことを意識したWebデザイン![[ JavaScript ] 変数](https://i0.wp.com/webdesign.ki-blog.biz/files/JavaScript%E5%A4%89%E6%95%B0-150x150.png?resize=150%2C150&ssl=1)
2020-06-06 [ JavaScript ] 変数![[CSS] ボックスモデル](https://i0.wp.com/webdesign.ki-blog.biz/files/a11b4bb3ba448d1fa402ac3dc62cc91f-150x150.png?resize=150%2C150&ssl=1)
2016-10-24 [CSS] ボックスモデル
2017-07-13 Chromeのデベロッパーツールでデヴァイス毎の表示を確認する方法
2016-12-24 スライス機能を使った書き出しの2種類のスライスの作成方法
「[ コーディング ] ナビゲーション（グローバルナビゲーション）の作成法」への3件のフィードバック