今からBootstrap3を始める人のための、CSSフレームワーク入門

2017-01-04

Pocket

Bootstrap3はCSSフレームワークとして定着してきており、情報量も豊富なので、初心者のWebデザイナーさんでも簡単に使い始めることができるのが嬉しいところ。

すでにTetraThemesでもBootstrap3の使い方をたくさん書いてきましたが、以前のものはバージョンが古くなっているということもあり、最新版の内容を改めてまとめていきたいと思います。

今からBootstrap3を始める方でも簡単に使えるのですが、まずはCSSフレームワークってなんなの？という基本的なところから確認しておきたいと思います。

CSSフレームワークとは？

Confused pug

Bootstrap3の前にCSSフレームワークについて理解しておいた方がいいでしょう。

Web制作（コーディング）を経験した人はわかると思いますが、PSDなどで作られたデザインをHTMLとCSSに置き換える作業で毎回似たような作業を行うことがありますよね。

CSSスタイルで言えば、フォントの設定とかフォームのスタイル、HTMLなら以下のような画像とテキストのセットはよくあるパターンです。

<div class="serviceItiran-01">
  <img src="../assets/images/sugoi-service.jpg" alt="sugoi-service">
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

コーディング規約をしっかり決めていない場合、このようなシンプルなコンテンツでも毎回異なるclass名やHTML構造（divで囲んだり、囲まなかったり）になることもよくある話。

ついつい作れればなんでもいいやって感じになりそうですが、同じような見た目なら再利用できた方が作業効率も上がって便利だよね？ってことで使われるようになったのがCSSフレームワークなのです。

CSSフレームワークを一言で言うと、「よくあるHTML構造とCSSスタイルパターンをまとめて、再利用しやすくしたもの」という感じです。

CSSフレームワークで何ができるの？

They're both confused

じゃあそれで何ができるの？ということなんですが、CSSフレームワークでは先ほどのような画像とテキストのパターンがコンポーネントとしてあらかじめ用意されているので、それをコピペしていくだけでサイトを作ることができます。

先ほどのコードをBootstrap3のThumbnailに置き換えるとこんな感じになります。

<div class="thumbnail">
  <img src="../assets/images/sugoi-service.jpg" alt="sugoi-service">
  <div class="caption">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

このコードだけを見ると「別にどっちでもいいじゃん」って思うんですけど、重要なのは再利用できるということ。前の方はclass名やHTML構造が決まっていないのでサイトごとにバラバラに作る必要があったのに対し、CSSフレームワーク（この場合はBootstrap3）を使った方は構造が決まっているのでどのサイトでも使い回すことが可能です。

とくにレスポンシブなんかは毎回CSS書いてたらそれだけで日が暮れてしまうので、使いまわせるところは使いまわそう！ということですね。

このようなコンポーネントの他に、レスポンシブレイアウトを作るグリッドや、Javascriptを使ったスライドショーまで用意されているので

Bootstrap3とは？

Bootstrap3はここまで説明してきたCSSフレームワークの１つ。CSSフレームワークにはいくつか種類があるんですが、その中でもとくに人気の高いものがBootstrap3です（最新版は3.3.7）。

人気が高いということはネット上でも使い方ブログがたくさん見つかるため学習コストも低く、これからレスポンシブデザインを始める人にもオススメのCSSフレームワークとなっています。

では最後に、Bootstrap3を使いこなすためのリソースをいくつかピックアップしてみま。

Bootstrap3のリソースまとめ

Bootstrap3入門
TetraThemesのBootstrap3入門まとめ記事。インストール〜各種コンポーネントの使い方まで。

getbootstrap
本家ドキュメント。サンプルコードもあるのでブックマークしておくことをおすすめします。

startbootstrap
無料でダウンロードできるテンプレートがたくさん！サイト構築の勉強にもどうぞ。

bootswatch
こちらはテンプレートではなく、テーマパターンをダウンロードできるサイト。シンプルなものからおしゃれなものまでいろいろ揃ってます。

bootsnipp
Bootstrap3で作られたオリジナルのコンポーネントやよくあるパターンをスニペットとして使うことができます。ECサイトや管理画面メニューなど結構本格的なものも数多く登録されています。

Bootstrap 3 snippets for Atom
テキストエディターを使っているならこちらのような拡張機能を追加しておくことで、Bootstrap3のコーディングを素早く行うことができます。こちらはAtom用ですが、SublimeTextやVisualStudio用もあるのでコードエディターを使う際は入れておきましょう。