※この記事自体ははてなブログの過去記事（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]