Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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のクラス設定が効かないのだ〜!(しかも私だけ)」と悩む子羊たちのお役に立てればと思い、恥ずかしながらメモを貼っておきます。

globis
グロービスは 1992 年の創業以来、社会人を対象とした MBA、人材育成の領域で Ed-Tech サービスを提供し、現在は日本 No.1 の実績があります。これらの資産と、さらに IT や AI を活用することで、アジア No.1 を目指しています。
http://www.globis.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away