こんにちは。すずきです。
今回はBootstrapの使い方について解説します。
- Bootstrapの使い方がわからない
- Bootstrap情報が多くてどれを見れば良いのかわからない
- Bootstrapのカスタマイズ方法がわからない
Bootstrapは、フレームワークの1つで、初心者から上級者まで幅広い人気があります。
この記事では、Bootstrapの基本的な使い方やカスタマイズ方法などを解説します。
Bootstrapとは
Bootstrapは、Twitter社が開発したオープンソースのフレームワークです。
HTMLCSSJavaScriptで作られており、WebページのデザインやUIコンポーネント等を簡単に実装することができます。
Bootstrapの最大の特徴は、グリッドシステムです。
こちらを使用することで、レスポンシブデザインを簡単に実装することができます。
また、Bootstrapは多くのテンプレートやカスタマイズ用の変数を用意しており、自由にカスタマイズすることもできます。
Bootstrapを使用するメリット
Bootstrapを使用する主なメリットは以下の通りです。
- 簡単なカスタマイズ
-
Bootstrapは、
CSSやJavaScriptを中心に構成さており、多くのUIコンポーネントが事前に用意されています。これにより、簡単にUIコンポーネントを実装することができます。
また、Bootstrapはカスタマイズのための変数を用意しており、サイトのデザインを自由に変更することができます。 - クロスブラウザ対応
-
Bootstrapは、Webブラウザの種類によって表示が崩れたりしないように設計されています。
また、レスポンシブデザインにも対応しています。 - コミュニティの活発さ
-
Bootstrapはオープンソースのフレームワークであり、多くのWeb開発者によって利用されています。
そのため、Stack OverflowやGitHubなどで多くの質問や回答があり、さまざまな問題に対して迅速に解決することができます。 - CSS設計が把握しやすい
-
チーム開発の場合、CSS設計の把握に時間がかかる場合がありますが、Bootstrapを使用している場合、CSS設計をすぐに把握することができます。
特にECサイトはBootstrapが使用されていることが多い印象なので、この恩恵を受けやすいです。
ただ、Bootstrapも万能ではありません。
次はデメリットについて紹介していきます。
Bootstrapのデメリット
Bootstrapのデメリットは以下のようなものがあります。
- デザインの統一感が出るため、サイトが似たようなデザインになってしまう
-
同じBootstrapを使用したWebサイトは、デザインの面でどうしても似たようなものになってしまいます。デザインに多様性が欲しい場合は向かない場合があります。
- 不要なスタイルが読み込まれることがある。
-
Bootstrapは多くのUIコンポーネントを含んでいます。必ずしも全てを使用されるわけではないため、不要なスタイルまで読み込まれることがあります。ファイルサイズを増加させる原因になってしまいます。
どうしてもBootstrapらしさが出てしまうのが最大のデメリットになるかと思います。
制作するサイトの思考によっては、Bootstrapが向かない場合もあります。
ただ、デメリットを解消する方法もありますので、こちらも紹介していきます。
Bootstrapのデメリットを解消する方法
Bootstrapのデメリットを解消する方法は下記のようなものがあります。
- デザインの統一感について
-
Bootstrapの変数をカスタマイズし、色や文字サイズ、余白等をオリジナルなものに変更が可能。
- 不要なスタイルが読み込まれる問題について
-
ダウンロードしたBootstrapでは、必要なコンポーネントだけを含めたファイルを作成することが可能。
Sassの編集が必要になりますが、変数や読み込みファイルを変更することで、デメリットをある程度解消することができます。
Bootstrapの導入方法
ここからは実際に Bootstrapを使用する方法について紹介していきます。
Bootstrapの導入方法は、CSSとJavaScriptファイルをHTMLに読み込むだけです。
ファイルの読み込み方は以下の2つがあります。
- CDNから直接読み込む
- Bootstrapのファイルをダウンロードして自分のサーバーにアップロードする
公式ページには、具体的なダウンロード方法や読み込みの方法が掲載されています。
先述したデメリットを解消する方法などを含め、カスタマイズしていく可能性があるので、個人的にはCDNで読み込む方法よりダウンロードして読み込む方法がオススメです。
ファイルを読み込んだら Bootstrapが使用できます！
あとはHTMLに必要なクラス名を追加していくだけです。
まずはBootstrapで1番便利な、グリッドシステムについて紹介します、
グリッドシステム
Bootstrapのグリッドシステムは、レイアウトを簡単に設計できるシステムです。
Bootstrapのグリッドシステムでは、12個のカラムを基本単位として、Webページのレイアウトを構成します。
このカラム幅はブラウザの幅に合わせて自動的に変化するため、レスポンシブデザインにも対応しています。
Bootstrapのグリッドシステムでは、以下のようなクラスを使用してレイアウトを設定します。
| .container | グリッドシステムを使用するコンテンツを包む要素です。通常、この要素はページ全体を覆うものとして使用します。 |
| .row | グリッドシステムの行を定義する要素です。この要素内にカラムを配置します。 |
| .col-{サイズ}-{カラム数} | カラムを定義する要素で、{サイズ}には、xs、sm、md、lgなどが指定できます。{カラム数}には、1～12までの数字を指定します。 |
たとえば、以下のようにコードを記述することで、4つのカラムを2つずつ並べたレイアウトを作成できます。
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">カラム1</div>
<div class="col-md-6 col-sm-12">カラム2</div>
<div class="col-md-6 col-sm-12">カラム3</div>
<div class="col-md-6 col-sm-12">カラム4</div>
</div>
</div>See the Pen Untitled by すずき (@k-suzuki3533) on CodePen.
上記の例でcol-md-6は、画面幅が中サイズ以上の場合に、各カラムを半分の幅に設定できます。
またcol-sm-12は、画面幅が小サイズ以下の場合に、各カラムを100%の幅に設定するクラスです。
Bootstrapのグリッドシステムは、柔軟なレイアウトの実現ができるため非常に便利な機能です。
Bootstrapに実装されているコンポーネントについて
Bootstrapには、Webページでよく使われるコンポーネントが豊富に用意されています。
これらのコンポーネントは、簡単に使うことができるため、効率よくコーディングを進めていくことができます。
Bootstrapのコンポーネントには、以下のようなものがあります。
- ナビゲーションバー
- ボタン
- フォーム
- タイポグラフィ
- アラート
- モーダル
- カルーセル
- アコーディオン
- ページネーション
- プログレスバー
- アイコン
これらのコンポーネントは、CSSやJavaScriptを組み合わせることで実装されており、Bootstrapの公式ドキュメントに詳しい使用方法が記載されています。
これらの中でもよく利用するものについて、サンプルを紹介していきます。
ボタン
class属性にbtnクラスを指定することで、Bootstrapのボタンスタイルが適用されます。
<button type="button" class="btn">Default Button</button>ボタンのスタイルを変更する場合は、class属性に適切なクラスを追加します。
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
フォーム
フォームは要素を<div>で囲み<label>と<input>タグにそれぞれクラスを追加することで Bootstrapのレイアウトが適応されます。
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
テーブル
<table>タグにクラス.tableを追加するだけで簡単に実装できます。
また、.table-bordered、.table-stripedを追加することで枠線を追加したり、行毎に色を加えたりすることもできます。
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Bootstrapをカスタマイズする方法
Bootstrapは、Sassを使用してCSSを作成していますので、Sassを編集することで簡単にカスタマイズできます。
色や余白をカスタマイズする方法
１、BootstrapのSassファイルをダウンロードします。
２、_variables.scssに変数が登録されているので、こちらを上書きします。
例えば、$primaryの色を変更する場合、$primary変数には$blueが指定されており、$blueには#0d6efdが登録されています。
//301行目あたり
$primary: $blue !default;
//39行目あたり
$blue: #0d6efd !default;39行目あたりの色を変更することで、 Bootstrapの色を全て変更することができます。
例えば、$blueの色を#ffa726に変更すると
このように、ボタンの色が変更されました！
同じ容量で文字サイズや余白の量、角の丸みなども変更することができます。
Sassのコンパイル方法については、以下の記事でも解説しています。
必要なファイルのみを読み込む方法
bootstrap.scssを編集します。
以下のように記載されていると思います。
@import "mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
この中から、不要なものをコメントアウトする事で、CSSファイルにインポートされずファイルを軽量化することができます。
このようにSassを編集することで、Bootstrapのスタイルシートを簡単にカスタマイズすることができます。
まとめ
Bootstrapは非常に便利なフレームワークで、レスポンシブデザインにも対応しています。
Bootstrapを使用することでコーディングの効率化が図れます。
導入方法は以下の2つがあります。
- CDNから直接読み込む
- Bootstrapのファイルをダウンロードして自分のサーバーにアップロードする
今後カスタマイズしていく可能性があるなら、ダウンロードして読み込む方法がオススメです。
Bootstrapのグリッドシステムを使うことで、簡単にレスポンシブ対応のレイアウトを実装できます。
また、コンポーネントを利用することで、様々なUIコンポーネントを簡単に実装することができます。
Bootstrapを使用するとどうしても「Bootstrapらしさ」が出てしまいます。
しかし、変数を使用することでよりオリジナルなデザインを作成することができます。
より詳しい内容は、公式ページも確認してみてください。
