アクセス（Access）講座一覧｜フロンティアリンク
Access/Excel/VBA/Webプログラミングの1日速習講座

グローバルナビゲーションにおける「ナビゲーション」の意味については、Webサイトの「道案内」をイメージしていただければ分かりやすいのではないかと思います。
WebサイトにはWebページがいくつもあり、それぞれのWebページにはコンテンツが表示されます。
そのコンテンツにユーザーがアクセスするには、どのボタンやリンクを押したら目的のコンテンツに辿り着けるのか、道案内が必要になります。
Webサイト上でコンテンツへの道案内をするものを一般的に「ナビゲーション」と呼びます。

Webサイトにおいては、グローバルナビゲーション、ローカルナビゲーション、Webページの最下部に表示されるフッターナビゲーションなどの代表的なナビゲーションがいくつか存在します。
多くのWebページでは、企業やお店のロゴがページ左上にありますが、それもナビゲーションの一つであり、リンク先には多くの場合、Webサイトのトップページが指定されています。

グローバルナビゲーションはすべてのWebページに共通するメニューである一方で、Webサイトの道案内を考える場合には、ローカルナビゲーションと呼ばれる「個別のWebページ内における道案内」についても考慮する必要が生じます。グローバルナビゲーションで目的のWebページへの道案内を行った後に、今度はそのWebページ内において閲覧者が目的とする情報を確認しやすいように、情報を整理して表示する必要があるということですね。

ナビゲーションの設置形状は様々ですが、横に並ぶタイプと、縦に並ぶタイプ、そしてそれぞれがドロップダウンリストになっているタイプの3つに大きく分類されます。
典型的な例としては、グローバルナビゲーションをWebサイト上部で横に並ばせ、ローカルナビゲーションを左側に並ばせるというようなイメージになります。

コンテンツの閲覧者が、目的とする情報に到達しやすいように「道案内」を行う役割を「ナビゲーション」は担っています。ナビゲーションをきちんと設計することで、より分かりやすいWebサイトを構築することが可能となりますので、Webサイトの設計をする際には最初にぜひ「ナビゲーション」の流れを考えてみることをおすすめします。

Windowsに標準でインストールされている「メモ帳」を使ったことのある方は多いと思います。
メモ帳はテキストエディタですので、文字などのテキストを編集したり、保存したりすることが可能です。
HTMLやCSSの作成においては「タグ」を入力していくことになりますが、タグ自体もテキスト情報ですので、テキストエディタであるメモ帳を用いて入力をし、保存することが可能です。

保存をする際の注意点としては、HTMLファイルでしたら拡張子は “.html”、CSSでしたら拡張子は “.css” とするということがあります。
拡張子を “.html” にして、デスクトップなどに保存したら、そのファイルのアイコンがお使いのブラウザの形のアイコンに通常は変化します。このようにアイコンがきちんと変化しましたら、拡張子は正しく “.html” になっています。
逆にもし、アイコンがメモ帳のアイコンから変化していない場合は、拡張子が正しく “.html” に変わっていません。よくあるケースとしては、ファイル名の末尾に “.txt”（テキストファイルを表す拡張子）が付いている場合等ですが、そのような場合は再度拡張子を “.html” に変えてから、保存しましょう。

また、保存する際、もう一つ忘れてはいけない大切なポイントがあります。
文書型宣言等で指定したHTML/CSSソースの文字コードと、保存する際のファイル自体の文字コードを合わせる必要があります。

メモ帳で保存をする際、文字コードについては下記のようなドロップダウン式の選択肢が表示されます。
文書型宣言で指定した文字コードと、保存する際のファイルの文字コード（例えばUTF-8など）を忘れずに一致させましょう。

この2つが一致していないと、ブラウザで確認した際に日本語が文字化けすることがあります。

HTMLやCSSの勉強は、このように手軽に使えるメモ帳などのテキストエディタを活用し、効率的に行っていくことをおすすめします。

例えば20ページ程の分量のWebサイトを持っていたと仮定しましょう。
公開後から、Webサイトの来訪者数も順調に伸びています。
さて、これから新年を迎えるにあたって、Webサイトの「内容（コンテンツや文章のことです）はそのまま」に、新しいデザインに変えようと決めました。

その時、あらかじめCSSを分けた場合と、分けていない場合で、新しいWebサイトのデザインをコーディングする効率に差が出てきます。

CSSを別ファイルに分けておいた場合では、外部ファイルとして保存したCSSを変更するだけで、Webサイトの内容を変えずにデザインのみを変更することが可能です。
すでにid名やclass名はある程度定義していますから、既存のid名・class名のタグの装飾だけを変えることは、容易に可能となります。
また、HTMLのソースコード自体もすっきりします。

一方で、CSSを分けずにタグに直接書き込むか、スタイルタグでヘッドタグの中にCSSを置いている場合は、20ページすべてのソースコード、ヘッドタグの中を巡回し、一つ一つのタグのデザインを変えていくことになります。
コーディングとは、半角スペースが空いていないだけでもレンダリング結果が正常に表示されない、ある意味で繊細な作業を必要としています。その作業が20ページも続くのは、労力としては非常に大きいです。
将来会社が拡大して、WEBページが50ページ、100ページになったら…と将来的な視点も予見できるかと思います。例えばショッピングサイトでは、50ページ100ページというのはめずらしくない分量です。
直接HTMLのソースコードに書く分量増えればそれだけ見た目もごちゃごちゃしますし、全体のソースコードを見る際のスクロールという手間も増えることになります。

ただし例外的に、非常にコーディング自体の量が少ないデザイン（例えば全てのHTMLのソースコードが20行など）で、かつWebページ自体のボリュームも非常に少ない場合があります。
このような場合で、次回の更新でもWebページを増やす見込みがないときは、外部ファイルとしてCSSを作成する恩恵を受けにくいかもしれません。
（ただしこのような場合でも、すっきりしたソースコードをお望みの方は、外部ファイルとしてCSSを保存することをおすすめします。）

初めはCSSを外部ファイルで保存することに慣れないかもしれません。
しかしせっかく作り上げたWebサイトです。
流用が出来るところはできる限り流用し、新しいWebデザインを効率よく実現してまいりましょう。
そのための一つの方法として、最初からCSSを外部ファイルとして保存し、HTMLと切り分ける方法をお薦めしたいと思います。