CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話
文章の一部を強調表示をするために、Webllica では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。
蛍光ペン風マーカーの黄色を指定した場合。
蛍光ペン風マーカーのピンクを指定した場合。
しかしブラウザによって解釈が違うようで、iPhone で見てみると transparent で設定して透明になるはずだった部分が黒くなってしまいます。
この時指定していた CSS は次の通り。上が黄色で下がピンクです。
strong {
background: linear-gradient(transparent 30%, #FEFE98 90%);
}
strong.pink{
background: linear-gradient(transparent 30%, #FFCCFF 90%);
}さて、この黒くなる原因はどこにあるのか。
結論から言ってしまうと、グラデーションのパラメータに用いている transparent が悪さをしています。
片方を透明にする場合のグラデーション設定に transparent を用いないこと
transparent は透明！と勝手に思い込んでいたのですが、どうやら CSS において正しくは「透明の黒」として定義されているようなのです。
よって透明な黒から黄色やピンクへのグラデーションを指定すると、中間色が黒っぽくなってしまうのです。これを解消するには、開始の色を transparent ではなく、終了点の色の透明、つまり「透明の黄色」と「透明のピンク」にしてあげることで、中間色も同じ色が使われるので綺麗なグラデーションになります。
グラデーション指定を変更する
前述の CSS における transparent の指定箇所をそれぞれ rgba で表現するように変更します。その前に16進数で表現されたカラーコードを RGB の10進数へ変更する必要があります。Windows の場合、電卓を利用すれば簡単に10進数の数値を計算できます。
電卓を利用すると、わざわざ一色ずつ計算しなくてはいけないので、カラーコードが簡単に求められる Web ツールを作ってみたので、もしよろしければ使ってみてください。
rgba 変換によりイメージ通りの表示へ
transparent を rgba に変換した結果を css へ反映したバージョンがこちらです。
strong {
background: linear-gradient(rgba(254,254,152,0) 30%,#FEFE98 90%);
}
strong.pink{
background: linear-gradient(rgba(255,204,255,0) 30%,#FFCCFF 90%);
}これで無事、イメージ通りのグラデーションになりました。
ポイントは「transparent が透明の黒である」ということです。完全な透明でないことを念頭に、利用するようにしましょう。CSS3 により拡張性の高いスタイルが多く登場していますが、まだブラウザによって異なる解釈をする場合があるので、利用想定の OS + ブラウザでの動作確認は必須かもしれませんね。
