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

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

テーマ(Theming Bootstrap)

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

はじめに(Introduction)

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

今度は、Sass変数、Sassマップ、およびカスタムCSSによってテーマ設定が行われる。もはや専用のテーマスタイルシートは存在しない。代わりに、ビルトイン・テーマでグラデーション、シャドウなどを追加することが可能。

【Bootstrap3.xとの変更箇所】

  • CSS開発言語がLessから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)

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変数には、Bootstrapのソースコードを変更せずに自分のSassで変数のデフォルト値を上書きできる !default フラグが含まれている。必要に応じて変数をコピー&ペーストし、その値を変更して !default フラグを削除する。変数がすでに割り当てられている場合、変数はBootstrapのデフォルト値によって再割り当てされない。

Bootstrapの変数の完全なリストは scss/_variables.scss にある。

同じSassファイル内の変数の上書きは、デフォルト変数の前後に来る可能性がある。但し、Sassファイルを上書きするときは、BootstrapのSassファイルをインポートする前に上書きする必要がある。

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

// 変数の上書き
$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ファイルに次の行を追加:

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

マップに追加(Add to map)

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

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

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

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

// 必須
@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つの関数が含まれている。

@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-element {
	color: gray("100");
	background-color: theme-color("dark");
}

$theme-colors マップから特定の level の色を得る別の関数もある。マイナスのlevel値は色を明るくし、高いlevelは暗くなる。

@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-element {
	color: theme-color-level(primary, -10);
}

追加の機能を将来的に追加するか、独自のカスタムSassを追加して、追加のSassマップ用のレベル関数を作成したり、より冗長にしたい場合は汎用の関数が作成可能。

色のコントラスト(Color contrast)

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

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

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

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

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

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

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

 

Sassオプション(Sass options)

組み込みのカスタム変数ファイルを使ってBootstrap4をカスタマイズし、新しく $enable-* Sass変数でグローバルなCSS設定を簡単に切り替え可能。変数の値を上書きし、必要に応じて npm run test で再コンパイルする。

これらの変数は、Bootstrapの _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-hover-media-query true または false(デフォルト) 廃止予定
$enable-grid-classes true(デフォルト)または false グリッドシステムのためのCSSクラスの生成を有効にする(例:.container, .row, .col-md-1 など)
$enable-caret true(デフォルト)または false .dropdown-toggle の擬似要素キャレットを有効にする
$enable-print-styles true(デフォルト)または false 印刷を最適化するスタイルを有効にする

 

色について(Colors)

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

全ての色(All colors)

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

見本 $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でこれらを使用する方法は次のとおり:

// 変数付き
.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

_variables.scss の中に、Bootstrapのカラー変数とSassマップがある。$colors 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;

マップ内の値を追加、削除、または変更して、他の多くのコンポーネントでそれらがどのように使用されているかを更新する。残念ながら現時点では、every コンポーネントはこのSassマップを利用していない。今後の更新でこれを改善する予定。それまでは ${color} 変数とこのSassマップを利用するように。

 

コンポーネント(Components)

Bootstrapのコンポーネントとユーティリティの多くは、@each ループで構築されており、Sassマップを繰り返し処理する。これは、$theme-colors によってコンポーネントのバリアントを生成し、各ブレークポイントに対応するバリアントを作成する場合に特に役立つ。これらのSassマップをカスタマイズして再コンパイルすると、これらのループに反映された変更が自動的に表示される。

修飾子(Modifiers)

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

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

// Generate alert modifier classes
@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));
	}
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
	@include bg-variant('.bg-#{$color}', $value);
}

レスポンシブ(Responsive)

これらのSassループはカラーマップに限らない。また、コンポーネントやユーティリティのさまざまなバリエーションも生成可能。レスポンシブする文字の配置ユーティリティを例に取った場合、$grid-breakpoints Sassマップの @each ループとメディアクエリの組み込みが混在している。

@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-breakpoint を変更する必要がある場合、変更はそのマップを反復するすべてのループに適用される。

 

CSS変数(CSS variables)

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

利用可能な変数(Available variables)

ここには変数が組み込まれている(:root は必須)。それらは _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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

実例(Examples)

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

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

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

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

サポートされていないものの例:

CSSコピー@media (min-width: var(--breakpoint-sm)) {
  ...
}

サポートされているものの例:

CSSコピー@media (min-width: 768px) {
	.custom-element {
		color: var(--primary);
	}
}

【設定】

  • カスタムのcssにbootstrap.cssの :root 内に記載されている変数(ブレークポイントを除く)がCSSファイルで var(--{変数名}) として使用可能
  • ブレークポイントの変数はJavaScriptでは使用可能
  • Internet Explorerなど一部のブラウザでは非対応