Bootstrapフォームのダークモード完全解説！placeholderとfocusを見やすく調整する方法
生徒
「先生、Bootstrapでフォームをダークモードにしたら、文字が見にくくなってしまいました。特にplaceholderが灰色で背景と同化しちゃうんです。」
先生
「確かにダークモードでは背景が暗いので、placeholderの文字や入力中のfocusの色が目立たなくなりやすいですね。」
生徒
「focusっていうのは何ですか？」
先生
「focusは、入力欄をクリックして文字を入力できる状態になったときに出る枠線や色の変化のことです。それを調整するとユーザーに優しいデザインになりますよ。」
1. ダークモードのフォームとは？
フォームとは、ユーザーが文字を入力するテキストボックスやメールアドレス欄のことです。Bootstrapでは form-control クラスを使えば簡単に作れます。しかし、ダークモードにすると背景が暗くなるので、入力欄の文字やplaceholder（入力前に表示される薄い説明文）が見にくくなることがあります。ここを意識して調整することが重要です。
2. placeholderの文字を見やすくする
placeholderは「ここに名前を入力してください」のような補助説明を表示するものです。ダークモードだと灰色が暗い背景に埋もれてしまい、初心者ユーザーには読みにくく感じます。CSSを追加して文字を明るくすると改善されます。
<style>
.form-control::placeholder {
color: #eeeeee !important; /* より明るく、優先度も高める */
opacity: 1; /* Safari などで薄く表示されないように */
}
</style>
<input type="text" class="form-control bg-dark text-white" placeholder="お名前を入力してください">
3. focusの状態を調整する
focusとは、テキストボックスをクリックして文字を入力できる状態のことです。デフォルトだと青い枠が出ますが、ダークモードでは見えにくいことがあります。CSSで枠線や影を調整すると、クリックした場所がわかりやすくなります。
<style>
.form-control:focus {
border-color: #66afe9; /* 青色で強調 */
box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}
</style>
<input type="email" class="form-control bg-dark text-white" placeholder="メールアドレスを入力してください">
4. ダークモードでの背景と文字色のバランス
フォーム全体をダークモードにするときは、背景に bg-dark を使い、文字には text-white を指定します。背景と文字のコントラストをはっきりさせると、ユーザーがストレスなく入力できます。
<input type="password" class="form-control bg-dark text-white" placeholder="パスワードを入力してください">
5. 実際にフォーム全体を組み合わせてみる
placeholderとfocusを調整した状態で、複数の入力欄を組み合わせると次のようになります。これなら初心者でも安心して入力できますし、デザイン的にも統一感が出ます。
<style>
/* placeholder を全ブラウザで確実に見えるように */
.form-control::placeholder {
color: #eeeeee !important; /* 白に近いグレー */
opacity: 1 !important; /* 半透明を無効化 */
}
/* フォーカスしたときの枠と影 */
.form-control:focus {
border-color: #66afe9 !important;
box-shadow: 0 0 5px rgba(102,175,233,0.6) !important;
}
</style>
<form class="p-3 bg-dark text-white">
<div class="mb-3">
<label for="name" class="form-label">名前</label>
<input type="text" id="name" class="form-control bg-dark text-white" placeholder="お名前を入力してください">
</div>
<div class="mb-3">
<label for="email" class="form-label">メール</label>
<input type="email" id="email" class="form-control bg-dark text-white" placeholder="メールアドレスを入力してください">
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
6. 初心者にもわかる見落としポイントの整理
ダークモードのフォームで見落としやすいポイントは、主にplaceholderとfocusです。placeholderは文字が薄すぎて読みにくくなりやすく、focusは強調が足りないと入力欄がどこなのか分かりにくくなります。これらを調整すれば、フォームがぐっと使いやすくなり、ユーザーに優しいデザインに仕上がります。
