パソコンだけでなく、スマホやタブレットなどさまざまなデバイスでWebページが閲覧されるようになってきていますが、マルチデバイスに対応したデザイン作りは時間がかかるものです。
こういった時に頼りになるのが、HTMLやCSS、JavaScriptによって構成されたフレームワークで、その中でも特に人気が高いのがBootstrapです。
Bootstrapの用途やメリットなど、Web制作に携わる人が知っておくべき情報を紹介します。
Bootstrapとは？
BootstrapはHTML、CSS、Javascriptで構成されるフレームワークで、もともとはTwitter社が自社用に開発されたものがオープンソースになって世界中で使われるようになっています。
Webサイト用のCSSは、スタイルを自分で作っていくのが基本ですが、フレームワークでは利用頻度の高いパーツのスタイルがあらかじめ定義されており、フレームワーク上の文法に従って記述するだけで洗練されたデザインのWebサイトを作成できます。
また、規模が大きなサイトになってくるとコーダーが複数人になる場合も多いですが、そういった場合でも記述ルールやデザイン上の差異のないサイトを作成しやすくなります。
Webページで欠かせないフォームやボタン、メニューなどがテンプレートとして用意されているので、一からデザインをする必要がなく、かつさまざまなデバイスに対応したデザインがすぐに作成可能です。
その便利な機能から、他のフレームワークやCMSでもBootstrapを拡張したものが数多く作られて利用されています。
最近はBootstrapを利用したサイトが増えており、サイトの運用・保守や新規開発案件の募集要項でもBootstrapを指定のフレームワークとしているケースも多くなっています。
Bootstrapの使い方
Bootostarapを使う場合、最新版を公式サイトからダウンロードして使います。
記事執筆時点では、Bootstrap v4.3.1が最新バージョンです。
バージョンによって機能に若干違いがあるため、旧バージョンが導入された環境での案件は機能の違いに注意しましょう。
ダウンロードしたファイルを解凍すると、CSSファイルとJavaScriptのライブラリが格納されたフォルダ、フォントやテンプレートを格納したフォルダがあります（※バージョンや拡張により異なる場合があります）。
そして、それらを自分のWebサーバーにアップロードします。
あとは、HTMLファイルを作成する際に<head></head>部分でCSSやJavaScriptのファイルを呼び出して使用するだけです。
テンプレート用のファイルも公式サイトを始め、インターネット上で多く公開されていますので使いやすいテンプレートファイルを準備しておくと良いでしょう。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選Bootstrapを使うメリット
Bootstrapを使うメリットや有効な場面について紹介します。
デザインされたパーツをすぐに利用できる
CSSを自分で作成していると、デザインに統一感がなかったり、イメージに合わない部品ができてしまったりして何度も作り直すことになりがちです。
Bootstrapではボタンややフォーム、メニューなど部品が洗練されたデザインで提供されているので、それらを組み合わせるだけで見栄えのするサイトを作ることができます。
テスト用や提案用、叩き台などの用途でデザインを急ぐ必要がある場合などにとても便利です。
画面レイアウトを素早く作ることができる
Webデザインの中で意外と時間のかかる画面のレイアウト作成をスピーディーに行えるのもBootstrapの大きな特徴です。
Bootstrapには画面の横幅を12分割して考えるグリッドシステムがあり、簡単な設定できれいに区分けされた画面レイアウトを作成することができます。
マルチデバイスに対応しており、スマホやタブレットなど端末ごとのレイアウトを組めるようになっています。
マルチデバイス対応の画面表示を簡単に作成できる
Bootstrapでは、グリッドシステムだけでなくさまざまなパーツもマルチデバイスに対応した表示にすることが可能です。
たとえば、ページ内で表を表示する場合、画面の小さなデバイスでは表の全体が表示されなかったり、過度に縮小されて見えにくくなることがあります。
Bootstrapではクラスを追加して指定するだけで、table要素にスクロールバーをつけて表示することができます。
また、フォームの位置を揃えたい場合も、tableでレイアウトせずとも1行で実現可能です。
よく利用する機能やデザインがクラスから簡単に実現可能
Webサイトで表を作成する場合、行数が多くなると視認性が悪くなるため一行ごとに背景色を変えてデザインすることがあります。
通常はCSSやセレクタの設定を数行記述する必要がありますが、table要素にクラスを１つ追加するだけで実現することができます。
要素のmarginやpaddingもクラス名だけで指定することが可能で、セレクタをあまり気にせずに要素を指定できます。
ドロップダウンメニューや折りたたみ式のコンテンツも簡単に作成可能です。
Bootstrapの使い方まとめ
Bootstarapはマルチデバイス対応のWebデザインを簡単にできるように作られた世界的に人気のフレームワークです。
デザインされたパーツを利用できる他、セレクタの指定方法が簡便化されているためにスタイルを適用したい部分を絞り込んで利用しやすくなっています。
慣れてくると開発効率がまるで違ってきますので、Web制作に携わる人はぜひ使い方をマスターして業務に活かしましょう。