BootstrapでレスポンシブなWebサイト制作

第4回 デザインパーツを使おう

この記事を読むのに必要な時間:およそ 9 分

ナビゲーション

ナビゲーションの基本系はul要素にnavというclassと,デザインに応じたclassを指定することで利用できます。現在選択されているメニューはli要素にactiveというclassを指定することで対応します。

<ul class="nav [デザインごとのclass]">
  <li class="active"><a href="#">ホーム</a></li>
  <li><a href="#">プロフィール</a></li>
  <li><a href="#">メッセージ</a></li>
</ul>

タブ型ナビゲーション

タブ型ナビゲーションは,基本形のナビゲーションにnav-tabsというclassを追加して使用します。

<ul class="nav nav-tabs"></ul>

画像

ピル型ナビゲーション

ピル(つまり錠剤)型のナビゲーションはあまり日本では聞かない言い回しですが,カスタマイズする場合は背景をベタから差し替えるだけでオリジナリティを出すことができます。カスタマイズのベースとしては比較的使いやすい部品です。使い方はnav-pillsを追加でclassに指定して使います。

<ul class="nav nav-pills"></ul>

画像

カスタマイズ例

Web2.0(リッチUI)時代に流行った,次のようなグロー掛かったデザインのナビゲーションも簡単につくれます。

LESSについてはまだ触れてませんし,画像を使用すると再現が難しくなるため,多少長くなりますが今回はCSS3で次のような指定をしています。

.nav-pills{
  background: #1e5799;
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  border-top: solid 1px #A8D5F8;
  border-bottom: solid 1px #18438F;
  box-shadow: 0 0 3px #000;
  border-radius: 5px;
}

.nav-pills>li>a{
  border-radius: 0;
  color: #fff;
  text-shadow: 0 0 3px #00154D,0 0 3px #00154D,0 0 3px #00154D,0 0 3px #00154D;
  font-weight: bold;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus{
  color: #fff;
  background-color: rgba(255,255,255,0.3);
}

.nav-pills>li>a:hover,
.nav-pills>li>a:focus{
  background-color: rgba(255,255,255,0.3);
}

画像

ピル型ナビゲーションを縦積みする

ピル型ナビゲーションを縦積みすることでサイドカラムなどで便利に活用することができます。使い方はnav-pillsに加えて,nav-stackedというclassを指定します。

<ul class="nav nav-pills nav-stacked"></ul>

画像

ナビゲーションを両端詰めにする

横並びタイプのナビゲーションを親要素の幅に左右にジャストフィットするように配置します。項目が増えても均等に割りつけられるため,CMSでの活用時にも便利なスタイルです。

<ul class="nav nav-pills nav-justified"></ul>

画像

ナビゲーションの中にドロップダウンメニューを入れる

ナビゲーションの中にドロップダウンメニューを入れる場合,少し変則的なコードになるので紹介します。

ドロップダウンメニューの回で紹介した全体を囲むdropdowndを,メニューのli要素のclassとして記述します。また,button要素ではなくa要素を使います(そのためbtnなどの指定は不要です)⁠

<ul class="nav nav-pills">
  <li class="active"><a href="#">ホーム</a></li>
  <li><a href="#">プロフィール</a></li>
  <li><a href="#">メッセージ</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    ドロップダウンメニュー
    <span class="caret"></span></a>
 
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></ul>
  </li>
</ul>

画像

グローバルナビゲーション向けのナビゲーションバー

先ほど紹介したナビゲーションバーとは違い,グローバルナビゲーション向けのナビゲーションバーを紹介します。このナビゲーションバーは,スマートフォンサイズ(768px未満)ではナビゲーションの内容がまとめられボタンでトグルする動作をします。

画像

画像

一見便利そうな機能ですが,一般ユーザーはこのようなインターフェースに慣れてないため,この機能だけでサイトを巡回するために必須の機能を提供するのには実は向きません。そのため,サイト巡回に必要な機能はこのナビゲーションバー以外の方法でも提供するべきです。もちろんコンパクトに収納される特性を利用してサイト全体へのナビゲーションを配置するなどの活用法があります。また,ログインすると利用できる機能など使い込んでる人向けの機能をまとめるのも良いでしょう。

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">タイトル</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">リンク</a></li>
        <li><a href="#">リンク</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
            <li class="divider"></li>
            <li><a href="#">リンク</a></li>
            <li class="divider"></li>
            <li><a href="#">リンク</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">右付きメニュー</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
            <li><a href="#">リンク</a></li>
            <li class="divider"></li>
            <li><a href="#">リンク</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

少し複雑なコードになっているため,上から順番に見ていきます。

ナビゲーションバーの使い方はnav要素にnavbarというclassと,ナビゲーションバーの種類を指定することで利用ができます。上記画像のナビゲーションバーは標準タイプなのでnavbar-defaultと指定します。

<nav class="navbar navbar-default" role="navigation">

何度か登場したcontainer要素。これはナビゲーションバー内部のコンテンツをセンタリングするための要素でcontainer-fluidまたはcontainerを選べます。

  <div class="container-fluid">

containerを選ぶと最大幅1170pxのセンタリングになります(中のコンテンツだけ)⁠

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">タイトル</a><!--タイトル-->
   </div>

スマホ表示の際のボタンとタイトルを定義しています。タイトルについては特になくても機能します。またこのボタン要素はBootstrapのdata-apiでトグルの機能が割り当てられています。data-target属性にトグルする要素のidを指定しておきます(1対1で呼び出せればclassでも可能ですがidを使うほうがスマートでしょう)⁠

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    :
 </div><!-- /.navbar-collapse -->

この中身がメニューとなり,スマホ表示にトグルする内枠となります。

 <ul class="nav navbar-nav">
   :
 </ul>

このリスト要素に必用なリンク等を収納して使います。ナビパーツの様に中にドロップダウンメニューなどを入れることもできます(スマートフォンでの表示時も問題なく動作します)⁠

さらに複数のリスト要素を用意することや,リスト要素にnavbar-rightというclassを追加して右に寄せることもできます。

ナビゲーションバーの様々な種類

基本的な使い方を覚えたところで,ナビゲーションバーのバリエーションを見ていきましょう。nav要素に追加・置き換えでclassを指定するだけで様々なバリエーションのナビゲーションバーが利用できます。

class 説明
navbar-fixed-top CSSのposition: flexを利用して常にトップにナビゲーションが表示されるようになる。そのため,コンテンツをナビゲーションバー分(70px)ずらして配置する必要がある。例)body { padding-top: 70px; }
navbar-fixed-bottom 常に下にナビゲーションを表示する作りとなる。そのため,コンテンツの下方に70px分の幅を開ける必要がある。例)body { padding-bottom: 70px; }
navbar-inverse 黒ベースのナビゲーションバーにするためのclass。これはnavbar-defaultの替わりに使う。
ジャンボトロン

