CSS

Bootstrapとは?【メリット・デメリット】【CSS】

どうも、つよぽんです!

今回は「Bootstrap」とは何かについて解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • Bootstrapって何?
  • Bootstrapを使ったら何が出来るの?
  • Bootstrapを使うメリット・デメリットを知りたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
Bootstrapとは何かCSSのBootstrapについての解説記事です。Bootstrapとは何かの説明から、Bootstarpを使ったWebサイト例、Bootstrapのメリット・デメリットを学習できます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. Bootstrapとは
  2. Bootstrapで出来ること
  3. Bootstrapを使うメリット・デメリット

 

Bootstrapとは

BootstrapはCSSフレームワークと呼ばれるものの1つです。

それではCSSフレームワークとは一体何なのでしょうか?

ここではまず「フレームワーク」という言葉を抜き出して考えてみましょう。

フレームワーク」とは「枠組み」という言う意味で、何かしらのアイデアを形にする際に、あらかじめ用意された枠組みに当てはめて考えることで、ゼロから作り上げなくてもある程度の形が出来るものです。

この考え方をCSSフレームワークの視点で考えると、CSSフレームワークとは次のようなことが出来るフレームワークとなります。

CSSフレームワークの機能
  • 枠組みに当てはめてコーディングすればスタイルが整ったWebページが出来る
  • ボタン」「メニュー」「フォーム」などWebページでよく見かけるパーツもルールに従って使うことでキレイな形で提供される

Wikipedia : フレームワーク

Bootstrapで出来ること

Bootstrapで出来ることは前の章で説明した以下の2つだけでなく、

  1. 枠組みに当てはめてコーディングすればスタイルが整ったWebページが出来る
  2. 「ボタン」「メニュー」「フォーム」などWebページでよく見かけるパーツもルールに従って使うことでキレイな形で提供される

レスポンシブデザインなWebサイトも簡単に作ることが出来ます。

レスポンシブデザイン」は一言でいうとパソコンやスマートフォンなど異なる画面サイズごとにWebページのデザインを切り替えるデザインのことを指します。

以下にレスポンシブデザインなWebページのサンプル画像を2つ用意しました。どちらも「パソコンサイズ」「スマホサイズ」での表示の比較をしたものです。

1つ目の画像で「パソコンサイズ」「スマホサイズ」のデザインを見比べると、画面上部の黒帯のメニューの表示内容が異なっているのと、下部の表示要素がパソコンサイズでは3個横に並んでいるのに対して、スマホサイズでは1個しか表示されていないのがわかります。

レスポンシブデザインのサンプルその1レスポンシブデザインのサンプルその1
レスポンシブデザインのサンプルその2レスポンシブデザインのサンプルその2

このように、画面サイズに応じてWebページの見た目を切り替える機能もBootstrapでは用意されています。

レスポンシブデザインなサイトを自分でゼロから作るのと比べると、Bootstrapを使うことで開発工数を大幅に減らせるのでBootstrapを使うことは大きなメリットとなります。

Bootstrapを使うメリット・デメリット

前の章でBootstrapで出来ることやメリットについて説明しました。

ここでは、Bootstrapを使うことで他にどのようなメリットがあるのか、逆にどんなデメリットがあるのかをまとめたいと思います。

まずはメリットから挙げると次のとおりです。

メリット
  1. デザインが出来ない人でもキレイなWebページを簡単に作ることが出来る
  2. レスポンシブデザインなサイトも簡単に作れる
  3. TwitterやFacebookなどによく見かける、画面上部にメニューを固定するデザインが簡単に作れる

次にデメリットを挙げると次のようなものがあります。

デメリット
  1. オリジナリティがない
  2. 基本的にCSSフレームワークのルールに従うので、自分でゼロから作るのと比べると柔軟性がない
  3. CSSフレームワークのルールを覚える必要がある

メリットに関しては、ここまでの章で解説してきたので、デメリットについて1つずつみていきましょう。

オリジナリティがない

オリジナリティがないというのは、Bootstrapを使っているWebページはどれもBootstrapの枠組みにしたがってWebページを作り上げることになるので、良くも悪くもすべて「Bootstrap」なページとなります。

Bootstrapのデザインはシンプルで整っているので悪いというわけではありませんが、Webサイトに個性を出したい場合は、Bootstrapの機能だけでなく自分でカスタマイズする必要も出てきます。

Bootstrapでカスタマイズする際にも、どのようにしてカスタマイズが出来るかの学習をする必要があるので、新しいことを学ぶ学習コストが発生します。

柔軟性がない

1つめに説明した「オリジナリティがない」とかぶる内容ではありますが、Bootstrapを使ってWebページを作ることはBootstrapのルールに従ってコーディングしていくことになります。

そのため、決められたルールでコーディングをする必要があるので、Bootstrapを使わないときと比べると、コーディングの自由度が下がってしまいます。

フレームワークのメリットは自分でゼロから考えなくても型にあてはめればそれなりの形になることなので、逆に言えば自分から型に当てはまりにいくということになります。(=柔軟性がない)

Bootstrapのルールを覚える必要がある

これまでに話した「オリジナリティがない」「柔軟性がない」でも説明しましたが、フレームワークを使うということは、そのフレームワークの使い方を学ぶ必要があります。

これはつまり、普通のCSSの知識だけでなく、フレームワークの知識も学習する必要があります。

Bootstrapのドキュメント」のページを見ると、Bootstrapで提供されているものがたくさんあるのがわかるかと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • BootstrapはCSSフレームワークの1つ
  • Bootstrapを使うことでスタイルが整ったWebページやレスポンシブデザインなサイトも比較的カンタンに作れる
  • Bootstrapを使うと、カスタマイズしない限りオリジナリティのないWebページになる。

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
Bootstrapとは何かCSSのBootstrapについての解説記事です。Bootstrapとは何かの説明から、Bootstarpを使ったWebサイト例、Bootstrapのメリット・デメリットを学習できます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です