カテゴリー
プログラミング

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

グローバルナビを作ろう

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

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

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

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

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

今回の演習の完成品

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

HTMLとCSSで作る

マークアップ作業をするエンジニア

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

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

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

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

HTML/CSSの参考書

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

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

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

枠右上のマークをクリックするとコピーもできます。

<head>
    <meta charset="utf-8">
    <title>グローバルナビの練習</title>
    <meta name="description" content="グローバルナビゲーション作成の演習です">
    <link rel="stylesheet" href="sample.css">
</head>


<nav>
    <ul class="gnav-list-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コードをブラウザで確認した例>

「グロナビ用のサンプルHTMLコード」を反映した見本画像

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

そこで、CSSの登場となります。このパターンは、だんだんなれてきたでしょうか。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コードを追記

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;
}

上記のCSSコードを【手順②】で記述したCSSコードの最後に追記してみましょう。

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

すると…

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

「ホバー用のサンプルCSSコード」を反映した見本画像

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

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

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

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

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

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

トラックパッドを操る手

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

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

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

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

グローバルナビゲーションは「気持ちよく使えて当たり前」だからこそ重要であり、サイトの全ページに共通(=グローバル)するからこそ、そのサイトの印象も左右する大事な存在。「たかがグロナビ」と侮るなかれ。ユーザーエクスペリエンスと高める「されどグロナビ」な存在なんですよ。

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

基礎理解が左右するプログラミングの成長度

プログラミングの基礎を教える講師

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

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

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

当サイト「キソプロ」では、その名のとおり「基礎プログラミング」の重要性を説いています。

受講される方々には「まずはプログラミングの基礎を理解する」ことを最優先し、成長スピードは早くなくとも、納得いくかたちで基礎知識・基礎技術を固めることに同意いただいています。

基礎をいかに理解しているかで、あとあとの成長が決まる。

軽視されがちな基礎プログラミングをしっかり学べる「キソプロ」で、着実にプログラミングを修得したい方はお気軽にご相談ください。