ジャンボトロンは,サイトのメインビジュアル用のパーツです。Bootstrap2時代はヒーローユニットと呼ばれていました。これをそのまま利用すると一気にBootstrapらしさが出るため,あまり利用する機会は多くないでしょう。使う場合は背景をカスタマイズしたりして工夫してみましょう。

使い方は簡単でjumbotronというclassのついたdiv要素で囲むだけです。

<div class="jumbotron">
  <h1>2001年宇宙の旅</h1>
  <p> ... </p>
  <p><a class="btn btn-primary btn-lg" role="button">続きを読む</a></p>
</div>

画像

ページヘッダー

h1要素などをラップする簡単なデザインパーツです。ここをカスタマイズするだけで結構見栄えが変わるので利用する機会が比較的多いパーツでしょう。こちらも利用方法は簡単で,page-headerというclassを指定したdiv要素で囲むだけです。

<div class="page-header">
  <h1>美味しい乾物活用法<small>ふえる超銀河わかめを有効活用</small></h1>
</div>

画像

カスタマイズ例は次のとおりです。

.page-header {
  boader:none;
  padding: 10px;
  margin: 34px 0 17px;
  color: #FFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#e0507b), to(#dd3f6e));
  background: -moz-linear-gradient(top, #e0507b, #dd3f6e);
  border-radius: 5px;
}
.page-header h1{
  margin:0;
}

画像

まとめ

ざっと駆け足でよく使うデザインパーツを紹介しました。今回はサイト制作ということでWebアプリなどでよく使うダイヤログやプログレスバーなどの部品は省略しました。他にも便利な部品は色々ありますので,ぜひ公式サイトに目を通してみてください。

著者プロフィール

齋藤みつる(さいとうみつる)

高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。

URL:http://www.navice.co.jp/