【HP作成】美しいナビゲーションバーが使えるCSSフレームワーク5選
はじめに
CSSフレームワークを使用すると、classプロパティを指定するだけで非常に高度なレイアウト・デザインが可能です。
例えば、CSSフレームワークの1つであるTwitter Bootstrapをダウンロードして、それぞれのhtmlファイルにCSSへのリンクをheader部分に設定します。
【ヘッダーにリンクを記述】
<head>
<link href="./css/bootstrap.css" rel="stylesheet">
</head>
こうすることで、Bootsrap内のスタイルをclassで呼び出せます。実際のナビゲーションはulとliを指定して記述します。
【ナビゲーションのコード】
<ul class="nav">
<li class="active">
<ahref="#">Home</a>
</li>
<li><ahref="#">Link</a></li>
<li><ahref="#">Link</a></li>
</ul>
【サンプル】
非常に単純なコードですが、スタイリッシュなナビゲーションバーができていることがわかります。
ということで、美しいナビゲーションが利用できるCSSフレームワーク5選、まずはbootsrapから。
(1)Twitter Bootsrap
非常に有名なフレームワークでナビゲーション以外にも様々なUIが用意されています。ナビゲーションの具体例はさきほどの例を御覧ください。
(2)Groundwork CSS
カラフルで美しいナビゲーションを提供。フォームやボタンも充実しています。
【サンプル】
【コード】
<nav>
<ul>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</nav>
(3)Yaml 4
次にYaml 4。こちらは黒いナビゲーションで重厚な感じがします。
【サンプル】
【コード】
<nav class="ym-hlist">
<ul>
<li class="active"><strong>Active</strong></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
(4)Gumby 2
こちらもデフォルトは黒のナビゲーション。サブメニューはドロップダウンで表示できます。
【サンプル】
【コード】
サブメニューが入っているため長くなっています。
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li><a href="#">Features</a></li>
<li>
<a href="#">Documentation</a>
<div class="dropdown">
<ul>
<li><a href="#">The Grid</a></li>
<li><a href="#">UI Kit</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Demo</a></li>
</ul>
</div>
</li>
<li><a href="#">Customize</a></li>
</ul>
</div>
(5)Kube
最後にKube。超シンプルなナビゲーションです。
【サンプル】
【コード】
<nav class="nav-h">
<ul>
<li><span>Item 1</span></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</nav>
まとめ
以上、ナビゲーションのあるCSSフレームワークを見てきました。これらをベースに使えば、おしゃれなデザインで簡単にウェブサイトを作れますので、利用してみるとよいでしょう。
