今更聞けない!Bootstrapの基礎知識

「ウェブサイトを作りたいけど、PCにもスマートフォンにも対応したい」、「おしゃれなサイトを作りたいけど、難しそう」と思っていた方、Bootstrapを使ってみませんか?本稿では、「Bootstrapって何?」という方向けに、Bootstrapの特徴などを解説していきます。

Bootstrapとは?


Bootstrap(ブートストラップ)とは、Twitter社によって開発されたCSSフレームワークです。ウェブデザインに詳しくない方、HTMLやCSSに詳しくない方でも、レスポンシブに対応した見栄えの良い画面を作ることができるとあって、人気のフロントエンド用のフレームワークです。

「Bootstrap○○」のように、Bootstrapが入っている名前を見かけませんか?人気があり、広く普及していることもあって、他のフレームワーク用などにカスタマイズされ、いくつかの種類があります。

Bootstrapの特徴


Bootstrapを使用するメリットや弱点などについて見ていきましょう。

利用するメリット

1. レスポンシブウェブデザインに対応

レスポンシブウェブデザインとは、PCやスマートフォン、タブレットなど、どんな画面サイズにも対応させたデザインです。例えばPC画面では横並びだったレイアウトが、スマートフォンでは縦並びで表示されることです。

これまでは、PC画面用、タブレット画面用とデバイスごとにソースファイルを作る必要がありましたが、Bootstrapを使うと1つのソースファイルのみでレイアウトを変えることができます。

2. 統一感のあるデザインが簡単に

Bootstrapは簡単にいえば、ウェブサイトに必要なパーツが入ったウェブ画面作成キットです。使いたいパーツ(ボタン、ナビーゲションバーなど)を配置し、デザイン性のある画面を組み上げていきます。使い方も簡単で、パーツ名(実際はクラス名と呼ばれる)を指定するだけです。

さらに、パーツは豊富に用意されており、アコーディオンパネルやスライドショーのような動きのあるものや、テキストボックスにフォーカスするとハイライトされるなど細かな部分もデザインされています。すでに出来ている部品を設置していけばよいので、一から作り上げていくよりも開発スピードが上がります。

3. デザインの変更が簡単

Bootstrapのテーマをダウンロードし、Bootstrapで作られた既存のウェブサイトに適用すると簡単にデザインを変えることができます。

テーマとは、簡単にいえばデフォルトにないテンプレートやパーツ類が入ったキットです。デフォルトと同じパーツ名の、デフォルトとは異なるパーツが用意されており、既存サイトのCSSファイルを置き換えるだけで新しいパーツに変えることができます。

Bootstrapは日本のみならず、世界中で使われておりテーマの種類は豊富です。さらに無料テーマも多くあります。Bootstrapは日本語環境向けに設計されていないため、中には日本語を美しく表示させるためのテーマもあります。仕上がりイメージにより近いテーマを選ぶことで、簡単に好みのウェブサイトをつくることができるでしょう。

Bootstrapの弱点

1. デザインが似ている

出来ているパーツを使っているので、「Bootstrap感」が出てしまい、デザインが似ている、ありきたり、といった印象になりがちです。ちなみにウェブデザイナーのような関係者は、「Bootstrap感」が出ていることを、「Bootstrap臭がする」と言ったりします。

カスタマイズも可能ですが、CSSに手を加えることになります。既存のCSSからカスタマイズしたい部分を探し出すのは、CSSに精通していない方にとっては難しく思われるでしょう。

また、Bootstrapのパーツのみでは難しいデザイン、凝ったデザインにしたい場合には、Bootstrapをカスタマイズするより、一から自分で作ったほうが効率的な場合があります。開発の最初の段階で、デザインに合わせ、Bootstrapを使うのか、自分で作るのかを検討するとよいでしょう。

2. バージョンアップで、互換性がなくなる

バージョンアップや更新が行われると、旧バージョンとの互換性がなくなることがあります。

Bootstrapは現在、Bootstrap 4がリリースされています(2017年12月現在)。Bootstrap 4へのバージョンアップ時には、Bootstrap 3で使われていたクラス名に変更があり、いくつかのクラスは無くなりました。既存サイトに新しいバージョンのBootstrapを適用する場合には、コードの修正が必要になる場合があります。

Bootstrapの種類

Angular directives for Bootstrap

AngularJSと一緒に使えるBootstrapです。

AngularJSは人気のJavaScriptフレームワークで、Bootstrapと一緒に使いたい場面が出てくるかと思います。Bootstrapと AngularJSは相性が悪いため、併用する場合はAngular directives for Bootstrapを使うといいでしょう。

Twitter Bootstrap

現在のBootstrapの旧名称です。

BootstrapはもともとTwitter社によって開発、提供されたので「Twitter Bootstrap」と呼ばれていました。開発者がTwitter社を退職し、オープンソースとなった際に現在の「Bootstrap」へ名称変更されました。

Bootstrap Themes

Bootstrapが公式に提供しているテンプレートです。

ほとんどが有料ですが、デザイン性が高く、テーマも豊富なため、サイトの用途に合ったデザインを選ぶことができます。

BootstrapWP

WordPressで使えるBootstrapです。

Bootstrapを使ってWordPressのテーマを作ることができます。公式サイトでは英語ですが、テーマの作り方などチュートリアルが掲載されています。

まとめ

本稿では、Bootstrapの特徴や種類について解説しました。スマートフォンの普及により、レスポンシブ対応は重要な要素ですが、Bootstrapを使うと簡単・スピーディーに、美しくデザインされたレスポンシブなウェブサイトを作ることができます。Bootstrapを上手に利用し、ウェブサイトにレスポンシブデザインを取り入れてみましょう。

関連記事

ページ上部へ戻る