はじめに

BootstrapはTwitter社が提供するフロントエンドUIフレームワークで、モバイルファーストのレスポンシブサイトを素早く設計・構築できることを強みとしています。
非常に多機能で一貫したシステムとなっている反面、デザインや実装にもさまざまな制約が生まれるため、Webサイト制作の実案件ではなかなか取り入れにくい存在です。

そこで今回は、そんなBootstrapが備えているさまざまな機能のうち 「必要なものだけ」を効率的に利用する手法と、Webサイト制作に利用できるボイラープレート を紹介します。

※本記事ではBootstrap v5.0.2を取り扱います。

基本的なBootstrapの利用法とそのデメリット

公式サイトにも掲載されている通り、基本的な利用方法としては下記のようにHTMLソース内にCDNの記述を追加するか、コンパイル済みのファイルをダウンロードして自分のサーバにアップするかのどちらかになります。

CSS

<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を想定しています。

src/index.html

<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を生成できます。

例えば、

Reboot（要素ごとの標準スタイル）
グリッドシステム
ヘルパーやユーティリティ（汎用class）

のみを使用したい場合は下記のようになります。

src/assets/css/bootstrap.custom.scss

// 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変数を上書きします。

src/assets/css/_partials/_variables.scss

$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 で定義されています。

おわりに