【簡単にページをデザインできる】Bootstrapって何だろう？

はじめに

ホームページを作る際に、レイアウトに困ったりすることはありませんか。
そんな時に使えるのが今回説明するBootstrapです。

今回は、

Bootstrapとはなんなのか？
どのような仕組みなのか
使うにはどうすればよいのか？

この3点を中心に解説していきたいと思います。
また、Bootstrapで使われている技術であるフレームワークや、CDNなどの基本的な仕組みについても説明していきたいと思います。

想定読者

この記事は以下のスキルを持っている人を想定しています。
もし良く分からないようでしたら、この記事はお役に立てないかもしれません。
別の記事で基本的な学習を進めていただきたいと思います。

HTMLやCSSがある程度理解できている人
英語に耐性のある人

HTMLやCSSを使用するので全く分からないと厳しいかもしれません。
ただしレベルとしては、例えば<h1>タグって何？などならない程度で充分です。

英語は読めなくても結構です。
英語を見て「こんなものは見ていられない！」と拒否反応が起きなければ問題ありません。

この記事では実装をあまりやらないので、HTMLやCSSのついての完璧な知識は一切必要ありません。
良く分からない場合はこの記事を読んだ後に勉強してから、Bootstrapを使えるようになれば充分だと思います。

Bootstrapって何？

Bootstrap(ブートストラップ)とはそもそも何でしょうか？Wikipediaを引用します。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。
引用: Wikipedia Bootstrap

Bootstrapとは、Twitter社が公開しているCSSフレームワークです。
ここで新しい単語としてフレームワークが出てきました。
まずはフレームワークについて解説します。

フレームワークとは

フレームワーク(framework)とは「枠組み、骨組み」というのが本来の意味ですが、今回の意味合いは少し違います。
IT分野における意味は「開発をを円滑に進めることのできる便利ツールがたくさん詰まっているひな形」というものを示しています。

基本的に何かアプリケーションを作ったり、問題を解決しようと考えた時にプログラムを一から書くことはしません。
その言語に標準で常備されている便利ツールであるライブラリーや今回のフレームワークを使用しながら開発を進めていきます。

以下でフレームワークの特徴について説明します。

フレームワークの特徴

フレームワークには以下の3点の特徴があります。

書き方に決まりがある

フレームワークでは、ある程度コードの書き方や開発の進め方に決まりが存在するものが多々あります。
もちろん、フレームワークの種類によって決まりの多さは異なりますが、使用する言語とは別に使い方を学習する必要があります。

拡張性

フレームワークを使用するにあたって新しい機能を追加したり、ここの機能はカスタマイズしたいと思うことがあるかもしれません。
このことを拡張性といいますが、フレームワークの種類によって拡張性は異なります。

フレームワークで使用するコードを変更できない

2の拡張性にも通じる話です。
フレームワークでは、もともと用意されている機能を使用するため、全て最初から作るよりも開発の自由度は低いです。

フレームワークの種類

フレームワークの種類には様々な種類があると説明しました。
ここでは一部だけ紹介しておきたいと思います。

フレームワーク	使用される分野	使用言語
Keras など	機械学習	Python
Ruby on Rails	Webアプリケーション開発	Ruby
Bootstrap	フロントデザイン	CSS

フレームワークごとに特徴や使っている人の多さにはかなり偏りがあります。
一般に使っている人が多い方が情報がリッチで、開発もどんどん進んでいくので、まずはメジャーなものから学習していくことをオススメします。

Bootstrapを使うための準備

それでは話を戻して、Bootstrapの使用方法について説明していきます。

Bootstrapを使う方法は2つあります。
ローカルにデータをダウンロードして使う方法とCDNを使う方法です。

今回は、CDNを使う方法を解説していきます。

CDNを適用する

さらっと聞きなじみのないCDNという単語を出しましたが、何でしょうか。

CDNとはコンテンツデリバリネットワーク(Content Delivery Network)の略です。
これは、世界中に張り巡らされたCDN専用の配信ネットワーク(CDNプラットフォーム)を利用して、Webサイトにアクセスしようとするユーザに最も近い拠点から効率的かつ高速にWebを配信する仕組みです。

引用元: CDNetworks CDN(コンテンツ・デリバリ・ネットワーク)とは／What is CDN
https://www.cdnetworks.co.jp/about/

