Bootstrap4を解説 - 面倒な実装を楽にしよう -
Bootstrapを使ってWEBサイト制作をしよう！
はじめに
CSSやJavaScriptを絡めての複雑な実装は面倒だ
HTMLやCSSを学習して、お洒落なWEBサイトを作って色々な人に見てもらいたい！そう思ってはいるものの、実際に制作を行ってみるととても大変で、挫折をしてしまったという人も少なくはないと思います。
「サイトに使うボタンを1から設計してCSSを書いていくのは時間がかかるし面倒」、「イメージスライダー(何枚かの画像が一定時間ごとに切り替わっていくもの)なんて作り方が全然見えてこない」、「画面のレイアウトをどのように設計していけばいいのかがピンとこない」、「できるだけ早く制作したいのに、もっと楽に作りたい！」など...マークアップを学び始めたばかり、あるいはあまり得意ではない人にとっては悩みが尽きないでしょう。
もっと楽にWEBサイトを作れればいいのに...!
そのような人は、一度 "Bootstrap" の導入を是非とも検討していただきたいと思います。
本記事ではBootstrapというものがどういう特徴を持っていて、どのように生かしていけるかを紹介します。
ある程度HTMLやCSSはわかるものの、JavaScriptが絡んでくるとわかりにくい、要素の色を変えたりサイズを変更するのがやっとで、複雑な要素の実現はできないという人には是非ともオススメです。逆に、HTMLやCSSという言葉にすらピンとこない段階では、Bootstrapも使いこなすのは難しいかもしれません。
Bootstrap4 とは？
CSSのフレームワークの1つ
Bootstrap4は、米国Twitter社のMark Otto氏、Jacob Thornton氏の両名によって開発された、CSSのフレームワークの1つです。CSSのWEBフレームワークはいくつか種類があるのですが、どのCSSフレームワークも基本的な使い方は大きくは違わないので、知名度もあり数多のユーザーが利用した記録を残しているBootstrap4の使い方を覚えてしまえば、色々なところで応用を効かせることが可能になります。
最大の特徴はなんと言っても「グリッドシステム」と呼ばれるデザイン方式であり、ページを格子状に分割し、要素を必要な分だけ使って配置することが可能です。ページに必要な部品(コンポーネントと呼ぶことが多いです)の配置をイメージを掴みながら行うことができ、初心者には少し敷居が高めなレスポンシブデザインの対応を柔軟に行うことができます。初心者から上級者まで扱いやすいフレームワークです。
Bootstrap4 の特徴
Bootstrap4には様々な特徴があり、どれも使いやすいものばかりです。ただ、かなりボリュームもあるので一度に全てを使いこなそうとするよりは、よく使う特徴的なものから先に覚えて少しずつ慣れていく方が良いでしょう。
グリッドシステム
前述の通り、Bootstrap4では" グリッドシステム "と呼ばれるページを格子状に分割するデザイン方式が採用されています。Bootstrapの場合は12カラム方式(1つのページのレイアウトを12分割したと考えてデザインする)が採用されています。
分割した12カラムの中から、画面やそれぞれのパーツごとに必要な分だけカラムを確保し、横の合計が12カラムになるようにして、要素の配置を行なっていきます。
では、グリッドシステムで分割をした例を見てみましょう。
＜div class="row"＞
＜div class="col-4"＞First＜/div＞
＜div class="col-8"＞Second＜/div＞
＜/div＞
こちらは最も基本的なグリッドシステムの一例です。divタグが2つあり、それぞれ"col-4"、"col-8"とクラスが振られています。これがBootstrap4であらかじめ用意されているクラスです。
クラス名の数字が重要です。前述の通り、Bootstrap4では1つのページを12分割したレイアウトが採用されています。このクラス名の数値を使って、その要素で占有したいレイアウト量を確保するのです。
上記の場合ですと、"col-4"では4つ分、つまりレイアウトのうち4/12を使うという意味になります。
"col-8"では8つ分、レイアウトの8/12を使うという意味になり、上記col-4と合わせて12分割したレイアウトを全て使っているのがわかります。
ただしグリッドシステムを利用する上では注意点もあります。レイアウトが12分割されているという都合上、各コンポーネントを横並びにさせたい場合は、占有するレイアウトの合計が12になるように設定しなければなりません。
＜div class="row"＞
＜div class="col-9"＞First＜/div＞
＜div class="col-5"＞Second＜/div＞
＜/div＞
上記の場合、レイアウトの合計が12を上回ってしまっています。この場合、コンポーネントを横に並べることができません。横並びにしたい場合はコンポーネントを調整して合計値12に収まるようにしなければなりません。
なお、レイアウトの合計が12を超えた場合、オーバーした分がはみ出てしまうことはありません。はみ出るコンポーネントが存在する場合、次の行に改行されて表示されます。
レスポンシブデザインに対応している
レスポンシブデザインとは、ブラウザの画面サイズに依存しないWEBサイトを構築するデザイン手法のことです。
パソコンとスマートフォンでは同じWEBサイトにアクセスしているのに、画像の表示のされ方やメニューの表示の形が異なるというものがありますが、それはレスポンシブデザインによって構築されているWEBサイトだからです。
対応ブラウザごとにデザインを切り替える手法としては、PC用のファイルとSP用のファイルとを用意しておいて媒体ごとに読み込ませるファイルを切り替える方法、サーバごと切り替えてしまう方法とありますが、どちらもファイルを対応ブラウザの分だけ用意しなければならず、コストがかかってしまいます。
レスポンシブデザインでは、同じCSSファイル内に横幅ごとのCSSを記述しておけるため、PC用サイトとSP用サイトで大幅にデザインが変わるなどの極端な例ではない限りは手軽に用意できるため重宝されます。
そして、前述のグリッドシステムというのはこのレスポンシブデザインの設計において強力な効果を発揮します。
例えば、写真を一覧表示するようなサイトを作りたいといった場合、PC用のサイトでは画面内に写真を3つ並べるといった設計をしたとします。この場合は、通常なら写真1つ1つのcontainerに"col-4"クラスを付与すれば写真を3つ並べることができます。しかし、スマートフォン用のサイトで見てみると、スマートフォンの横幅で写真を横に3つ並べると、1つ1つがとても小さい写真になってしまい、窮屈な印象を与えてしまいます。スマートフォン用のサイトでは写真1つに対して横幅いっぱいを与えたい、といったことも考えられるため、"col-12"を付与してしまいたい...と考えていけるのです。
そして、Bootstrapにはレスポンシブデザイン用にもクラスが用意されていて、このクラスを付与するだけで、レスポンシブデザインに対応させたページの作成をすることが可能です。
＜div class="row">
＜div class="col-lg-4 col-12"＞
＜img src="###" alt="###"＞
＜/div＞
＜div class="col-lg-4 col-12"＞
＜img src="###" alt="###"＞
＜/div>
＜div class="col-lg-4 col-12"＞
＜img src="###" alt="###"＞
＜/div＞
＜/div＞
"col-lg-4"のlgというところで、対応させる横幅が変わります。この場合、lgサイズ以上であれば12分割のうち4つ分を利用し、それ以下の横幅である場合は、12分割の12個全てを占有するといった意味になります。
あらかじめコンポーネントが用意されている
Bootstrapでは、ボタンやフォーム、モーダル、ナビゲーションバーや、イメージスライダー、ジャンボトロンといった、WEBページをより鮮やかに構成するための様々なコンポーネントがあらかじめ用意されています。しかしながらこれらのパーツを0から作ろうとする場合、JavaScriptの知識や構成のためのデザインを考える必要があるなど、細かな部分も考えると初心者には敷居が高めで、実際に1から作成しようとしてみても大変時間がかかります。しかしながら、Bootstrap4では、用途にあったクラスを付与するだけで作成に時間がかかるこれらのコンポーネントを手軽に配置することが可能です。
Bootstrap4 の使用にあたって
jQueryを使う
様々なコンポーネントがあらかじめ用意されている点からも分かる通り、JavaScriptが必要になります。
JavaScriptのライブラリであるjQueryはBootstrap4の動作において必須です。事前にインストールしておきましょう。
【注意点】デザインの自由度が低くなってしまう
Bootstrap4は手軽にコンポーネントを用意できて非常に便利なのですが、自分でデザインを行うわけではないため基本的には自由度が低くなってしまいます。
Bootstrapで提供されるボタンは基本的には統一されているものであり、Bootstrapを使ったWEBサイトはどこか同じような見た目になりがちです。いわゆるBootstrap感、Bootstrap臭と呼ばれるものであり、大規模なプロジェクトや、独自のブランドでのWEBサイトを作成する場合には不向きであると言えます。
自分で独自デザインのボタンやフォームを作りたいという場合、既存のBootstrap4からインストールしたファイル内にあるCSSをさらに修正して使うということになります。0からコンポーネントを作るよりも工数を要してしまう場合もあり、自作した方が早いということも多いです。
プロジェクトの要件をよく確認し、Bootstrap4を導入するべきか否かを判断するようにしましょう。
Bootstrap4 を使おう！
Bootstrap4 はどうやって使えばいい？
実際にBootstrap4を利用するにはいくつかの方法があります。用途に合わせて使い分けてみましょう。
BootstrapのCDNを使う
CDNとは、WEBサービスをネットワーク経由で利用するための仕組みのことです。
Bootstrapには、CDNファイルが公式でアップされているので、それを都度インターネット経由で読み込むことにより、Bootstrapの各種機能を使えるようになるというものです。CDNを利用するためのURLが公式サイトに記述されているので、その説明通りにHTML内に記述すれば利用可能です。
CDNでBootstrapを利用する方法は、各種ファイルのダウンロードをせずに済むため手軽さという点では優れています。しかし、インターネットが繋がらなくなってしまっては利用ができないという欠点を抱えているため、もっぱら自分でBootstrapを使った学習を行うために利用するに留めておきましょう。一般公開するWEBサイトでのCDN利用は、前述の通りインターネット環境に依存する、Bootstrapのアップデートでサポートが打ち切られたときに対応しなければならない、といった問題を抱えているため注意しましょう。
公式サイトからファイル一式をダウンロードする
CDNよりはダウンロードの手間があるためやや面倒ですが、一度ダウンロードしてしまえばずっと利用可能です。
公式サイトからダウンロードして、Bootstrapを利用してみましょう。
パッケージ管理ツールを使う
npmやYarnなどのパッケージ管理を使って、作業用のディレクトリにBootstrapをインストールする方法もあります。徐々に慣れてきた後には、この方法でBootstrapを利用するのが後々の管理やカスタムを考えても楽になるでしょう。
いかがでしたか？
お手軽にWEBサイトを作成したい場合に便利なBootstrap4を有効活用して、効率よくお洒落なサイトを作りましょう。
| 【基本】bootstrap4のまとめ一覧 |