今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。
WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。
Bootstrapとは？
Bootstrapとは、Twitter社が開発したWEBサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。すなわちWEB制作のための雛形です。
Bootstrapを導入することでWEBサイトの制作過程が非常に楽になります。その実態はCSSファイルとJavaScriptファイルになっており、それぞれクラスが予め振られているので、HTML上でクラス指定をするだけで雛形の形にする事が出来る様になっています。
このような雛形セットを一般名称では「フレームワーク」と呼びます。そのためBootstrapでは俗に「CSSフレームワーク」と言われる事が多いです。
Bootstrapの使い方
Bootstrapを使用するには、まずファイルを読み込む必要があります。
ファイルの読み込み方法は以下の2パターンがあります。それぞれ解説します。
- ファイルをDLしてアップロード
- オンラインから読み込む
ファイルをDLしてアップロードするには、まず以下のBootstrap公式ページにアクセスしてから「ダウンロード」のボタンをクリックしてダウンロードページに移動します。
そのページにある「ダウンロード」をクリックすればファイル一式がダウンロードされます。
ファイルを開くとCSSフォルダとjsフォルダに分かれています。その中に各データが入ったファイルが入っています。その中から必要なファイルを自社サーバーに移動させます。主に使用するものは以下のファイルです。
後は、今まで通りheadタグ内にパスを指定して記述して読み込むだけです。jsの場合はbodyの終了タグ直前で読み込んだ方が良いです。
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>オンラインから読み込む場合はBootstrapのダウンロードページの少しスクロールした位置に以下の「BootstrapCDN」のセクションがあります。ここのコードをHTMLのheadタグ内に記述すればOKです。（jsはbodyタグの終了タグ直前に）
▼上記のコードです。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>Bootstrapの考え方
Bootstrapを導入するとHTML上で決められたクラスを指定するだけで思い通りのレイアウトが完成します。
例えば、以下のHTMLを記述するだけで、スマホ時に縦並びに可変する3カラムのレイアウトが完成します。（違いを分かりやすくするために色はCSSで追加で指定してます。）
<div class="container">
<div class="row">
<div class="col-sm m-5">
3カラムレイアウト（1）
</div>
<div class="col-sm m-5">
3カラムレイアウト（2）
</div>
<div class="col-sm m-5">
3カラムレイアウト（3）
</div>
</div>
Bootstrapでは数百を超えるクラス名にスタイルが予め記述されています。そのクラスを入れてるから、この様に楽にレイアウトを作成できるのです。
また「col-sm」「col-xs」などは端末のサイズを指定するクラス名です。このクラスをうまく使うことによってスマホ時対応が簡単に出来るのです。この仕組みをBootstrapではGrid system(グリッドシステム)と言っています。
またレイアウトに関するクラス以外にもButtons(ボタン)やCards(カード)などを作成するためのクラスも用意されています。各々の詳細は日本語ドキュメントを熟読すれば理解できると思います。
WEBでよく見かけるこんな感じのレイアウトもHTMLのみで作成出来ます。
HTML（CSSは無しでOK）
<div class="container">
<div class="row">
<div class="col-sm m-5">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder:Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="40%" y="50%">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">カードデザイン</h5>
<p class="card-text">この様に簡単にカードのデザインが完成します。これもCSSは一切追加記述せずHTMLをコピペしただけです。</p>
<a href="#" class="btn btn-primary">詳しく見る</a>
</div>
</div>
</div>
<div class="col-sm m-5">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder:Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="40%" y="50%">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">カード</h5>
<p class="card-text">この様に簡単にカードのデザインが完成します。これもCSSは一切追加記述せずHTMLをコピペしただけです。</p>
<a href="#" class="btn btn-primary">詳しく見る</a>
</div>
</div>
</div>
<div class="col-sm m-5">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder:Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="40%" y="50%">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">カードデザイン</h5>
<p class="card-text">この様に簡単にカードのデザインが完成します。これもCSSは一切追加記述せずHTMLをコピペしただけです。</p>
<a href="#" class="btn btn-primary">詳しく見る</a>
</div>
</div>
</div>
</div>
</div>以上が「Bootstrapとは？初心者は必ず覚えるべき基本的な使い方の解説」でした。
非常に便利で、初心者でも使用しやすいライブラリなので覚えておく事をお勧めします。ただ中には既視感のあるWebサイトになりがちなBootstrapを嫌うクライアントもいるので、これだけに頼りすぎないように注意しましょう。
