Help us understand the problem. What is going on with this article?

Bootstrap3/Simple Sidebarで左側のサイドバーを表示させてみた

※この記事自体ははてなブログの過去記事(2015年)から移転しました。内容古めなのでご注意ください。

記事の対象者

  • Webデザイン初心者~中級者
  • そこそこHTML/CSS/JSの話が分かる。
  • CSS/JSのライブラリを使ったことがある。

目的

  • モバイルファーストかつレスポンシブで業務アプリを作成する ⇒ Bootstrap
  • デザインをなるべく管理しやすくしたい ⇒ LESS
  • サイドバーつけたい ⇒  Simple Sidebar

手段

メインをHTML5/CSS3で構成

ユーザーの環境としてはスマートフォンがメインになるので、古いIEとか無視出来る。基本的にはIE9以下は無視して良さそう。
ただ、将来的にIE8対応は出てくるかもしれない。少し不安に思いつつ、html5shiv.jsとRespond.jsで最低限逃げて終わらせる。((これらを使うか否かの論争はありそうだけど、まずはBootstrapの基本に則って入れる。運用に入る前にちゃんと検討すること))

Bootstrap3/Simple Sidebarプラグインでお手軽開発

Bootstrapは簡単にレスポンシブデザインを実現するためのCSS/JSライブラリ。という訳で、みんな大好きBootstrap3を今回採用。
Simple Sidebarはサイドバー出すためのBootstrapプラグインです。

LESSの活用

LESSはCSSに変数の概念をはじめ、プログラムっぽくすることで、管理し辛いCSSを管理しやすくする言語です。
最終的にcompileした上で配置しないといけないのでちょっと面倒なのですが、開発をする上では管理しやすくなり、便利そう。思い切ってライブラリ以外は全てLESSで書いていきます。後述しますが、Simple SidebarもLESS化して活用する所存。
開発環境ではless.jsを使ってブラウザ上でコンパイルします。

構成

  • 基本構成
    • HTML5
    • CSS3
    • Javascript
    • LESS
  • ライブラリ
    • less.js v2.5.1
    • Bootstrap  v3.3.5
    • JQuery  1.11.3
    • Simple Sidebar 1.0.4
    • html5shiv.js
    • respond.js
  • 開発環境
    • Windows8.1
    • Xampp5.6.11

開発環境を整える

手元にあるXamppを使うことにする。httpdocに下記のファイル群を入れていく。

ファイル構成

hogehoge (ここがroot)
│  └ index.html
│
├─ css
│  └ bootstrap.min.css
│
├─ dev (lessなど本番に配置しないものは全部devに入れる)
│  ├─ js
│  │  └less.min.js
│  │
│  └─ less
│      └─bootstrap (他のライブラリのためにフォルダは分けておく)
│         ├─bootstrap.less
│         ├─simple-sidebar.less (拡張子をlessにしておく:後述)
│         └─mixins
├─ img
└─ js
    ├ bootstrap.min.js
    ├ html5shiv.min.js
    ├ jquery-1.11.3.min.js
    └ respond.min.js

 

Simple SidebarのLESS化

Simple Sidebarの設定も開発するうえで色々変えていく必要があるし、どうせならLESSで管理したい。さらに、Bootstrapの変数を継承させたい。なのでLESS化した上でBootstrapに読み込ませる。
ダウンロードしてきたsimple-sidebar.cssをリネームしてsimple-sidebar.lessに変え、bootstrap.lessの最下部に下記を追記し、呼び出しておく。

// 外部ライブラリ
@import "simple-sidebar.less";

 
本当は中身もBootstrapの変数に対応させていきたいのだけど、まずは置くだけ。必要に応じて変数を導入していく。

Simple Sidebarを表示させる

まずは公式のサンプルをちょろっといじって、各種ファイルを読み込ませる。

<!DOCTYPE html> <!-- HTML5の宣言 -->
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- IEは互換性モード使わず最新版を使うように設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- viewportをデバイス依存にし、レスポンシブ出来るようにする -->

  <title>test</title>
  <link href="css/bootstrap.min.css" rel="stylesheet"> <!--bootstrap.cssを呼び出す。bootstrap.jsは遅延読み込みさせるために</body>直前に記載する -->

</head>
<body>

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Sidebarを使ってみたデモ
                </a>
            </li>
            <li>
                <a href="#">メニュー1</a>
            </li>
            <li>
                <a href="#">メニュー2</a>
            </li>
            <li>
                <a href="#">メニュー3</a>
            </li>
        </ul>
    </div>

    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple SidebarをLESSで使ってみました</h1>
                    <p>ドヤァ</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">サイドバー表示を切り替える</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Javascriptは可能な限り遅延読み込みさせて、Javascriptを読み込む前にページが表示されるようにする -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- bootstrapはJQuery依存 -->
<script src="js/bootstrap.min.js"></script>

<!-- ここから以下はIE9以下のバージョン用の設定。HTML5を認識させるために必要 -->
<!--[if lt IE 9]>
  <script src="js/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="js/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- サイドバー表示を切り替えるのに使用。必ずJQueryの後に記載すること -->
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>

<!-- 開発環境のみLESSファイルをコンパイルする -->
<link href="dev/less/bootstrap/bootstrap.less" rel="stylesheet/less">
<script src="dev/js/less.min.js"></script>

</body>
</html>

動作テスト

うん、いい感じ。こういうテストページをいつかWeb上にもUPしたい。今度やろう。

細かい話。

  • モバイルは通信環境悪いので、なるべく読み込むファイルは小さくしたい。
    • Javascriptは可能な限り遅延読み込みする。
    • 読み込むCSSとJSはちゃんとMinified版を使う。
    • LESSは本番に展開する前にコンパイルする。
  • 外部からライブラリを読み込んで提供元に依存した作りにしない。

色々な入手元

[http://lesscss.org:embed:cite]
[http://getbootstrap.com:embed:cite]
[https://jquery.com:embed:cite]
[http://startbootstrap.com/template-overviews/simple-sidebar/:embed:cite]
[https://github.com/aFarkas/html5shiv:embed:cite]
[https://github.com/scottjehl/Respond:embed:cite]

 

 

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away