プログラミングを学ぶ過程で「Bootstrap」というワードが出てくることもあります。
この記事ではBootstrapとは何かについて、初心者目線で解説しています。
Bootstrap(ブートストラップ)とは
Bootstrapとは、一言でいうと「デザインのセンスがない人でも、オシャレなwebサイトを作ることができるツール」です。
Bootstrapを使うと、自分でCSSを記述する必要がなくなります。サイトデザインの手間を大幅に削減できるのにも関わらず、オシャレでセンスのあるサイトを作ることができるのです。
Bootstrap(ブートストラップ)についてもっと詳しく
Bootstrapはもっともよく使用されるCSSのフレームワークです。CSSフレームワークは、「CSSのコードを集めたライブラリ集」で、Web制作のデザインを補助してくれる便利なツールというとイメージしやすいでしょう。
CSSフレームワークはいくつか種類があり、Bootstrapはそのうちのひとつです。Twitter社で開発されたものであり、かつてはTwitter Bootstrapと呼ばれていました。
デザインのセンスがなくても、オシャレなサイトを作ることができる理由
一般的にWebサイトは、
①HTMLでページ内容を記述
②レイアウトをCSSで記述
という流れで作られます。
プログラミングを学習している人などは、まずHTML/CSSを学ぶことが多いでしょう。しかしHTMLとCSSを学んだからといって、オシャレなサイトを作ることはできません。ボタンのサイズやフォント、各要素の大きさなどがバラバラになってしまうなど、統一感のないサイトになってしまいがちです。
Bootstrapでは、それらがあらかじめCSSで指定されているので、統一性のあるデザインでサイトを作ることができます。
Bootstrap(ブートストラップ)はこんな人におすすめ
Bootstrapは特にプログラミング初心者におすすめです。
サーバーサイドのプログラミング言語を学んでいる場合、「サイトのデザインまで手が回らない」という方もいるでしょう。とはいえ、ダサいレイアウトだとモチベーションも下がってしまいますよね。
僕自身Ruby on Railsを学習していたとき、デザインは全てBootstrapでパッと作っていました。そうすることで、Railsの使い方やロジックの部分に力を注ぐことができたんです。RubyやPHP、PythonなどのWeb系のサーバーサイド言語を学習している人には特におすすめです。
Bootstrap(ブートストラップ)の需要が高まる理由とは
モバイルファーストが主流になった
モバイルファーストとは、スマートフォンの小さな画面でもストレスなく利用できるデザインにすることです。
具体的な開発の流れとしては、PC向けのレイアウトより、先にスマホ端末向けのレイアウトを作ることになります。
スマートフォンの普及に伴い、Webサイト制作では小さい画面でも見やすいサイトを構築することが求められています。
開発・改善のスピードを高める必要がある
Webサービスは、実は開発したあとが重要です。
実際にサイトを運用し、アクセス解析などを行うことで、「使いにくい」「わかりにくい」ユーザーの離脱ポイントなどを把握することができます。
どこかの点で、多くのユーザーが離脱している場合、開発者は素早く改善していく必要があります。Bootstrapは少ないコードでレイアウトを書くことができるので、そういった課題を解決することができます。
Bootstrap(ブートストラップ)の特徴
Bootstrapには特徴的な点がいくつかあります。
様々な用途で使うことができる
Bootstrapはサイトの規模に関わらず、活用することができます。個人開発のアプリケーションから、企業のサービスまで幅広く使われています。
デザインセンスに自信がない人はもちろん、CSSに詳しくない人でも簡単に扱えるように設計されています。なのでプログラミングやWebデザイン初心者も扱いやすいです。
さらにJavaScriptが書けない人でも、モーダルダイアログなどの動的な機能(本来JavaScriptを使うもの)を簡単に実装することができます。
グリッドシステム
Bootstrapは、サイトの横幅を12分割した列で構成するグリッドシステムが採用されています。
これはサイトの要素(例えばボタンやメニューバーなど)を「全体の何列分の幅を使うか」を指定するだけで、ページ全体のレイアウトを考えることができると言うものです。
これによりCSSのフレックボックスなどを使わなくても、直感的に要素を並べることで、整ったサイトを作ることができるのです。
レスポンシブWebデザイン
スマートフォンの普及により、Webサイトにも、小さな画面でもストレスなく閲覧できるレイアウトが求められるようになりました。
ひとつのWebサイトで様々な画面の大きさに対応するデザインを「レスポンシブWebデザイン」と呼びます。
「PC用」「スマホ用」「タブレット用」などでCSSスタイルシートを別々に用意する方法もありますが、制作の手間とメンテナンスがしにくいと言うデメリットがあります。
レスポンシブWebデザインでは、「PC画面では要素を横並び」「スマホ画面は要素を一列に整形し直して表示」などを簡単に実現することができるのです。
各パーツのデザインが用意されている
Bootstrapには、フォームやボタン、メニューなどが部品がすでに用意されています。
そしてこの部品は、サイトが表示されている端末によって、もっとも適したサイズ・レイアウトで表示されるようにJavaScriptで制御されています。
「大き目の青いボタンを設置したい」という場合は、
<button class=”btn btn-primary btn-lg”>ボタン</btn>
のようにHTMLのクラスに直接記述することで、適切な大きさのボタンが設置されます。
Bootstrapを使うことでまとまり感のあるWebサイトを作ることができるのです。
JavaScriptコンポーネントを簡単に作成できる
Bootstrapでは「ドロップダウンメニュー(クリックするとリストが表示される)」なども簡単な記述で実現できます。これは本来JavaScriptを記述することで実装するものです。
「サイトデザインまで手が回らないけど、かっこいい見た目にしたい」という方など、JavaScriptの学習を省いて、オシャレに実装できます。
Bootstrap(ブートストラップ)対応ブラウザ
Bootstrapは主要ブラウザのほとんどに対応しています。
注意点としてはBootstrapのバージョン4は、IE10以上のみ対応となっています。
Bootstrap
Bootstrap(ブートストラップ)の種類
Bootstrapには、拡張されてた様々な種類が存在します。
Angular directives for Bootstrap
BootstrapはJavaScriptの要素もあるので、JavaScriptライブラリやフレームワークとあわせて使うときに問題が発生する場合があります。
その問題を解消するのが、Angular directives for Bootstrapです。大規模なフレームワークであるAngularJSを用いての開発も、Angular directives for Bootstrapを使うことで互いに干渉することなく開発をすることができます。
Twitter Bootstrap
Twitter社が開発したこともあり、かつては「Twitter Bootstrap」と呼ばれていました。名称が変わった理由は、Twitterから独立してオープンソースになったためです。
Bootstrap Themes
Bootstrapには公式のテーマが存在します。
テーマはデザインの着せ替えのようなイメージです。Bootstrapはカスタマイズ性もあるので、たくさんのテーマがリリースされています。
テーマは有料・無料のものがあるので、好みのものがあれば適用してみましょう。
BootstrapWP
ブログなどを作成することができるツール「WordPress」用にカスタマイズされたBootstrapです。WPはWordPressの略です。
BootstrapWPを使うことで、自分好みのブログにデザインすることができます。
コメント