Bootstrap 4 CSS customization

ja | en

ホーム ⇐

カスタマイズの方法

⇒ Sassパーシャルのインポート

カスタマイズの手順

Bootstrap 4 CSSのソースコードはSassで書かれている。一般なカスタマイズ手順は次の通り。Bootstrapのライブラリーコードに手を加える必要はなく、拡張用のSassファイルを作りそこへ記述する。

拡張用Sassファイルを作成
1. カスタマイズ用変数を定義して値を設定
2. Bootstrap Sassコードをインポート
3. (オプション) 必要に応じて追加スタイルを記述
SassファイルをCSSへコンパイル
Autoprefixerでベンダープリフィクスを追加
(オプション) CSS圧縮ツールで最適化

必要なツール

Bootstrap Sassのカスタマイズには2種類(オプションで3種類)のツールが必要。また作業の効率化のため一般的にビルドツールも用いる。

Sass

Sassの公式実装はRuby Sass (オリジナル)、libsass (C++)とDart Sass (最近リリースされたばかり)の3種類がある。Ruby Sassとlibsassがポピュラーだが、後発のlibsassの方が高速なので最近はlibsassがよく用いられる。このチュートリアルではlibsassのnode.js用インターフェースであるnode-sassを用いている。

Autoprefixer

Bootstrap 4 CSSのSassソースコードは(一部を除き)ベンダープリフィクスを意図的に書かないコーディングスタイルで書かれており、ベンダープリフィクス処理をAutoprefixerに任せることで対応している。AutoprefixerはPostCSSのプラグインで、node.js上で動作する(互換ツールなし)。

Autoprefixerdではサポートするブラウザの条件をpackage.jsonにbrowserslistの形式で記述する(書式はBest PracticesとFull Listを参照)。本チュートリアルはBootstrap 4.2.1のソースコードを用いており、.browserslistrcから設定を引用している(下記参照)。この情報をAutoprefixerが参照し、各CSSプロパティに対してベンダープリフィクスの追加や除去を行う。

.browserslistrc

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

(オプション) CSS圧縮ツール

CSS圧縮ツールでサイズ圧縮を行うのは一般的なサイト最適化方法のひとつでツールも数多い。ここでは本チュートリアルが開発環境に用いているnode.js用の主要CSS圧縮ツールのみ示す。

clean-css - スタンドアロンツール、Bootstrapがライブラリビルドに使用している
PostCSSプラグイン
- csswring - 本チュートリアルのビルドにまぎあれこ使用(扱いが簡単)
- cssnano - 有名で高機能、ただしやや難しい(正しく使わないと副作用あり)

ビルドツール

作業の効率化には何らかのビルドツールが必要だが好みのツールでよい(GNU makeやApache Ant等も可)。本チュートリアルは開発環境にnode.jsを用いているが(理由はAutoprefixerがnode.js専用で代替ツールがないため)、node.js用ビルドツール(タスクランナー)には有名なものが多数ある(WebPack, Gulp, Grunt等)。

チュートリアルのビルド

npmは本来はnode.js用パッケージマネージャだが簡単なビルドツールとしても利用できる。本チュートリアルはビルドツールにnpmを用いており、次の手順で実際にビルドできる。

GitHubからソースをダウンロードして解凍
npm install で初期設定(インストール)
npm run build でビルド実行 (./site/* にファイルを生成)
npm run start でローカルサーバ起動 (http://localhost:8888/)

その他の開発用コマンドはpackage.json中の"scripts:"フィールドを参照。ここにコマンドを登録して、npm run[-script] (⇒ リファレンス)を用いて実行している。

Bootstrap Sassソースコード

Bootstrap Sassソースコードは.scssファイル群で構成されており、ファイルはその用途により2種類に分けられる。

プリコンパイル版コード生成用 - bootstrap.scss, bootstrap.grid.scss, bootstrap.reboot.scss の3つ
パーシャル - モジュールファイル(ファイル名がアンダースコアで始まるもの、例: _variables.scss)

これらのソースファイルを利用するには@import文を用いる。Bootstrapの全機能をインポートする場合は@import "{path}/bootstrap";とする。パーシャルの場合も同様で、@import "{path}/variables"; (例: _variables.scssをインポートする場合)のように記述する。先頭のアンダースコアは省略してよい(通常書かない)。

Bootstrapのカスタマイズ

Bootstrapには500以上のカスタマイズ可能なSass変数 (先頭文字は$)があり、これらの変数は全て_variable.scssの中でデフォルト値付き書式 !default を用いて定義されている。

_variable.scss (一部)

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
...
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
...

Bootstrapのカスタマイズは基本的にこれらの変数を変更することによって行う。まず最初に自分で値を指定して目的の変数を定義し、その後でBootstrapをインポートすればよい。例えばページの基本色設定を変更するには次のようにすればよい。

// 先に変数を定義しておく(!defaultの値より優先する)
$body-bg: ivory;        // または #fffff0;
$body-color: navy;      // または #000080;

// Bootstrapを全体丸ごとインポート
@import "bootstrap/scss/bootstrap";

より細かくパーシャル単位でソースをインポートする方法もある。詳しくはSassパーシャルのインポートを参照。

ホーム ⇐

⇒ Sassパーシャルのインポート