[CSS]ごくシンプルな水平型のナビゲーションを実装するチュートリアル

ごくシンプルな水平型のナビゲーションを実装するチュートリアルをCSS Newbieから紹介します。

デモのキャプチャ

A Super Simple Horizontal Navigation Bar
demo

デモの水平型のナビゲーションはリスト要素で実装されており、アンカー箇所は大きく、ホバー時に背景色が変わるようになっています。
下記、そのポイントをピックアップして紹介します。

HTML

シンプルなリスト要素で実装します。

※「id="nav"」はこのリストをCSSで指定できるように、親にヘッダなどのdiv要素があれば不要です。

CSS

まずは、リストを水平に配置します。

ナビゲーションバーに背景と境界線を記述します。

ナビゲーションバーのリンク箇所のエリア全体をクリックできるように記述します。

最後に、ホバー時に背景の色を変更できるようにします。

終わりに

このチュートリアルは、ここからスタートしてさまざまなナビゲーションバーを制作するためのものです。
有用なフレームワークとして、活用してください。

top of page

©2017 coliss