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

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

テーマ（Theming Bootstrap）

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

はじめに（Introduction）

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

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

【変更履歴】

  • 【v4.0.0】
    • CSS開発言語：Less ⇒ Sass

 

Sass

独自のアセットパイプラインを使用してSassをコンパイルするときに、ソースSassファイルを利用して、変数、マップ、mixinなどを活用。

ファイル構造（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）v4.6.1設定変更

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

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

// デフォルトの変数の上書きをここに組み込む（関数は使用不可）

@import "../node_modules/bootstrap/scss/bootstrap";

// ここにカスタムコードを追加
custom.scss// オプションB: Bootstrapを部分的に組み込む

// 1. 最初に関数を組み込む（カラー、SVG、計算などが操作できるように）
@import "../node_modules/bootstrap/scss/functions";

// 2. デフォルトの変数の上書きを組み込む

// 3. 残りの必要なBootstrapスタイルシートを組み込む
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. 必要に応じて、オプションのBootstrapコンポーネントを組み込む
@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";

// 5. ここにカスタムコードを追加

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

【変更履歴】

  • 【v4.6.1】
    • オプションBの変数、mixinの設置場所：関数に続いてデフォルトの変数の上書きの前 ⇒ デフォルトの変数の上書きの後

変数のデフォルト値（Variable defaults）v4.6.1設定変更

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

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

変数の上書きは、関数、変数、mixinがインポートされた後、残りのインポートの前に行われる必要がある。

Bootstrapをnpm経由で読み込んでコンパイルするときに <body> の background-color と color を変更するには、次のようにする（v4.6.0変更）：

custom.scss@import "../node_modules/bootstrap/scss/functions";

// デフォルトの変数の上書き
$body-bg: #000;
$body-color: #111;

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

// Bootstrapとそのデフォルト変数

// オプションのBootstrapコンポーネント
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// など

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

【変更履歴】

  • 【v4.6.0】
    • 変数の上書きの設置場所：デフォルト変数の前か後 ⇒ 関数、変数、mixinがインポートされた後、残りのインポートの前
  • 【v4.6.1】
    • 変数、mixinの設置場所：関数に続いてデフォルトの変数の上書きの前 ⇒ デフォルトの変数の上書きの後

マップとループ（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-colors の primary, 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 様々なコンポーネントで定義済の装飾的な box-shadow スタイルを有効/無効にする。フォーカス状態に使用される box-shadow には影響しない
※無効にした場合の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 #007bff
Indigo $indigo #6610f2
Purple $purple #6f42c1
Pink $pink #e83e8c
Red $red #dc3545
Orange $orange #fd7e14
Yellow $yellow #ffc107
Green $green #28a745
Teal $teal #20c997
Cyan $cyan #17a2b8
White $white #fff
Gray $gray-600 #6c757d
Gray-dark $gray-800 #343a40
Black $black #000

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

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

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

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

テーマカラー（Theme colors）

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

見本 $xxx は変数名
Primary $primary #007bff
Secondary $secondary #6c757d v4.0.0追加
Success $success #28a745
Danger $danger #dc3545
Warning $warning #ffc107
Info $info #17a2b8
Light $light #f8f9fa v4.0.0追加
Dark $dark #343a40 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 #fff
100 $gray-100（=Light） #f8f9fa
200 $gray-200 #e9ecef
300 $gray-300 #dee2e6
400 $gray-400 #ced4da
500 $gray-500 #adb5bd
600 $gray-600（=Gray） #6c757d
700 $gray-700 #495057
800 $gray-800（=Gray-dark&Dark） #343a40
900 $gray-900 #212529
※Black #000

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）v4.6.0変更

ここには変数が組み込まれている（: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", "Liberation 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;
}
【変更履歴】
  • 【v4.6.0】
    • --font-sans-serif（$font-family-sans-serif）に "Liberation Sans"（Ubuntu用sans-serif）が追加

実例（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で使用可能

ページ移動