webページの作成において、ユーザーインターフェイスを構成するのはHTMLです。
その際、見栄えはCSSで調整し、ページに動きをつけたいといった場合にはJavaScriptを用います。
要は「HTML」「CSS」「JavaScript」のうち、中枢を担うのはHTMLであり、CSSやJavaScriptはwebページの操作性を向上させるための飾りです。
デザイナーにとって、CSSやJavaScriptの作りこみは腕の見せどころではありますが、反面とても面倒な作業でもあります。
そこで、「Boostrap」というCSSのフレームワークを使うことにより、面倒な作業を必要とせず、効率的にCSSを仕上げることが可能となります。
Boostrapとは
Bootstrapとは、レスポンシブデザインを採用した HTML/CSS/JavaScriptのフレームワークです。
レスポンシブデザインというのはPCやタブレット、スマホなどの用いる端末の画面の広さに応じて、同じデザインで異なる大きさの画面に対応するためのデザイン技術のことです。例えば、広い画面では横並びにしていた表示を、スマホなどの狭い画面では縦並びにしたり、サイドバーを表示しないなどと自動的に調整することができます。
Bootstrapの導入
Bootstrapを導入する方法は2種類あります。
公式ページからファイルをダウンロードする方法とHTMLにBootstrapのリンクを記述する方法です（CDNを使った方法）。
公式ページからのダウンロード
公式ページからダウンロードするには、まず以下のリンクからダウンロードをクリックし、その後のページで「コンパイルされたCSSとJS」という項目でダウンロードを開始すると、Bootstrapの各種ファイルをローカルに取り込むことができます。
ダウンロード方法としてはこれだけです。
その後、index.htmlというファイルを用意し、そのファイルの中でダウンロードしたjsフォルダとcssフォルダをindex.htmlと同じ階層に配置し、以下のように記述すればBootstrapを使うことができるようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Sample</title>
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CDNを使った方法
こちらは公式ページからダウンロードする必要がなく、ネットワーク経由でBootstrapを使うことができます。
基本的には用いるファイル(bootstrap.min.css)などは同じですが、ローカルにファイルが無いので、サイトから使うファイルを引っ張ってくる形になります。
このあたりは公式ページにも書いてあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Sample</title>
<!-- BootstrapのCSS読み込み
<link href="css/bootstrap.min.css" rel="stylesheet" /> -->
<!-- BootstrapのCDNでのCSS読み込み -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Bootstrapのjs読み込み
<script src="js/bootstrap.min.js"></script> -->
<!-- BootstrapのCDNでのjs読み込み -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
注意点
紹介した方法はBootstrap5での導入方法です。
Bootstrap5の以前のBootstrap4までのバージョンではjQueryに依存する形でbootstrap.jsファイルが動いていたので、そこの記述をする必要があります。
Bootstrap5からはjQueryが削除されました。
「Veu.js」などのJavaScriptフレームワークが登場したによって、どんな環境でも使いやすいように依存関係を無くしたようです。
まとめ
Bootstrapの導入方法としては以上になります。
自力でCSSやjsを作成しデザイン作業を行うのはとても大変ですので、こういった既存のフレームワークを用いることで作業が楽に、効率的になると思います。