Bootstrapはどうやって使うのか？

TOP
コラム
Bootstrapはどうやって使うの

【初めに】Bootstrapとは？

Bootstrapは、Twitter社が開発した、レスポンシブWebデザインが可能なWebフレームワークの1つになります。Bootstrapを用いることでWebページの開発効率がぐんと上がることに加え、デザイン性も高く、アプリの規模に左右されません。また、CSSやJavaScriptファイルが作成されているため、HTMLやCSSといったWebページ作成の基礎知識があまりない初心者の方でも用いやすく、非常に汎用性の高いものになっています。(とはいえ、HTMLに埋め込んで使用するものではあるので、HTMLとCSSの知識を持っておいた方がさらに有用に用いることが可能です）この記事では、Bootstrapの使い方を中心に記載し、今後の開発に役立てていただければと思います。 ※レスポンシブWebデザイン・・PC、スマートフォン・タブレットに関わらず、１つのWebページで対応可能なものを指します。これによりWebページをスマートフォン用、PC用と分ける必要がなくなるので効率の良いWebページの作成が可能となります。 ※Webフレームワーク・・Webページ作成時に用いることが出来る雛形を指します。JavaであればSpring Framework、Hibernateなど、JavaScriptであればJquery、Reactなどになります。フレームワークを用いることにより、デザイン性・開発効率の向上が大きく見込めます。最近の開発環境では必須のものになっています。

Bootstrapの使い方

まずは、Bootstrapを使う準備を行います。Bootstrapを使用するためには、Bootstrapと、JavaScriptのフレームワークであるJqueryの両方が必要となります。まずはそのファイルをダウンロードして準備を進めます。 ①BootstrapのHPへ ②「Download」をクリック ③「Compiled CSS and JS」項目の「Download」をクリック ④ダウンロードしたら、圧縮ファイルを解凍し、解凍したフォルダに「index.html」を配置 ※「js」「css」のディレクトリが存在する場所です。以上でBootstrapを使う準備が整います。 ※ネットワーク経由で使用する方法「Bootstrap CDN」サイトにて、最新版のJqueryとBootstrapのURLが記載されています。このURLを、「index.html」内のscriptタグにそれぞれ埋め込むことにより、Bootstrapが使用可能になります。

Bootstrapで出来ることとは？

Bootstrapで出来ることは多岐に及びます。その中でも良く用いられるものを紹介します。

①ボタンの作成

ボタンの種類、色、大きさなどを指定してタグに埋め込むと生成されます。基本的なコードは以下になります。

button type = “button” class =“Bootstrapのクラス名” /button
input type = “button” class = “Bootstrapのクラス名” value =”ボタン名”

Bootstrapのクラス名の部分にボタンの大きさ、枠、背景色、色、サイズ変更などのデザイン部分を記載することでWebページに反映されます。また、マウスを乗せたときなどの表示変更や挙動を付与するなど、動的な要素を付け足すことも可能です。

②グリットシステム

上記にて、レスポンシブWebデザインが可能と言いましたが、それを可能にしているのがグリッドシステムです。グリッドシステムとは、Webサイトの横幅を均等に分けるガイドラインを指します。Bootstrapでは、グリッドは12等分されています。グリッドシステムを用いることで、PCやスマホにように画面が異なってもレイアウトを変更しやすくなります。グリッドシステムを支えるクラスは多くありますが、その中でも良く用いられているのが、「.container」、「.col」、「.row」クラスです。使い方は各クラスによって異なるので、自分に合う、使用用途にあったクラスを用いることをおすすめします。

③テーブルの作成

table class = “table” タグを追加し、テーブル作成のタグとデータをHTMLに埋め込むと、テーブルを作成できます。改行を行ったり、背景を変えたり様々なカスタマイズも可能です。また、上記記載の通り、レスポンシブ対応に変更することも可能になります。この他にも応用として、フォームの作成やアイコンの使用、ドロップアウトメニュー、モーダルの作成なども簡単に行うことができます。多種の機能を用いて、質の高いWebサイトを効率的に作成するにはBootstrapは非常に有用なツールになります。 ※モーダル・・ウインドウ（親ウインドウ）の中で、何らかの操作を行った後生成される別のウインドウ（子ウインドウ）のうち、応答がない限り親ウインドウに制御をも出さない要素のことを指します。例：アンケートに答え、送信ボタンを押したときに、「本当に送信しますか？」と問いかける新しいウインドウがモーダルです。モーダル上で操作を行わない限り、制御が元に戻りません。

まとめ

Bootstrapについて記載してきました。今回は簡単な機能の使い方に留めましたが、他にも多種の機能が備わっています。使い方次第でWebページそのものの質がぐんと上がると思います。Bootstrapを用いたWebページ制作を行い、その過程と結果を自分の技術に変えることができれば、開発の幅も広がることは間違いないと思いますので、是非試してみてはいかがでしょうか？ご拝読ありがとうございました。