HTMLでナビゲーションバーを作る方法

ナビゲーションバーは、サイト訪問者がウェブサイト内の特定の場所に簡単に移動できるようにします。また、ページをナビゲーションバーに含めることで、訪問者にそのページを強調表示することもできます。このWikiHowでは、HTMLでナビゲーションバーを作る方法をご紹介します。

1

ナビゲーションバーをどのように見せたいかを選びます。アイデアがない場合は、好きなウェブサイトを見てインスピレーションを得ましょう。

• ナビゲーションバーは縦型にするのか、横型にするのか？
• セクションにカーソルを合わせるとドロップダウンメニューが表示されますか？
• ページをクリックするとナビゲーションバーの色が変わるのか？

2

テキストエディタを開く。ウィンドウズとマックのコンピュータには、HTMLを作成したり編集したりできるデフォルトのテキストエディタ・プログラムが付属しています。

• Windowsをお使いの場合は、スタートメニューで検索してこのアプリケーションを見つけることができるメモ帳を使用することができます。より多くの機能を備えたメモ帳プログラムには、.NET Frameworkがあります。
• Macを使っている場合は、Spotlightで検索できるTextEditを使うことができます。

3

<nav>」と入力し、↵ Enterキーを押します。これがナビゲーション・バーコードの始まりです。

4

<ul>」と入力し、↵Enterキーを押します。ナビゲーションバーは、その核心はリンクのリストです。順序なしリスト、順序付きリスト、定義リストを使用するオプションがあります。ほとんどのナビゲーション・バーは順序なしリストを使用します。

5

<li>」と入力し、↵Enterキーを押します。これで、次に入力するものにリスト項目タグが追加されます。

6

<a href="LINK">リンク名</a>」にページリンクを入力し、↵Enterキーを押します。ホームページへのリンクを含めたい場合は、次のように入力します。

<a href="/">ホーム</a>」と入力します。

7

リスト項目のタグを閉じるには、「</li>」と入力します。タグを閉じ忘れると、ウェブページにエラーが表示されます。

8

ナビゲーションバーを埋めるために、さらにページリンクを入力します。例えば、「お問い合わせ」ページ、「会社概要」ページ、「経歴」ページ、「製品」ページ、「ニュース」ページへのリンクを含めることができます。

• それぞれのリンクが"<li>"と"</li>"で囲まれていることを確認してください。

9

</ul>"を入力して、順序なしリストを閉じます。</ul>タグはコードがリストを続けないようにします。

10

ナビゲーションバーコードを閉じるには、"</nav>"と入力してください。このタグの外に書かれたすべてのコードは、ナビゲーション・バーに含まれません。

• コードは次のようになります：
  <nav> <ul> <li> <a href="/">ホーム</a> </li> <li> <a href="/print">プリント・デザイン</a> </li> <li> <a href="/web">ウェブ・デザイン</a> </li> <li> <a href="/web">ウェブ・デザイン</a> </liウェブデザイン</a> </li> <li> <a href="/bio">バイオグラフィー</a> </li> <li> <a href="/contact">コンタクト</a> </li> </ul> </nav>

この記事は、CC BY-NC-SAで公開されている「 HTMLでナビゲーションバーを作る方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。