フレームワーク＆API 5-01
Twitter Bootstrapを使ったサイト構築の流れ（後編）

レスポンシブWebデザインとグリッドレイアウト、そしてメディアクエリに対応したCSSフレームワークであるTwitter Bootstrapについて、CSSメタ言語のLESSとともに解説する。

制作・文／酒井能克（有限会社ブルームーン）

BROWSER IE…7over　Firefox…3.6over　Safari…3.1over　Chrome…10over

LESSを使ってBootstrap をカスタマイズする (2)

LESSの設定

前述したとおり、Twitter Bootstrap のCSSファイルはLESSから自動生成されている。

なお、LESSのソースコードは GitHub プロジェクトのサイトからダウンロードする必要がある【01】。ダウンロードしたファイル構成は、【02】のようになっている。

次にLESSのコンパイラ【03】【04】をインストールしてからコンパイルの設定を行う【05】。後はエディタで編集すれば、保存時にLESSのアプリケーションが自動的にコンパイルして同階層のCSSフォルダにあるCSSを上書き更新してくれる。

以前は node.js などで環境を構築しテンプレートに LESS 用のJavaScriptを組み込まなければならなかったが、今はLESSのアプリケーションがすべて行ってくれる。

【01】GitHubにあるtwitter Bootstrapプロジェクトのサイト。（https://github.com/twitter/bootstrap）。「ZIP」をクリックしてダウンロードする。

【02】bootstrap-masterフォルダの内容。lessフォルダをdocs/assetsに移動して後述するlessアプリに登録すると、lessファイルを編集して保存した際に自動的にコンパイルされてCSSの内容が更新される。ファイルをブラウザで閲覧しながら編集結果を確認できるようになるので便利だ。

【03】MAC OS X用のLESSコンパイラ（http://incident57.com/less/）。

【04】Windows 用のLESSコンパイラ（http://winless.org/ ）。

【05】Mac 用コンパイラでの設定方法。左下にある「+」で自動コンパイルするフォルダを登録し、メニューのPreferenceからCSSフォルダへの自動更新をマークする。ここでは「Bootstrap_Blue」とフォルダ名を変更している。

LESSの使い方

LESS の環境が整ったところで具体的な使い方を試してみよう。たとえばdocs/examplesフォルダに入っているhero.htmlなどがサンプルとして最適だ【06】。まずはこのファイルをブラウザで開き、lessフォルダ内のvariables.lessをエディタで開いてみる。

【06】http://twitter.github.com/bootstrap/examples/hero.html

グローバルナビゲーションをカスタマイズ

178行目にある// Navbarとコメントされているのがグローバルナビゲーションの設定だ。

ではまず、ナビゲーションのカラーを緑に変えてみよう【07】【08】（なお、ここで記載している行数は2012年12月3日時点のものである。ファイルが更新されると行の位置も変わるので、あくまでも目安として利用してほしい）。

次にHello,worldの窓の色を変えてみよう【09】【10】。

今度はページ全体の背景色を変えてみる【11】【12】。

ここで解説したvariables.less は、前回の画像【10】でも説明した、カラースキームのコントローラである。ここでカラーを調整するだけでサイト全体のカラースキームが調整できる。

また、hero-unit.less ファイルにbackground-image: を追加して保存するだけで、バックグラウンドの画像も簡単に変更することができる。

なお、SASSやLESSなどのメタ言語については、「5-6　Web開発の生産性を向上させるメタ言語Sass（SCSS）とLESSとは」でも解説するので参考にしてほしい。

【07】

【08】variables.less 199行目の#222222を@green にする。

【09】

【10】226 行目の@grayLighter を@yellow へ。

【11】

【12】35 行目の@white を@grayLighter へ。

Gridデザインと可変レイアウト

最後に少し駆け足になるが、Gridデザインと可変レイアウトについて触れておこう。

Bootstrapは12barのグリッドレイアウトを基本としていて、<div class="rowfluid">と<div class="span1">から<div class="span12">の組み合わせでブロック配置できる【13】。

このようにして作成したサンプルとして筆者のサイト【14】を挙げる。ブラウザの大きさを調整して確認してもらいたい。

【13】可変レイアウトはウィンドウ幅に応じてレイアウトが縮小し、一定幅以下になると左右に並んでいたブロックが下に潜り込む。

【14】

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。