メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

テーマ(Theming Bootstrap)

簡単なテーマやコンポーネントの変更を可能にするために、グローバルなスタイル設定用の新しい組み込みSass変数を使用して、Bootstrap4をカスタマイズ。

はじめに(Introduction)

Bootstrap3では、主にLess、カスタムCSS、dist ファイルに組み込まれている個別のテーマスタイルシートの変数の上書きによってテーマが決定されていた。少々努力すればコアファイルに手を加えることなくBootstrap3の外観が完全に再設計可能。Bootstrap4では、使い慣れているが、若干異なるアプローチでテーマを提供。

現在、テーマはSass変数、Sassマップ、カスタムCSSによって設定され、専用のテーマスタイルシートは存在しない。代わりに、組み込まれたテーマにグラデーション、シャドウなどが追加可能になった。

【Bootstrap3.xとの変更箇所】

  • CSS開発言語:LessSass

 

Sass

ソースSassファイルを利用して、変数、マップ、mixinなどを利用。Bootstrapの構造では、ブラウザの角丸の問題を回避するためにSassの角丸の精度を6(デフォルトでは5)に増やしている。

ファイル構造(File structure)

できるだけBootstrapのコアファイルを変更しないこと。Sassの場合、独自のスタイルシートを作成してBootstrapをインポートして変更や拡張が可能。npmのようなパッケージマネージャーを使用しているなら、ファイル構造は次のようになる:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ソースファイルをダウンロードし、パッケージマネージャーを使用しない場合は、Bootstrapのソースファイルを独自のものとは別にして、その構造に似たものを手動でセットアップする必要がある。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

インポート(Importing)

custom.scss で、BootstrapのソースSassファイルをインポートするには、Bootstrap全部を組み込むか、必要な部分を選択するかの2つのオプションがある。Bootstrapプロジェクトチームとしては後者を推奨するが、Bootstrapのコンポーネント全体にはいくつかの要件と依存関係があるので注意。また、プラグイン用にいくつかのJavaScriptを組み込む必要がある。

// Custom.scss
// オプションA: Bootstrapを全部組み込む

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// オプションB: Bootstrapを部分的に組み込む

// 必須
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 任意
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

セットアップが整ったら、custom.scss のSass変数とマップの変更を開始。必要に応じて // 任意 の項目の下にBootstrapの一部の追加も可能。出発点として、bootstrap.scss ファイルの完全なインポートスタックを使用することを推奨。

変数のデフォルト値(Variable defaults)

Bootstrap4のすべてのSass変数には!default フラグが含まれており、Bootstrapのソースコードを変更せずに、独自のSassで変数のデフォルト値を上書き可能。必要に応じて変数をコピーして貼り付け、その値を変更して !default フラグを削除する。変数がすでに割り当てられている場合は、Bootstrapのデフォルト値によって再割り当てされることはない。

Bootstrapの変数の完全なリストは scss/_variables.scss にある。一部の変数は null に設定されており、これらの変数は任意に上書きされない限りプロパティを出力しない。

同じSassファイル内の変数の上書きは、デフォルト変数の前か後に設置可能だが、Sassファイル全体を上書きするときは、BootstrapのSassファイルをインポートする前に上書きする必要がある。

Bootstrapをnpm経由で読み込んでコンパイルするときに <body>background-colorcolor を変更するには、次のようにする:

custom.scss// 変数の上書き
$body-bg: #000;
$body-color: #111;

// Bootstrapとそのデフォルト変数
@import "../node_modules/bootstrap/scss/bootstrap";

以下のグローバルオプションを含め、Bootstrapの変数に対して必要に応じて繰り返す。

マップとループ(Maps and loops)

Bootstrap4には、関連するCSSのグループを簡単に生成可能にするキーと値のペアであるSassマップがいくつか組み込まれている。カラー、グリッドのブレークポイントなどにSassマップを使用。Sass変数と同様に、すべてのSassマップには !default フラグが含まれており、上書きや拡張が可能。

一部のSassマップはデフォルトで空のマップにマージされる。これは、指定されたSassマップを簡単に拡張可能に処理するが、マップから項目を削除するのが少々難しくなる。

マップを変更(Modify map)

$theme-colors マップの既存のカラーを変更するには、任意のSassファイルに次の行を追加:

custom.scss$theme-colors: (
	"primary": #0074d9,
	"danger": #ff4136
);

マップに追加(Add to map)

$theme-colors に新しいカラーを追加するには、新しいキーと値を追加:

custom.scss$theme-colors: (
	"custom-color": #900
);

マップから削除(Remove from map)

$theme-colors やその他のマップからカラーを削除するには、map-remove を使用。必須とオプションの間に挿入する必要があるので注意:

custom.scss// 必須
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// オプション
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

必須キー(Required keys)

