CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話

2015/12/14

文章の一部を強調表示をするために、NJ-CLUCKER では蛍光ペン風マーカーの CSS を設定しています。実際にそのスタイルを反映させると次のような表示になります。

蛍光ペン風マーカーの黄色を指定した場合。
蛍光ペン風マーカーのピンクを指定した場合。

しかしブラウザによって解釈が違うようで、ふと iPhone で見てみると transparent で設定して透明になるはずだった部分が黒くなっているではないですか。

css-linear-gradient-not-use-transparent01

この時指定していた CSS は次の通りです。上が黄色で下がピンクです。

strong {
  background: linear-gradient(transparent 30%, #FEFE98 90%);
}
strong.pink{
  background: linear-gradient(transparent 30%, #FFCCFF 90%);
}

一体何が悪いのだろうと調べてみると transparent を指定しているのがどうやら都合が悪いようなのです。

片方を透明にする場合のグラデーション設定に transparent を用いないこと

transparent は透明!と勝手に思い込んでいたのですが、どうやら CSS において正しくは「透明の黒」として定義されているようなのです。

transparent == rgba(0, 0, 0, 0)

よって透明な黒から黄色やピンクへのグラデーションを指定すると、中間色が黒っぽくなってしまうと言うわけです。これを解消するには、開始の色を transparent ではなく、終了点の色の透明、つまり「透明の黄色」と「透明のピンク」にしてあげることで、中間色も同じ色が使われるので綺麗なグラデーションになります。

グラデーション指定を変更する

前述の CSS における transparent の指定箇所をそれぞれ rgba で表現するように変更します。その前に16進数で表現されたカラーコードを RGB の10進数へ変更する必要があります。Windows の場合、電卓を利用すれば簡単に10進数の数値を計算できます。

電卓を利用すると、わざわざ一色ずつ計算しなくてはいけないので、カラーコードが簡単に求められる Web ツールを作ってみたので、もしよろしければ使ってみてください。

CMYK RGB色空間 HSL色空間 HSV色空間 16進数カラーコードの変換ツール
このツールでは以下「色に関するコード値」の相互変換を行います。16進数カラーコード : CSS で利用される #FF9900 等 RGB : R レッド...

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%);
}

これで無事、イメージ通りのグラデーションになりました。
css-linear-gradient-not-use-transparent02

ポイントは「transparent が透明の黒である」ということです。完全な透明でないことを念頭に、利用するようにしましょう。CSS3 により拡張性の高いスタイルが多く登場していますが、まだブラウザによって異なる解釈をする場合があるので、利用想定の OS + ブラウザでの動作確認は必須かもしれませんね。

このブログの運営者

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

最近のエントリー

Switch の画面がオレンジになって動かなくなった場合の対処法の1つ!セーブデータを保持したまま本体を初期化する!

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?