あれ?ブラウザによって色が違うぞ?

ブログ関連

こんにちは、ゆんつです。

この前、自分のブログを色んなブラウザを使ってみていました。

するとブログ下部のページを選択するリンクの色が

Chrome

Chromeはページ部分のリンクが緑色

FireFox

FireFoxはページ部分のリンクが緑色

Edge

Edgeでは色が表現されていない

ゆんつ
ゆんつ

ん?

Edgeだけページリンクの色がグレーになってる!

そうです。

ChromeとFireFoxではページ移動のリンクは緑色なんですがEdgeでは灰色になっています。

ゆんつ
ゆんつ

なんじゃこりゃ?

原因

下記のサイトに完全な解決法が書かれていました。

CSS HEX8桁カラーコード(※透明度設定あり)をRGBAに変換する | Mac Tips
#RRGGBBaaのHEX8桁カラーコードで透明度を与えると、まだ対応していないブラウザがあるので、その場合真っ白に表示されたりしてしまいます。しかし、rgba(rrr,ggg,bbb,a)の10進法に戻す計算方法がよくわからない・・・海外にかっこいい計算サイトがありましたので紹介します。
ゆんつ
ゆんつ

ありがとうございます!

問題の原因は

8桁のHEXという形式のカラーコードで色を指定していた

ということにありました

この8桁のHEXというカラーコードにEdgeなどの一部のブラウザは対応していないらしいのです。

ですのでChromeやFirefoxでは表現できる緑色のリンク色がEdgeでは表現できずに灰色となっていたわけです。

Edgeの開発ツールで該当部分を調べると、表示できない色の部分には赤線がついていました。

FireFoxの開発ツールで色探しをしたのも原因の一部だった

FireFoxの開発ツールを使って要素の色を探す場合にパレットを使うことができます。

僕は色を決定するのにこのパレット使って自分のサイトに会う色を探して、そのカラーコードを使ってCSSをカスタマイズしました。

この色探しの際に色に透明度を与えると、8桁のHEXという形式のカラーコードが表示されます(透明度を与えない場合は6桁のHEXでEdgeでも普通に表示できます)。

僕は色に透明度を与えたたためカラーコードが8桁のHEXになり、Edgeなどの一部のブラウザで色が表現されなくなったのです。

解決策

8桁のHEXを8桁のRGBAに変換するとEdgeなどのブラウザでも設定どおりに色が表示されるようになります。

以下のサイトから

JSFiddle

FORMATをRGBAに設定し、HEXの欄に変換したい8桁のHEXのカラーコードを入力してCONVERTボタンをクリックするだけ。

するとRGBAに変換されたカラーコードが現れるので、CSSで該当部分のカラーコードを書き直すだけです。

RGBAに変換されたカラーコードを使えばEdgeでも色が表示される

変換後のカラーコードに書き換えると、全部同じ色に見えるようになりました。

Chrome

色コードをRGBAに変換した後のChrome

FireFox

色コードをRGBAに変換した後のFireFox

Edge

色コードをRGBAに変換した後のEdge(色が表示されている)

ゆんつ
ゆんつ

Edgeでも表示された!

Edgeの開発ツールで確認すると変換前のカラーコードに出ていた赤線も無くなっていました。

変換後のカラーコードに修正すると赤線が消えた

まとめ

ChromeやFirefoxEdgeで表示される色が、Edgeでは表示されない場合

HEX8桁のカラーコードを設定していないかどうか確認し、HEX8桁ならRGBAに変換する

と改善するかもしれません。

また

Firefoxの開発ツールのパレットで色を探す場合に透明度を設定すると、表示されるカラーコードはHEX8桁になる

というのも覚えておいた方が良さそうです。

さらに

カスタマイズしたときは色んなブラウザで表示結果を確認する

という基礎的な事も再確認させられました。

ゆんつ
ゆんつ

基本ですね

それでは、またー。

コメント