グローバルナビゲーションの作り方【HTML・CSSコード付き】

- プログラミング
グローバルナビゲーションの作り方【HTML・CSSコード付き】
2021年5月6日

グローバルナビを作ろう

今回はグローバルナビこと「グローバルナビゲーション」を作ってみましょう。

グローバルナビゲーションとはWEBサイトのどのページにも表示される共通（＝グローバル）メニューのことですね。

今回の完成イメージは下の画像のとおり。

今回は「3つの手順」の通りに進んで「PC用のグローバルナビゲーション」を作成していきます。

<今回の演習の完成イメージ>

ワインレッド（medium violet red）のバーに、白抜きの字でメニューを表示します。また、ここにホバーのアクションもつけていきます。

HTMLとCSSで作る

現代のWEBの制作では「HTMLファイルは共通」「CSSだけ切り替える」のが通常。

レスポンシブWEBデザインの時代において「PCでは横一列」「スマホではハンバーガーメニュー」という表示は定番ともなっています。

今回は「PC用のグローバルナビゲーション」を作ってみましょう。

【手順①】HTMLファイルとコードを用意する

まずはHTMLファイル（index.html）を用意しましょう。

テキストエディタを立ち上げ、<head>内のHTMLコードを下記のように記述します。

<グロナビ用のサンプルHTMLコード>

枠右上のマークをクリックするとコピーもできます。（※コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします）
```
<head>
<meta charset="utf-8">
<title>グローバルナビの練習</title>
<meta name="description" content="グローバルナビゲーション作成の演習です">
<link rel="stylesheet" href="css/sample.css">
</head>


<nav>
<ul class="gnav-navi-1">
<li><a href="#">TOP<br>トップ</a></li>
<li><a href="#">SERVICE<br>サービスについて</a></li>
<li><a href="#">INFORMATION<br>お知らせ</a></li>
<li><a href="#">BLOG<br>ブログ</a></li>
<li><a href="#">CONTACT<br>お問合せ</a></li>
</ul>
</nav>
```
上記のHTMLコードをブラウザで確認すると、まだテキストだけの地味な見た目になっています。

<サンプルのHTMLコードをブラウザで確認した例>

このままでは、魅力的なデザインではなく、UI／UX共に機能性はゼロの状態ですね。

そこで、CSSの登場となります。このパターンは、だんだんなれてきたでしょうか。CSSは「見栄え」を整えるために存在するんですね。

【手順②】CSSのコードを記述

では、CSSファイル（sample.css）を用意しましょう。

下記のように記述します。

<グロナビ用のサンプルCSSコード>

枠右上のマークをクリックするとコピーもできます。（※コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします）
```
*{box-sizing: border-box;}

ul.gnav-navi-1{
background: #c71585;
padding: 0;
text-align: center;
}
ul.gnav-navi-1 li{
display: inline-block;
}


ul.gnav-navi-1 li a{
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
}
ul.gnav-navi-1 a::first-line{
font-size: 16px;
font-weight: bold;
}
```
すると、下の画像のようなグローバルナビゲーションに変わります。

HTMLコードだけの時に比べ、色がついて文字も二段となり、見やすくなりましたね。

このグロナビのエリアにマウスを持っていくと、カーソルが変わります。リンク先を指定していないので画面は変わりませんが、クリッカブルなボタンなったのは確認できると思います。

<サンプルのCSSコードをブラウザで確認した例>

デザインとしては、クールにこのままでも悪くはありませんが、視認性という意味ではユーザーに優しくありません。

ここから進化させる手法としては、マウスがボタンに触れた際に（＝ホバーした際に）色が変わると良いですね。

なぜならユーザーは「ここがクリックできるんだな」あるいは「クリックしてみようかな」という意識になるからです。

このようなユーザーに理解しやすい”デザイン”がユニバーサルデザイン（みんながわかるデザイン、わかりやすいデザイン）なんですね。サイトからのユーザーの離脱を防ぐためにも、クールであることよりも「わかりやすいデザイン」を心がけましょう。

では、ホバーで色が変わるよう、CSSのコードを追記してみます。

【手順③】ホバー用のCSSコードを追記

<ホバー用のサンプルCSSコード>

枠右上のマークをクリックするとコピーもできます。（※コピペで不要なスペースが発生したら削除しましょう。またインデントは各自でお願いします）
```
ul.gnav-navi-1 li:hover{
background: #FF7F50;
}
```
上記のCSSコードを【手順②】で記述したCSSコードの最後に追記してみましょう。

そして、ブラウザで確認する際に、マウスのカーソルをメニューの上にもっていきます。

すると…

<ホバー用のCSSコードをブラウザで確認した例>

上の画像のように、マウスのホバーで色が変わりましたね。

これであれば、ユーザーは「自分のマウスの現在地」がまずわかり、そして「ここがクリックできるんだな」と理解できます。

WEBのデザインは何色も色を使うと素人っぽさが出てまとままりがなくなりますが、あんまりシンプルなフラットデザインでも「どこをクリックするの？どこがクリックできるの？」となり、ユーザーの気持ちは安定しません。

そこで、今回のようにCSSを使ってホバーの要素で配色すると「見た目はシンプルでも気の利いたユニバーサルなデザイン」にすることが可能になるんですね。

うまくできたでしょうか。今回もおつかれさまでした。

ナビゲーションはサイトの隠れた主役

私たちが普段当然のように使っているグローバルナビゲーション。

WEBサイトを閲覧しているときに、いちいち「このナビゲーションは素晴らしい！」なんて思うことはないかもしれません。

しかし、裏を返せば「当たり前に、無意識に使えるグローバルナビゲーションこそ最高のグローバルナビゲーション」と言えます。

反対に、ちょっと使いにくいナビゲーションに出会った際は着々とストレスが蓄積されていき、そのサイトの記事を読むことをやめたり、購買や予約などもしなくなるでしょう。なぜなら「こんなに使いにくいなら、この後はもっとひどい目にあいそうだ」という、危機意識が働くからです。

グローバルナビゲーションは「気持ちよく使えて当たり前」だからこそ重要であり、サイトの全ページに共通（＝グローバル）するからこそ、そのサイトの印象も左右する大事な存在。

「たかがグロナビ」と侮るなかれ。ユーザーエクスペリエンスを高める「されどグロナビ」な存在なんですよ。

WEBサイトというと、初心者の時期は写真や配色に気を取られがちですが、サイトの隠れた主役である「グローバルナビゲーション」にも今後は注目し、ネットサーフィンしてみましょう。

「メンターを借りる」プログラミングの学び方

人によって行き詰まるタイミングはさまざまですが、プログラミング学習での挫折は「基礎理解のなさ」が原因のひとつ。

なぜか先を急ぎたくなるのがプログラミング学習の特性で、多くの初心者がこのトラップにひっかかります。

しかし何もプログラミング限らず、どんな習い事も「基礎」が出来ていてこそ、始めて応用に対応できるんですよね。

当サイト「メンタレ」は、メンターを「レンタル」できるサービス。独学の途中や挫折者の再挑戦、完全初心者の方や駆け出しエンジニアの方々の「ココだけ教えて欲しい」に対応しています。

ヒアリングを元に「今のあなた」に必要な実践カリキュラムを実施。オンラインなので全国対応。動画講座のように見たあと一人戦い自習するのではなく、質問チャットのようにだんだん面倒になるものでもない。

「メンタレ」で、着実にプログラミングを修得したい方はお気軽にご相談ください。