ここから本文です

この知恵ノートを「知恵コレクション」に追加しました。

追加した知恵ノートはMy知恵袋の「知恵コレクション」ページで確認できます。

知恵コレクション」に登録済みです。

再登録しました。

追加に失敗しました。

ノートに戻り、もう一度やり直してください。

すでに1,000件のノートが登録されています。

新しく追加したい場合は、My知恵袋の「知恵コレクション」ページで登録されているノートを削除してください。

追加できませんでした。

ノートは削除されました。

Bootstrapで固定サイドバーを作成(レスポンシブ対応)

ライターさん(最終更新日時:2013/11/1)投稿日:

  • ナイス!:

    1

  • 閲覧数:8480

印刷用のページを表示する

bootstrapで固定サイドバーを作成(レスポンシブ対応)

Twitter Bootstrapで固定サイドバーを作成する方法です。

 

公式サイトでのサイトメニューは、画面をスクロールしてもサイドバーは固定されたままです。

これは、Affixというプラグインを利用して実現しています。

 

しかし、このプラグインを利用しなくても、スタイルシートの定義を追加するだけで簡単に固定サイドバーを作成することができますので、その方法をここに記述します。

 

まずは、サイドバーを作成する

htmlファイルは以下の通りです。

※my-stylesheet.cssは独自定義のスタイルシートです。

<!DOCTYPE html>

<html lang="ja">

 

  <head>

    <meta charset="utf-8">

    <title>サイト名</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

    <link href="css/my-stylesheet.css" rel="stylesheet">

    <!--[if lt IE 9]>

      <script src="js/html5shiv.js"></script>

    <![endif]-->

    <script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </head>

   

<body>

 

  <!-- 上部固定のナビゲーションバー -->

  <div class="navbar navbar-fixed-top">

    <div class="navbar-inner">

      <div class="container">

 

        ~(略)~

 

      </div><!-- /container -->

    </div><!-- /navbar-inner -->

  </div><!-- /navbar navbar-fixed-top -->

 

  <div class="container">

    <div class="row">

      <!-- 左部固定のサイドバー -->

      <div class="span3">

        <ul class="nav nav-tabs nav-stacked fixed-sidebar">

          <li><a href="#header1"><i class="icon-chevron-right"></i>ヘッダ-1</a></li>

          <li><a href="#header2"><i class="icon-chevron-right"></i>ヘッダ-2</a></li>

          <li><a href="#header3"><i class="icon-chevron-right"></i>ヘッダ-3</a></li>

        </ul>

      </div><!-- /span3-->

 

      <!-- 本文 -->

      <div class="span9">

 

        ~(略)~

 

      </div><!-- /span9 -->

                   

    </div><!-- /row -->

  </div><!-- /container -->

 

  <footer>

    <div class="container">

      <p>&copy; コピーライト</p>

    </div>

  </footer>

</body>

</html>

 

cssファイル(my-stylesheet.css)

body {

    padding-top: 60px; /* 上部のナビゲーションバーの分の余白 */

}

 

@media (min-width: 768px) and (max-width: 979px) {

  body {

    padding-top: 0px; /* 上部に余白が表示されないようにする */

  }

}

 

@media (max-width: 767px) {

  body {

    padding-top: 0px; /* 上部に余白が表示されないようにする */

  }

}

 

/* アイコンを右寄せ */

.fixed-sidebar .icon-chevron-right {

  float: right;

  margin-top: 4px;

  margin-right: -6px;

}


これで、とりあえず、サイドバーが表示されるようになります。


 

固定サイドバー対応

上記のソースのままだと、スクロールしてもサイドバーは固定されません。

それを固定化させるための対処です。

固定サイドバーのクラスを「fixed-sidebar」として定義しましたので、固定化するために、スタイルシートに以下のようにwidthとposition:fixedを指定します。

body {

    padding-top: 60px; /* 上部のナビゲーションバーの分の余白 */

}

 

@media (min-width: 768px) and (max-width: 979px) {

  body {

    padding-top: 0px; /* 上部に余白が表示されないようにする */

  }

}

 

@media (max-width: 767px) {

  body {

    padding-top: 0px; /* 上部に余白が表示されないようにする */

  }

}

 

/* アイコンを右寄せ */

.fixed-sidebar .icon-chevron-right {

  float: right;

  margin-top: 4px;

  margin-right: -6px;

}

 

.fixed-sidebar {

    width: 220px; /* span3を利用しているためspan3のサイズ */

    position: fixed;

}

 

 

レスポンシブ対応

上記のままだと、画面幅が小さいディスプレイで表示させると、サイドバーと本文が重なってしまいます。

そこで、ディスプレイサイズごとに、横幅の調整を行います。

body{

    padding-top: 60px;

}

 

/* アイコンを右寄せ */

.fixed-sidebar .icon-chevron-right {

  float: right;

  margin-top: 4px;

  margin-right: -6px;

}

 

.fixed-sidebar {

    width: 220px; /* span3を利用しているためspan3のサイズ */

    position: fixed;

}

 

@media (min-width: 1200px) {

  .fixed-sidebar {

    width: 270px; /* span3を利用しているためspan3のサイズ */

  }

}

 

@media (min-width: 768px) and (max-width: 979px) {

  body {

    padding-top: 0px;

  }

  .fixed-sidebar {

    width: 166px; /* span3を利用しているためspan3のサイズ */

  }

}

 

@media (max-width: 767px) {

  body {

    padding-top: 0px;

  }

  .fixed-sidebar {

    position:static; /* 固定化解除*/

    width: auto;

  }

}

画面サイズが767px以下の場合は、position:staticとし、width:autoとして、固定化を解除します。これにより、画面サイズが767px以下の場合は、上部ナビゲーションバーの下にサイドメニューが来て、その下に本文がくる構成となります。

※こんな感じの構成です。

上部ナビゲーションバー
左サイドメニュー
本文

それ以外の場合は、下記のような構成となります。

上部ナビゲーションバー

左サイドメニュー      本文                                    

 

 

今回の例では、左サイドバーはspan3を利用していますが、span4等、他のspanを利用する場合も、方法は同じです。対象spanのサイズに合わせて、widthの設定を変更してください。

このノートに関するQ&A

このノートに関するQ&Aは、まだありません。

このノートについて質問する

このノートについてライターの方に質問できます。

※ライターの方から必ず回答をいただけるとは限りません

※別ウィンドウで開きます

ピックアップ

耳鼻科の先生に聞いた、しゃっ...
  皆さん、しゃっくりってわずらわしいですよね  ある時急に...
厄年について——意外と知られて...
厄年とは何か厄年とは文字どおり災厄に遭いやすいといわれる...
知っておきたい無線LANルーター...
知っておきたい無線LANルーターの知識と選び方iPod touchやPS...
本文はここまでです このページの先頭へ