これを利用することでBootstrapをダウンロードすることなしに使用できます。
これはHTMLで使う機会が多いものです。
例えばgoogle fontというサービスではこのCDNを使ってフォントを取得し、HTMLに適用します。
良く使うので覚えておいてください。

それでは使っていきましょう。
具体的には以下のようにします。
まずBootstrapCDNにある以下のコードをHTMLに組み込んでください。

# これは<title>のすぐ上に入れてください
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


# これらはbodyの一番下に書いてください
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

上から2つまではCSSの適用のためのコード、そして3番目はjQueryを使用するためのコード、4番目はJavaScriptを使用するためのコードです。
3番目と4番目は今回は使用しないので記述しなくても問題ありません。

しかし、今後のために使っていくブログを作っていく際に使用するときもあるかもしれないので一応入れておくことをお勧めします。

これでBootstrapを使う準備が整いました。
次からはいよいよ使っていきます。

Bootstrapを使ってみよう

今回はBootstrapのcomponent(コンポーネント)を使用してみたいと思います。

componentとはホームページを作る際に使える部品です。
これらを組み合わせて一つのページを作っていきます。
この記事ではButtonsだけを簡単に紹介します。

Buttonsを作ろう

これは文字通りボタンです。Bootstarpでは様々なボタンが提供されています。

ここに色々なボタンのサンプルがあります。
Bootstrap bottons: https://getbootstrap.com/docs/4.3/components/buttons/
Bootstrap bottons: https://getbootstrap.com/docs/4.3/components/buttons/

使い方は非常に簡単です。

<button>タグでclassを指定するだけです。
本来、このclassはCSSで自分たちが定義をしていかなければならないものですが、bootstrap側が既に定義を用意してくれているというわけです。

例えば、赤いボタンを作ってみたいと思います。
以下のコードを<body>タグの間に記述してみてください。

<button type="button" class="btn btn-danger">赤いボタン</button>

これはbtnというclassに、btn-dangerという赤いボタンのデザインが定義されているclassを追加で適宜しています。
このように表示されるはずです。

しかしこれだと端についていてなんだか見づらいですよね。
そういう時に、横の空間を加減良く開けてくれるものもあります。

containerです。
<div>タグを使って以下のように書きます。

<div class="container"> <button type="button" class="btn btn-danger">赤いボタン</button> </div>

右側に丁度良い隙間ができたはずです。

このcontainerは非常によく使うので是非覚えておいてください。
1つのタグには対してさらに複数のclassが定義できるので、色々と区合わせて使うこともできます。

例えばボタンのサイズを大きくすることもできます。

<div class="container"> <button type="button" class="btn btn-danger btn-lg">赤いボタン</button> </div>

btn-lgというクラスを追加しました。
これによりボタンが大きくなったはずです。

このようにどんどんクラスを定義して組み合わせていくことで自分の好みのデザインに適用していくのがBootstrapの使い方です。

組み合わせは自分次第で非常にカスタマイズ性が高く、可能性が広がっていて面白いと思いませんか。
もちろん、ボタンを大きくするクラスと小さくするクラスは一緒には使えないというように、組み合わせによっては機能しないものもあります。
そちらに関しては公式のドキュメントを参照してみてください。

Bootstrap公式ドキュメント: https://getbootstrap.com/docs/4.3/getting-started/introduction/
Bootstrap公式ドキュメント: https://getbootstrap.com/docs/4.3/getting-started/introduction/

Bootstrapを使っているサイトの紹介

最後にこのBootstrapを使ってどのようなサイトができるのか例を挙げておきたいと思います。

「Voice」: http://www.voice-hair.com/
美容室のサイトです。
写真が全面的に出たおしゃれなデザインが印象的です。

「地元びいき」: http://jimoto-b.com/
地域の情報が書かれているサイトです。
写真が自動で切り替わるデザインになっています。

「slack」: https://slack.com/intl/ja-jp/
slackは使ってる方も多いかもしれません。
シンプルで飾り気のない構成になっています。

ここに挙げたのはほんの一例です。
組み合わせ次第で色々なサイトが作れることが分かって頂けたでしょうか。

まとめ

今回はBootstrapというCSSフレームワークをきっかけに、フレームワークやCDN等のさまざまな事について説明しました。
これを使いこなせるようになれば、自分の思い通りのデザインを作ることができます。

是非これを機に学習してみてください。