※この記事自体ははてなブログの過去記事（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 ｖ2.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="#">メニュー１</a>
            </li>
            <li>
                <a href="#">メニュー２</a>
            </li>
            <li>
                <a href="#">メニュー３</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]