先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのダークモードを使うと、文字が薄く見えたり、ボタンの場所がわかりにくい時があります。原因はなんですか？」

先生

「それはコントラストやフォーカスリングが関係しています。Bootstrapではアクセシビリティを高める仕組みがあるので、その設定を理解すると見やすくできますよ。」

生徒

「フォーカスリングってキーボード操作のときに出る枠線ですか？」

先生

「そのとおりです。とても大事なアクセシビリティ要素なので、一緒に仕組みを学んでいきましょう。」

1. ダークモードでアクセシビリティが大切な理由

Bootstrapのテーマ作成やダークモードを使うとき、まず理解しておきたいのがアクセシビリティです。アクセシビリティとは、誰でも快適にWebサイトを利用できる状態を作ることです。特にダークモードでは、背景が暗くなるため文字色やボタンのコントラストが不足しやすく、全体が見えにくくなることがあります。

たとえば、黒い紙に濃い灰色の文字を書いた場合、ほとんど読めません。これと同じことがダークモードのWebサイトでも起こります。Bootstrapでは色の設定をCSS変数で切り替えられるので、コントラストの調整がしやすく、初心者でも扱いやすい仕組みになっています。

2. コントラストを調整して読みやすさを維持する

ダークモードを使うときは、背景色と文字色の明るさの差、つまりコントラストが非常に重要です。コントラストが弱いと、どこに何が書いてあるのか分かりにくくなり、視認性が低下してしまいます。BootstrapではCSS変数を利用することで、ライトモードとダークモードで違う色を簡単に使い分けられます。

次の例では、ダークモードの背景色と文字色をしっかりと見えやすいように設定し、アクセシビリティを確保しています。


<style>
:root {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
}

/* ダークモード用の明確なコントラスト */
[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #f1f1f1;
}

body, div {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
</style>

<div data-bs-theme="dark" class="p-4">
    <h1>読みやすいダークモード</h1>
    <p>コントラストを調整</p>
</div>

ブラウザ表示

3. フォーカスリングとは？初心者にもわかる役割説明

フォーカスリングとは、キーボード操作や画面遷移時に「今どの要素が選択されているのか」を示す枠線のことです。通常、青い枠が表示されます。これは、クリックしなくても位置がわかる重要なアクセシビリティの機能です。

ダークモードでは背景が暗いため、通常の青いフォーカスリングが見えにくくなることがあります。そのためBootstrapではCSS変数を使ってフォーカスリングの色も切り替えられるようになっており、視認性の改善が可能です。

4. ダークモードでも見やすいフォーカスリングを設定する

フォーカスリングの色を強めに設定しておくと、ダークモードでも操作がしやすくなります。次の例はライトとダークでリングの色を変え、ダークモード時には非常に見やすいシアン色を強く表示するようにしています。


<style>
:root {
    --bs-focus-ring-color: rgba(0, 123, 255, 0.4);
}

/* ダークモードは鮮やかな色で視認性UP */
[data-bs-theme="dark"] {
    --bs-focus-ring-color: #00eaff;
}

button:focus, input:focus, a:focus {
    outline: 4px solid var(--bs-focus-ring-color);
    outline-offset: 3px;
}

div {
    padding: 20px;
}
</style>

<div data-bs-theme="dark">
    <button class="btn btn-secondary mb-3">フォーカスを当ててみてください</button>
    <input type="text" class="form-control" placeholder="クリックしてフォーカスを確認">
</div>

ブラウザ表示