Bootstrapでは、Sassマップ内に特定のキーが存在することを想定しており、これらを使用して拡張している。組み込み済のマップをカスタマイズすると、特定のSassマップのキーが使用されているときにエラーが発生することがある。

例えば、リンク、ボタン、フォームの状態には、$theme-colorsprimary, success, danger のキーを使用。これらのキーの値を置き換えても問題はないが、削除するとSassコンパイルの問題が発生する可能性がある。この場合、これらの値を使用するSassコードを変更する必要がある。

関数(Functions)

BootstrapはいくつかのSass関数を利用するが、一般的なテーマに適用できるのはサブセットのみ。カラーマップから値を取得するために3つの関数が組み込まれている。

custom.scss@function color($key: "blue") {
	@return map-get($colors, $key);
}

@function theme-color($key: "primary") {
	@return map-get($theme-colors, $key);
}

@function gray($key: "100") {
	@return map-get($grays, $key);
}

これにより、v3のカラー変数の使い方と同じように、Sassマップから1つの色が選択可能。

custom.scss.custom-element {
	color: gray("100");
	background-color: theme-color("dark");
}

$theme-colors マップから特定の level のカラーを得る別の関数も存在。負のlevel値はカラーを明るくし、より高いlevelでは暗くなる。

custom.scss@function theme-color-level($color-name: "primary", $level: 0) {
	$color: theme-color($color-name);
	$color-base: if($level > 0, #000, #fff);
	$level: abs($level);

	@return mix($color-base, $color, $level * $theme-color-interval);
}

実際には、関数を呼び出して、$theme-colors のカラー名(primaryやdangerなど)と数値レベルの2つのパラメータを渡す。

custom.scss.custom-element {
	color: theme-color-level(primary, -10);
}

将来、追加の関数を追加したり、独自のカスタムSassを追加して、追加のSassマップのレベル関数を作成したり、より詳細にしたい場合は汎用関数も作成可能。

カラーコントラスト(Color contrast)

Bootstrapに追加する機能の1つに、カラーコントラスト関数 color-yiq がある。YIQ color spaceを使用して、指定したベースカラーに基づいてlight(fff)かdark(111)のコントラストカラーを自動的に返す。この関数は、複数のクラスを生成するmixinやループで特に便利。

例えば、$theme-colors マップからカラースウォッチを生成するには:

custom.scss@each $color, $value in $theme-colors {
	.swatch-#{$color} {
		color: color-yiq($value);
	}
}

また、1回限りのコントラストのニーズにも使用可能:

