CSS入門 | CSS応用 | ナビゲーションバー

Tags:

ナビゲーションバー

ユーザーがWebサイトで最もよくクリックする領域の一つがナビゲーションバーである。
ナビゲーションバーは、私たちが一般的なWebサイトでよく使うメニューを意味する。
HTML要素だけで作った単純なメニューにCSSを適用すると、見た目がよく使いやすいメニューへ簡単に変更できる。

リンクを使用したリストメニュー

ナビゲーションバーの中でも最も基本的なものが、リンクを使用したリストメニューである。
HTMLではリンクを <a> タグで表す。

次の例は、リンクを使用して実装した簡単なメニューの例である。

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a href="/css/intro">CSS</a></li>
    <li><a href="/javascript/intro">JavaScript</a></li>
</ul>

垂直ナビゲーションバー

リンクを使用したリストメニューのdisplayプロパティ値を block に設定すると、簡単に垂直ナビゲーションバーを作成できる。

<style>
    ul { background-color: #FFDAB9; width: 150px; list-style-type: none; margin: 0; padding: 0; }
    li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

上の例でインライン要素である <a> 要素のdisplayプロパティ値をブロック（block）に変更すると、メニュー内のどこをクリックしてもリンク先のページへ移動するように設定される。

クラス（class）を利用すると、ナビゲーションバーで現在のメニュー位置も表現できる。

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

上の例では :not セレクタを利用して、現在のメニューを表す current クラスと、それ以外のメニューの背景色を区別している。

borderプロパティを利用すると、ナビゲーションバーに境界線を表示できる。

<style>
    li { border-bottom: solid 1px black; }
    li:last-child { border-bottom: none; }
</style>

水平ナビゲーションバー

水平ナビゲーションバーは、次のようなプロパティを利用して作成できる。

  1. displayプロパティの inline 値を利用する方法
  2. floatingプロパティを利用する方法

displayプロパティのinline値を利用する方法

リンクを使用したリストメニューで、<li> 要素のdisplayプロパティ値を inline に設定する。 すると、ブロック要素だった <li> 要素がインライン要素の性質を持つように変更される。

インライン要素に変更された <li> 要素は、自分の内容分だけの幅を占めるようになる。 したがって、すべての <li> 要素が横に並び、これを利用して水平ナビゲーションバーを作成できる。

<style>
    li { display: inline; }
</style>

floatingプロパティを利用する方法

リンクを使用したリストメニューの <li> 要素にfloatプロパティを設定する。

このときfloatプロパティ値を left に設定すると、すべてのメニューが左側に整列する。
また、floatプロパティ値を right に設定すると、すべてのメニューが右側に整列する。

<style>
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; padding: 8px; }
</style>

CSSを利用すると、水平ナビゲーションバーにさまざまなスタイルを設定できる。

<style>
    ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;
        text-align: center; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

クラス（class）を利用すると、ナビゲーションバーで現在のメニュー位置も表現できる。

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

上の例では :not セレクタを利用して、現在のメニューを表す current クラスと、それ以外のメニューの背景色を区別している。

ul 要素や ol 要素のfloatプロパティ値を調整すると、左側メニューだけでなく右側メニューも一緒に設定できる。

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a class="current" href="/css/intro">CSS</a></li>
    <ul style="float:right; list-style-type:none;">
        <li><a href="/bbs/login.php">ログイン</a></li>
        <li><a href="/bbs/register_form.php">会員登録</a></li>
    </ul>
</ul>

上の例でHome、HTML、CSSメニューは左側に整列し、ログイン、会員登録メニューは右側に整列する。

borderプロパティを利用すると、ナビゲーションバーに境界線を表示できる。

<style>
    li { float: left; border-right: solid 1px white; }
    li:last-child { border-right: none; }
<style>