こんにちは。daiscoです。新宿スワンの１巻を何気なく読んでみたら止まらなくなって一気読みしちゃいました。もうじき劇場版が公開なるので、見に行っちゃうかもしれません。

さて、GUUMA DESIGNでは、「レスポンシブデザイン」（スマホサイトとPCサイトが同時にできるやつ）に本腰を入れるため、少し前からホームページ制作にBootstrapとSassを使っています。
これらを使うと、レスポンシブデザインのホームページ制作が格段に効率よくできるようになります。

しかし、理解して使いこなせるようになるまでに時間がかかるのも事実。
あなたがスマホに初めて触った時もそうだったんじゃないですか？　慣れればすごく便利ですよね。

Bootstrapとは？

Bootstrapとは、cssのフレームワーク。いくつかのcssファイルでできていて、WEB制作者がやらなければならないcssの設定があらかじめ作ってあります。特別なソフトは必要ありません。

例えば、マンガを描くにあたり、顔や手、吹き出しなどのいろんな種類のスタンプが用意されているようなものでしょうか。

そこにオリジナルのスタンプを加えたり、描き下ろしたりしてオリジナルのデザインを作っていくのです。

すごく簡単そうなイメージになって申し訳ないですが、スタンプはものすごくたくさんある上に、どれとどれがつながるかわからないから、まずスタンプの使い方を覚える必要がある、という感じですかね。

htmlとcssの経験があれば、１周間さわればだいたいわかると思います。

Sassとは？

もうひとつ、Sassも導入しました。
Sassは、変数や条件分岐が使えるcss、というイメージです。
htmlと（簡単な）phpに似ています。
.scssや.sassのファイルで制作し、最終的にcssファイルを書き出して（コンパイルして）使います。なので、書き出すためのソフトが必要です。

僕が書き出しに使っているのは、Scoutというフリーソフト。環境はmac OS X（10.10）です。
Scoutは指定フォルダを常にチェックしていて、.scssが更新されると、その.scssからcssファイルを書き出してくれます。

このように、Sassを使うにはまず環境づくりをがんばらないといけないです。場合によってはつまづきます。僕は、つまづきました（笑）

さて、Sassが便利なのは、cssをphpみたいに使えることです。

たとえば

$maincolor : #544528;

のように定義し、

color : $maincolor;
border : 1px solid $maincolor;

のように使えるのです！

他にもいろいろ便利なのですが、今回は割愛します。

Bootstrap + Sass

さきほど紹介したBootstrapにはSass用のファイルもあり、Bootstrap + Sassの環境を作ることで、より効率的なcss制作ができます。
おすすめはSassに慣れてからのBootstrap。
まずSassの環境を作って、少し慣れてからBootstrap + Sassにするといいと思います。いきなりBootstrap + Sassは挫折するかもです。

制作時間がすごく短縮できるの！？

実感としては、制作期間の短縮になる、というよりも、同じ制作時間で、より対応の幅が広がる（クオリティがあがる）、という印象を受けています。

htmlコーディングもhtml直打ちからphpを使ったモジュール化、そしてwordpress導入と変化してきましたが、制作時間はあまり変わらずに、より高機能になっているのと同じですね。

なるべく専門的な内容は避けたつもりですが…。
BootstrapもSassも結構深いですよ！