custom.scss.custom-element {
	color: color-yiq(#000); // `color: #fff` を返す
}

カラーマップ関数でベースカラーを指定することも可能:

custom.scss.custom-element {
	color: color-yiq(theme-color("dark")); // `color: #fff` を返す
}

SVGからのエスケープ(Escape SVG)v4.4.0新設

SVG背景画像の <, >, # の各文字をエスケープするのに escape-svg 関数を使用。これらの文字は、IEで背景画像を正しくレンダリングするためにエスケープする必要がある。escape-svg 関数を使用する場合、データURIを引用符で囲む必要がある。

AddとSubtract関数(Add and Subtract functions)v4.4.0新設

Bootstrapでは、CSSの calc 関数で包括させるために、add(加算)と subtract(減算)関数を使用。これらの関数の主な使用目的は、calc の式で「ユニットレス」の 0 値が指定された場合のエラーを回避するため。calc(10px - 0) のような式は数学的には正しいのだが、すべてのブラウザでエラーが返されてしまう。

calcが有効な例:

custom.scss$border-radius: .25rem;
$border-width: 1px;

.element {
	// calc(.25rem - 1px) の出力は有効
	border-radius: calc($border-radius - $border-width);
}

.element {
	// 上記と同じ calc(.25rem - 1px) を出力
	border-radius: subtract($border-radius, $border-width);
}

calcが無効な例:

custom.scss$border-radius: .25rem;
$border-width: 0;

.element {
  // calc(.25rem - 0) の出力は無効
  border-radius: calc($border-radius - $border-width);
}

.element {
  // .25rem を出力
  border-radius: subtract($border-radius, $border-width);
}

 

Sassオプション(Sass options)v4.3.0一部追加

組み込み済のカスタム変数ファイルでBootstrap4をカスタマイズし、新しく $enable-* Sass変数でグローバルCSS設定を簡単に切り替える。変数の値を上書きし、必要に応じて npm run test で再コンパイルする。
Bootstrap Customizerにアクセスし、"Sass variables"の"Options"の各項目を"true"か"false"に変更し、ページの下の方にある"Download"の"Compile and Download"ボタンを押してbootstrap.cssファイルをダウンロードする方法もある。

これらの変数は、Bootstrapの scss/_variables.scss ファイルにある重要なグローバル・オプションを検出してカスタマイズ可能。

変数 説明
$spacer 1rem(デフォルト)/ 0以上の任意の値 空白ユーティリティをプログラムで生成するためのデフォルトの空白値を指定
$enable-rounded true(デフォルト)/ false 様々なコンポーネントで定義済みの border-radius スタイルを有効/無効にする
無効にした場合のCSSスタイル
$enable-shadows true / false(デフォルト) 様々なコンポーネントで定義済みの box-shadow スタイルを有効/無効にする
有効にした場合のCSSスタイル
$enable-gradients true / false(デフォルト) 様々なコンポーネントで background-image 経由で定義済みのグラデーションを有効/無効にする
有効にした場合のCSSスタイル
$enable-transitions true(デフォルト)/ false 様々なコンポーネントで定義済みの transition を有効/無効にする
$enable-prefers-reduced-motion-media-query
v4.2.1追加
true(デフォルト)/ false ユーザーのブラウザ/オペレーティングシステムのプリファレンスに基づいて特定のアニメーション遷移を抑制する prefers-reduced-motion を有効/無効にする
$enable-hover-media-query true / false(デフォルト) 廃止予定
$enable-grid-classes true(デフォルト)/ false グリッドシステムのためのCSSクラスの生成を有効/無効にする(.container, .row, .col-md-1 など)
$enable-caret true(デフォルト)/ false .dropdown-toggle の擬似要素キャレット()を有効/無効にする
$enable-pointer-cursor-for-buttons
v4.3.0追加
true(デフォルト)/ false 無効でないボタン要素を指カーソル()にする
※これを false に設定すると、ボタンボタンによるリストグループ閉じるボタンナビゲーションバーの切替ボタンページ送りなどのリンクのカーソルが通常のカーソル()になる
$enable-print-styles true(デフォルト)/ false 印刷を最適化するスタイルを有効/無効にする
$enable-responsive-font-sizes
v4.3.0追加
true / false(デフォルト) レスポンシブ・フォントサイズを有効/無効にする
有効にした場合の見出しのスタイル
$enable-validation-icons
v4.2.1追加
true(デフォルト)/ false テキストインプット内に background-image アイコンを有効/無効にし、検証状態に対する一部のカスタムフォームを有効/無効にする
$enable-deprecation-messages
v4.3.0追加
true / false(デフォルト) v5 で削除される予定の非推奨のmixin(text-hide(), img-retina(), invisible(), float(), size())や関数を使用する際に警告を表示するには true に設定する

 

カラーについて(Colors)

Bootstrapのさまざまなコンポーネントとユーティリティの多くは、Sassマップで定義された一連の色で構築されています。 このマップをSassでループして、一連のルールセットをすばやく生成できます。Bootstrapのさまざまなコンポーネントとユーティリティの多くは、Sassマップで定義された一連のカラーによって構築されている。このマップはSassでループされ、一連のルールセットを迅速に生成可能。

全てのカラー(All colors)

Bootstrap4で使用可能なすべてのカラーは、Sass変数($colors)とSassマップとして、scss/_variables.scss ファイルで使用可能。これは、その後のマイナーリリースで拡張され、すでに組み込まれているグレースケールパレットと同様に、追加の陰影を追加する。

見本 $xxx は変数名
Blue $blue
Indigo $indigo
Purple $purple
Pink $pink
Red $red
Orange $orange
Yellow $yellow
Green $green
Teal $teal
Cyan $cyan
White $white
Gray $gray-600
Gray-dark $gray-800
Black $black

Sassでこれらを使用する方法は次のとおり:

Sass// 変数付き
.alpha { color: $purple; }

// `color()` 関数を使ったSassマップから
.beta { color: color("purple"); }

カラーユーティリティクラスcolorbackground-color の設定に使用可能。

テーマカラー(Theme colors)

Bootstrapの scss/_variables.scss ファイルでSass変数($theme-colors)とSassマップとして利用可能なカラースキーム生成用の小さなカラーパレットを作成するのに、全てのカラーのサブセットを使用。

見本
Primary
Secondary v4.0.0追加
Success
Danger
Warning
Info
Light v4.0.0追加
Dark v4.0.0追加

【デフォルトでの設定】

  • Primary=Blue $blue
  • Secondary=600 $gray-600
  • Success=Green $green
  • Info=Cyan $cyan
  • Warning=Yellow $yellow
  • Danger=Red $red
  • Light=100 $gray-100
  • Dark=800 $gray-800

グレースケール(Grays)

プロジェクト全体で一貫したグレーの濃淡を実現するために、scss/_variables.scss にある広範なグレーの変数($grays)とSassマップのセット。これらはニュートラルグレーではなく、微妙に青い色調の「クールグレー」なので注意。

見本 ※は $grays のSassマップには組み込まれていないカラー
※White
100(=Light)$gray-100
200 $gray-200
300 $gray-300
400 $gray-400
500 $gray-500
600(=Gray&Secondary)$gray-600
700 $gray-700
800(=Gray-dark&Dark)$gray-800
900 $gray-900
※Black

scss/_variables.scss の中に、Bootstrapのカラー変数とSassマップがある。$colors Sassマップの例を次に示す:

Sass$colors: (
	"blue": $blue,
	"indigo": $indigo,
	"purple": $purple,
	"pink": $pink,
	"red": $red,
	"orange": $orange,
	"yellow": $yellow,
	"green": $green,
	"teal": $teal,
	"cyan": $cyan,
	"white": $white,
	"gray": $gray-600,
	"gray-dark": $gray-800
) !default;

マップ内の値を追加、削除、変更をして、他の多くのコンポーネントでの使用方法を更新する。残念ながら現時点では、全てのコンポーネントがこのSassマップを使用していない。今後のアップデードでこれを改善する予定。それまでは、${color} 変数とこのSassマップを使用する。

 

コンポーネント(Components)

Bootstrapのコンポーネントとユーティリティの多くは、Sassマップを反復処理する @each ループで構築されている。これは、$theme-colors によってコンポーネントのバリエーションを生成し、特に各ブレークポイントのレスポンシブ・バリエーションを作成するのに便利。これらのSassマップをカスタマイズして再コンパイルすると、これらのループに反映された変更が自動的に表示される。

修飾子(Modifiers)

Bootstrapのコンポーネントの多くは、基本の修飾子クラスのアプローチで構築されている。これは、スタイルのバリエーションが修飾子クラス(.btn-danger など)に限定されている間、スタイルの大部分が基本クラス(.btn など)に組み込まれていることを意味する。これらの修飾子クラスは $theme-colors マップから構築され、修飾子クラスの数と名前をカスタマイズする。

.alert コンポーネントとすべての .bg-* 背景色ユーティリティの修飾子を生成するために $theme-colors マップをループする方法の2つの実例を次に示す。

// アラートを色分けするための修飾子クラスを生成
@each $color, $value in $theme-colors {
	.alert-#{$color} {
		@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
	}
}

