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

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

カラーユーティリティ（Colors） v4.1.0追加

いくつかの色のユーティリティクラスを使用して意味を色で伝える。リンクにも適用され、デフォルトのリンクスタイルと同じようにホバー状態のスタイリングリンクのサポートも含む。
視力の弱い人や色盲のユーザーに配慮して、v3のものよりコントラスト比を高めて鮮やかな色遣いになった。

文字色（Color）v4.1.0一部追加

文字色の種類

各文字色のクラスは、提供されたホバーとフォーカス状態のアンカーでもうまく機能する。.text-white と .text-muted クラスでは下線以外のリンクのスタイルがないことに注意（色は濃いめに強調変化しない）。

Primary：.text-primary
通常の文章の場合とリンクを貼った場合。

Secondary：.text-secondary v4.0.0追加
通常の文章の場合とリンクを貼った場合。

Success：.text-success
通常の文章の場合とリンクを貼った場合。

Info：.text-info
通常の文章の場合とリンクを貼った場合。

Warning：.text-warning
通常の文章の場合とリンクを貼った場合。

Danger：.text-danger
通常の文章の場合とリンクを貼った場合。

Light：.text-light v4.0.0追加
通常の文章の場合とリンクを貼った場合。
※色が見やすいように背景色をつけています

Dark：.text-dark v4.0.0追加
通常の文章の場合とリンクを貼った場合。

Body（デフォルトの文字色と同じ配色）：.text-body v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示

Muted：.text-muted
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示

White：.text-white v4.0.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています

Black-50（50％不透明な黒色）：.text-black-50 v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示

White-50（50％不透明な白色）：.text-white-50 v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています

※デフォルトの場合（参考）：
通常の文章の場合とリンクを貼った場合。

設定例
<span class="text-primary">通常の文章の場合</span>と<a href="#" class="text-primary">リンクを貼った</a>場合。

【設定】

  • <p> や <span> などの要素に .text-{themecolor}（上記の「文字色の種類」から選択）を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, muted, body, white, black-50, white-50 のいずれかを選択
  • <a> タグに .text-{themecolor} を入れると、ホバー時に濃いめに強調表示される（.text-body, .text-muted, .text-white, .text-black-50, .text-white-50 を除く）

【変更履歴】

  • 【v4.0.0】
    • .text-muted でリンクのスタイルはなくなる

 

背景色（Background Color）v4.0.0一部追加

文字色のクラスと同様、要素の背景色を任意の背景色クラスで簡単に設定可能。アンカー要素では、文字色クラスと同様に、ホバー時に濃いめになる。背景色ユーティリティでは color を設定していないので、場合によっては .text-{color} ユーティリティを使用する必要がある。

背景色の種類

●段落全体に背景色を設定する 色が見やすいように空白を設けています

Primary：.bg-primary
Secondary：.bg-secondary v4.0.0追加
Success：.bg-success
Info：.bg-info
Warning：.bg-warning
Danger：.bg-danger
Light：.bg-light v4.0.0追加
Dark：.bg-dark v4.0.0追加
White：.bg-white v4.0.0追加（※デフォルトの背景色と同じ配色）
透過：.bg-transparent v4.0.0追加

●文章の一部分に背景色を設定する

Primary：.bg-primary
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Secondary：.bg-secondary v4.0.0追加
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Success：.bg-success
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Info：.bg-info
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Warning：.bg-warning
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Danger：.bg-danger
デフォルトの文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。

Light：.bg-light v4.0.0追加
デフォルトの文字色と白色の文字（←白色の文字）の場合。さらにリンクを貼った場合。

Dark：.bg-dark v4.0.0追加
デフォルトの文字色（←デフォルトの文字色）と白色の文字の場合。さらにリンクを貼った場合。

White：.bg-white v4.0.0追加（※デフォルトの背景色と同じ配色）
デフォルトの文字色と白色の文字（←白色の文字）の場合。さらにリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示

設定例
段落全体に背景色を設定する<div class="p-3 mb-2 bg-primary text-white">...</div>
文章の一部分に背景色を設定する<p><span class="bg-primary">デフォルトの文字色</span>と<span class="bg-primary text-white">白色の文字</span>の場合。さらに<a href="#" class="bg-primary">リンクを貼った</a>場合。

【設定】

  • <div> や <span> などの要素に .bg-{themecolor}（上記の「背景色の種類」から選択）を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, white, transparent のいずれかを選択
  • 背景色によっては、.text-white など見やすい色の文字を追加する必要あり
  • <a> タグに .bg-{themecolor} を入れると、ホバー時に濃いめに強調表示される（.bg-white と .bg-transparent を除く）

【変更履歴】

  • 【v4.0.0】
    • .bg-primary のデフォルトの文字色が白でなくなったので、白色の文字にする場合は .text-white を追加する必要あり

定義済の文字色と背景色の配色

.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark .bg-white
.text-primary 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-secondary 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-success 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-info 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-warning 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-danger 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-light 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-dark 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-body 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-muted 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-white 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-black-50 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-white-50 文字 文字 文字 文字 文字 文字 文字 文字 文字

 

背景色のグラデーション化（Background gradient）v4.0.0新設

$enable-gradients を true（デフォルトでは false）に設定されているときは、.bg-gradient- ユーティリティクラスが使用可能。これらのクラスなどを有効にするはSassのオプションについて学習すること。

※このクラスを有効にするには、

  1. ツールのセットアップを実行。
  2. Bootstrap4のソースファイルの /scss/_variables.scss の Options の項目にある
    $enable-gradients: false !default; を $enable-gradients: true !default; に変更。
  3. コマンドラインから npm run test を実行。
  4. dist/css/ 内の bootstrap.css または bootstrap.min.css に .bg-gradient-{themecolor} の設定が追加される（他に .btn-{themecolor}, .alert-{themecolor} の背景色なども変更される）。

bootstrap.min.css をCDNで使用している場合は、.bg-gradient-{themecolor} 関連の設定を取り出して、任意のcssファイルに組み込むのがベター。

背景色の種類 クラスを有効にして表示

●段落全体に背景色を設定する 色が見やすいように空白を設けています

Primary：.bg-gradient-primary
Secondary：.bg-gradient-secondary
Success：.bg-gradient-success
Danger：.bg-gradient-danger
Warning：.bg-gradient-warning
Info：.bg-gradient-info
Light：.bg-gradient-light
Dark：.bg-gradient-dark
設定例
<div class="p-3 mb-2 bg-gradient-primary text-white">...</div>

【設定】

  • <div> などの要素に .bg-gradient-{themecolor}（上記の「背景色の種類」から選択）を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
  • 背景色によっては、.text-white など見やすい色の文字を追加する必要あり

ページ移動