LoginSignup
1
0

More than 5 years have passed since last update.

bootstrapの薄いグレーがmacの画面に表示されない

Posted at

bootstrapがなぜか正常に表示されない!

「初心者あるある」かもしれないのですが、恥ずかしながらめちゃくちゃハマったのでメモ。

はじまりは、navbarでした。
なぜかグレーになるはずのバーが白になるという謎現象。ブラウザを変えても直らない。

コードは正常に動いているようだし、人のマシンや自分のiPhoneなどで見ると普通に表示するので、しばらく放置していました。

しばらくしてテーブルに縞模様をかける"table-striped"クラスを試してみたところ、やはりグレーの縞模様が入らない。

stackexchangeで、たとえば"bootstrap table-stripped color not working"など入れて必死に検索するのですが、同じ症例が出てこなくて悩みました。

症状

同じ現象かどうかを知るためには、ブラウザでbootstrapの該当ページを開けて、navbarやtable-stripedが正常に表示されるかを確認するのが早いでしょう。

スクリーンショット 2016-12-13 14.17.22.png

この画面が下のように見えていたら、同じ現象の可能性があります。

スクリーンショット 2016-12-13 14.17.22のコピー.png
(↑は画像処理しています)

また、「あるはずのグレーが見えない領域」をキャプチャーして、他の人のマシンやiPhoneから確認する手もありますね。

原因と対策

長旅の末、たどり着いたのがコントラスト設定。

スクリーンショット 2016-12-13 14.08.06.png

[システム環境設定]→[アクセシビリティ]→[ディスプレイ]で、コントラスト設定画面にたどり着くことができます。

こんな奥深いところにあったとは!
(ついつい[システム環境設定]→[ディスプレイ]を探してしまうのが罠でした)

bootstrapさまごめんなさい

結果としては、bootstrapは全く悪くありませんでした。

強いて言えば、bootstrapではコントラストの限界に挑むような薄いグレーを多用しているため、コントラスト設定を半ノッチでもあげるとグレーが白色と同一化してしまいます。

ということで、「なぜbootstarpのクラス設定が効かないのだ〜!(しかも私だけ)」と悩む子羊たちのお役に立てればと思い、恥ずかしながらメモを貼っておきます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0