// `.bg-*` カラーユーティリティを生成
@each $color, $value in $theme-colors {
	@include bg-variant('.bg-#{$color}', $value);
}

レスポンシブ(Responsive)

これらのSassループもカラーマップに限定されない。また、コンポーネントやユーティリティのレスポンシブ・バリエーションも生成可能。実例として、$grid-breakpoints Sassマップの @each ループとメディアクエリの @include を組み合わせるレスポンシブテキスト配置ユーティリティを掲げる。

@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		.text#{$infix}-left   { text-align: left !important; }
		.text#{$infix}-right  { text-align: right !important; }
		.text#{$infix}-center { text-align: center !important; }
	}
}

$grid-breakpoints を変更する必要がある場合、変更はそのマップを反復するすべてのループに適用される。

 

CSS変数(CSS variables)

Bootstrap4には、約20のCSSカスタムプロパティ(変数)がコンパイルされたCSSに組み込まれている。これらによりブラウザのインスペクタ、コードサンドボックス、一般的なプロトタイプで作業するときのテーマカラー、ブレークポイント、プライマリフォントスタックなどの一般的に使用される値に簡単にアクセス可能にする。

利用可能な変数(Available variables)

ここには変数が組み込まれている(:root は必須)。これらは _root.scss ファイルにある。

デフォルトの設定
scss/_root.scss 内:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

実例(Examples)

CSS変数は、Sassの変数と同様の柔軟性を提供するが、ブラウザに提供される前にコンパイルする必要はない。実例では、CSS変数を使用してページのフォントとリンクスタイルをリセット。

custom.cssbody {
	font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
	color: var(--blue);
}

【設定】

  • カスタムのcssにbootstrap.cssの :root 内に記載されている変数(ブレークポイントを除く)がCSSファイルで var(--{変数名}) として使用可能

【注意】

  • var() 関数はInternet Explorerでは非対応

ブレークポイント変数(Breakpoint variables)

もともとBootstrapはCSS変数にブレークポイントを組み込んでいたが( --breakpoint-md など)、これらはメディアクエリではサポートされておらず、メディアクエリの _within_ ルールセット内で使用可能。これらのブレークポイント変数は、JavaScriptで利用可能な場合は、下位互換性のためにコンパイル済のCSSに残されている。仕様の詳細はW3Cに記載。

サポートされない例:

custom.css@media (min-width: var(--breakpoint-sm)) {
  ...
}

サポートされる例:

custom.css@media (min-width: 768px) {
	.custom-element {
		color: var(--primary);
	}
}

【注意】

  • ブレークポイントの変数はJavaScriptで使用可能