Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@shouchida

Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

はじめに

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

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

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

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

例えば、

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

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

おわりに

Bootstrapは一貫したレイアウトやUIコンポーネントを提供するフレームワークのため、複雑で個性的なデザインや機能が求められるWebサイト制作の現場ではあまり利用されているイメージはありません。
一方で、Bootstrapのよく練られたグリッドシステムや幅広く用意されたユーティリティclassは魅力的であり、それらと同等のものをイチから作るのはかなりの手間がかかります。
Sassの仕組みを上手く利用することで、Bootstrapの必要な機能だけをWebサイト制作に活用することが可能になります。

参考リンク

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
un-t
インターネットビジネスを中心とした企画、設計、デザイン、システム、運用、マーケティング、リサーチ等の総合的なクリエイティブファームです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?