はじめに
BootstrapはTwitter社が提供するフロントエンドUIフレームワークで、モバイルファーストのレスポンシブサイトを素早く設計・構築できることを強みとしています。
非常に多機能で一貫したシステムとなっている反面、デザインや実装にもさまざまな制約が生まれるため、Webサイト制作の実案件ではなかなか取り入れにくい存在です。
そこで今回は、そんなBootstrapが備えているさまざまな機能のうち「必要なものだけ」を効率的に利用する手法と、Webサイト制作に利用できるボイラープレートを紹介します。
※本記事ではBootstrap v5.0.0-alpha1を取り扱います。
基本的なBootstrapの利用法とそのデメリット
公式サイトにも掲載されている通り、基本的な利用方法としては下記のようにHTMLソース内にCDNの記述を追加するか、コンパイル済みのファイルをダウンロードして自分のサーバにアップするかのどちらかになります。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- or -->
<link rel="stylesheet" href="/path/to/css/bootstrap.min.css">
この場合、Bootstrapが持つすべての機能を読み込むことになるため、そのWebサイト上では必要のないUIコンポーネントなども含むこととなり、ファイル容量も大きくなってしまいます。
ソースファイルをコンパイルして独自CSSを生成する
Bootstrapのソースファイル（Sass）を自前でコンパイルすることで、必要な機能だけを抽出した独自のCSSを生成し、サイト上で利用することができます。
詳細は公式サイトにも掲載されていますが、今回は簡単にカスタマイズを試せるようNode.js/gulpを利用したボイラープレートを作成したので、そちらをもとに解説をおこないます。
インストールや開発コマンドの実行方法についてはREADME.mdを参照してください。
ディレクトリ構成（抜粋）は下記のようになっています。
開発時には原則 src/ ディレクトリ内のファイルを編集します。
dist/ はコンパイル後の出力先、static/ は画像やJSライブラリなど静的ファイルの格納先となりますが、本記事では説明を省略します。
.
├── dist/
├── src/
│ ├── assets/
│ │ ├── css/
│ │ │ ├── _partials/
│ │ │ │ ├── _base.scss
│ │ │ │ └── _variables.scss
│ │ │ ├── bootstrap.custom.scss
│ │ │ ├── main.scss
│ │ │ └── sub.scss
│ │ └── js/
│ │ └── main.js
│ └── index.html
└── static/
HTMLファイル内では下記のように2つのCSSを読み込んでいます。
/assets/css/main.css はそのサイトの共通CSSを想定しています。
<link rel="stylesheet" href="/assets/css/bootstrap.custom.css">
<link rel="stylesheet" href="/assets/css/main.css">
bootstrap.custom.scss
src/ ディレクトリ内の bootstrap.custom.scss にて、Bootstrap側で用意されている機能ごとのSassファイルをimportしています。
不要な機能やコンポーネントをコメントアウトしてコンパイルすることで、そのサイトに最適化されたCSSを生成できます。
例えば、
のみを使用したい場合は下記のようになります。
// Override default variables
@import "_partials/variables";
// Configuration
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
// Layout & components
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
// @import "../../../node_modules/bootstrap/scss/type";
// @import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/grid";
// @import "../../../node_modules/bootstrap/scss/tables";
// @import "../../../node_modules/bootstrap/scss/forms";
// @import "../../../node_modules/bootstrap/scss/buttons";
// @import "../../../node_modules/bootstrap/scss/transitions";
// @import "../../../node_modules/bootstrap/scss/dropdown";
// @import "../../../node_modules/bootstrap/scss/button-group";
// @import "../../../node_modules/bootstrap/scss/nav";
// @import "../../../node_modules/bootstrap/scss/navbar";
// @import "../../../node_modules/bootstrap/scss/card";
// @import "../../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../../node_modules/bootstrap/scss/pagination";
// @import "../../../node_modules/bootstrap/scss/badge";
// @import "../../../node_modules/bootstrap/scss/alert";
// @import "../../../node_modules/bootstrap/scss/progress";
// @import "../../../node_modules/bootstrap/scss/list-group";
// @import "../../../node_modules/bootstrap/scss/close";
// @import "../../../node_modules/bootstrap/scss/toasts";
// @import "../../../node_modules/bootstrap/scss/modal";
// @import "../../../node_modules/bootstrap/scss/tooltip";
// @import "../../../node_modules/bootstrap/scss/popover";
// @import "../../../node_modules/bootstrap/scss/carousel";
// @import "../../../node_modules/bootstrap/scss/spinners";
// Helpers
@import "../../../node_modules/bootstrap/scss/helpers";
// Utilities
@import "../../../node_modules/bootstrap/scss/utilities/api";
もし、新たに利用したい機能が出てきた場合は、該当するimport文のコメントアウトを外して再度コンパイルします。
_variables.scss
Bootstrap側で定義された各コンポーネントのスタイルを調整したい場合は、src/ ディレクトリ内の _variables.scss にてSass変数を上書きします。
$red: #cc1414;
$orange: #ec5f1f;
$font-family-sans-serif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
$font-size-root: 62.5%;
なお、Bootstrap側のデフォルト変数は node_modules/bootstrap/scss/_variables.scss で定義されています。
おわりに
Bootstrapは一貫したレイアウトやUIコンポーネントを提供するフレームワークのため、複雑で個性的なデザインや機能が求められるWebサイト制作の現場ではあまり利用されているイメージはありません。
一方で、Bootstrapのよく練られたグリッドシステムや幅広く用意されたユーティリティclassは魅力的であり、それらと同等のものをイチから作るのはかなりの手間がかかります。
Sassの仕組みを上手く利用することで、Bootstrapの必要な機能だけをWebサイト制作に活用することが可能になります。