Boostrapとは

所要時間：30分

このレッスンの目標

  • Bootstrap（CSS フレームワーク）とは何か理解する
  • CSS 設計手法の考え方を理解する（OOCSS の理解）
  • Bootstrap の活用例を知る

Bootstrap（CSS フレームワーク）とは

Bootstrap は、ウェブの画面を簡単にレイアウトできる CSS フレームワークの一つです。CSS フレームワークを簡単に説明すると、「ウェブの画面でよく利用するパーツを集めたもの」といえます。

▼ Bootstrap で利用できる画面パーツ例

引用元：https://hackerthemes.com/bootstrap-themes/demo/default/

通常、デザインの整った綺麗な Web ページを作成するには、多くの CSS コードをゼロからコーディングする必要がありました。

しかし、Bootstrap などの CSS フレームワークを利用することで、予め用意された部品を使い回すだけで、Web ページを簡単にレイアウトできるようになりました。

Bootstrap を利用すると、

  1. HTML タグに Bootstrap 特有のクラス名を指定するだけで画面のスタイリングが完成する
  2. PC 用・スマホ用など、ウェブ画面を閲覧する端末のサイズに合わせた「レスポンシブデザイン」が簡単に実現できる
  3. 自分で独自のルールを決めてクラス名を考えたり、HTML のタグ構成に合わせて CSS のコードをどのように実装したら良いか等、余分なことを考えずにコーディングに集中できる

といったメリットがあります。

CSS 設計の概要と必要性

さて、このようにとても便利な CSS フレームワークですが、この便利なツールを理解する上で必ず知っておきたいことがあります。

それが、「CSS 設計」という考え方です。

初心者に限らず、Web 制作を行う開発者の間では、CSS はプログラミング言語などに比べて自由にコーディングできる反面、ルール化がしづらく、Web サイトの更新の度にコードが増えていき、最終的には管理ができない破綻した CSS コードを生み出すことが多々ありました。

この問題を解決するために、「いかに CSS を管理しやすく保つか」という工夫がこれまでに考えつくされてきて、その背景から誕生したのが「CSS 設計」という考え方です。

CSS 設計の考え方で画期的だったのが、以下の２点です。

  1. 抽象化する
  2. 分ける

抽象化という言葉は難しく聞こえますが、要は「異なるスタイル間で共通するものは何か？」「共通する部分を切り出して一つに纏められないか？」を考える作業です。

分けるとは、

  • ファイルを分ける
  • パーツの大きさで分ける
  • 役割に応じて名前を分ける

このように、管理しやすい単位でコードを適切に分けていく考え方です。

Bootstrap も実際に、このような CSS 設計の考えに基づいて開発されています。

もし、CSS 設計という考え方がなければ、Bootstrap のような便利な CSS フレームワークも誕生してなかったはずなので、CSS 設計の誕生はとても画期的で必要性が高いものだったと言えます。

Bootstrap で採用されている OOCSS の特徴

Bootstrap をこれから学習するにあたって、まずは Bootstrap がそもそもどのような CSS 設計で開発されているか知っておきましょう。

ここでは簡単に、Bootstrap の土台となっている「OOCSS（オーオーシーエスエス）」という CSS 設計手法について解説していきます。

Bootstrap は「構造」と「スキン」を分離した CSS 設計

Bootstrap はクラス名の付け方が特徴的ですが、これはオブジェクト指向 CSS「OOCSS（Object-Oriented CSS）」に基づいて設計されているためです。OOCSS とは、構造とスキンを分離してクラスを定義し、それらを組み合わせてスタイリングするという CSS 設計の 1 つです。

少し難しいと思いますが、以下に具体例を示すので、実際のコード例を見ながら理解していきましょう。

例えば、Bootstrap でボタンの部品を作成する時は、btn 、btn-{ 色 } 、btn-{ サイズ } と 3 つのクラスが指定され、これにより 1 つのボタンが完成します。

構造とは、共通している部分のことを指し、ボタンを作る部品の場合は btn クラスがそれに該当します。

これにスキンとなる色のクラス btn-primary や、サイズのクラス btn-lg が加わって、「primary カラー（青系）の大きいボタン」が完成します。

1 つの要素に複数のクラスを指定することをマルチクラスと言いますが、この方法は個々の要素にそれぞれの役割を持つクラスが割り当てられているため、他のスタイル指定の影響を受けにくく、再利用性が高いのが特徴です。

【学習ポイント】

ここまでの内容を全て理解する必要はなく、

  • Bootstrap は「OOCSS」で開発されている
  • OOCSS は「構造」と「スキン」を分離した CSS 設計である
  • 構造とスキンに分けているので、クラスの指定が多い「マルチクラス」となっている

この３点を覚えておきましょう。

このポイントを押さえて学習を進めていれば、Bootstrap 特有のマルチクラスへの抵抗感や、理解度のハードルも下がっていきます。

Bootstrap の活用例

レッスンの最後に Bootstrap を習得した際の活用例を紹介します。

Bootstrap を習得することによって、

  1. Bootstrap で作られたページテンプレートを利用して、高品質な Web サイトを短期間で制作できる
  2. Web アプリの開発などで、お試し用の画面モックを素早く作成できる
  3. 簡易的な Web ページであれば１時間ほどで制作が完了する

などが挙げられれます。

初心者ほど Bootstrap がオススメ

Bootstrap は、Web 制作に慣れていない初心者の方ほどオススメできるツールです。

というのも、熟練した Web 制作者であれば、様々な Web ページの画面レイアウトを実現する CSS のコーディングテクニックを習得していますが、初めて Web ページのコーディングを学ぶ初学者は、そのような知識のストックはありません。

そのため、熟練者のような知識のストックがないうちは、Bootstrap で用意されている各種コンポーネントのレイアウトを利用することによって、CSS コーディングの知識不足を補うことが可能になります。

まとめ

このレッスンでは、以下の内容について学んできました。

  • Bootstrap（CSS フレームワーク）とは何か理解する
  • CSS 設計手法の考え方を理解する（OOCSS の理解）
  • Bootstrap の活用例を知る

次のレッスンからは、実際に Bootstrap をどのように扱っていくか、演習を交えながら作業を進めていくことになります。

本レッスンの基礎知識をベースに、ぜひ Bootstrap をマスターしていきましょう！

次のレッスン：Bootstrapのインストール方法を理解しよう