読者です 読者をやめる 読者になる 読者になる

Memo plus Alpha

メモにプラスアルファを加えて価値ある情報に。

【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>

【サンプル】

f:id:semanticist:20130507150707p:plain

非常に単純なコードですが、スタイリッシュなナビゲーションバーができていることがわかります。

 

ということで、美しいナビゲーションが利用できるCSSフレームワーク5選、まずはbootsrapから。

(1)Twitter Bootsrap

非常に有名なフレームワークでナビゲーション以外にも様々なUIが用意されています。ナビゲーションの具体例はさきほどの例を御覧ください。

(2)Groundwork CSS

カラフルで美しいナビゲーションを提供。フォームやボタンも充実しています。

【サンプル】

f:id:semanticist:20130507160109p:plain 

 

【コード】

<nav>

  <ul>

    <li><a href="#">Example Link</a></li>

    <li><a href="#">Example Link</a></li>

  </ul>

</nav>

 

(3)Yaml 4

 次にYaml 4。こちらは黒いナビゲーションで重厚な感じがします。

【サンプル】

f:id:semanticist:20130507160112p:plain

【コード】

<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

 こちらもデフォルトは黒のナビゲーション。サブメニューはドロップダウンで表示できます。

【サンプル】

f:id:semanticist:20130507160110p:plain

 

【コード】

サブメニューが入っているため長くなっています。

 

<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。超シンプルなナビゲーションです。

【サンプル】

f:id:semanticist:20130507160111p:plain

 【コード】

<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フレームワークを見てきました。これらをベースに使えば、おしゃれなデザインで簡単にウェブサイトを作れますので、利用してみるとよいでしょう。