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 + ブラウザでの動作確認は必須かもしれませんね。

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

2017/01/13

スプラトゥーン2の発売日は2017年夏で決定!

2017/01/13

Nintendo Switch 発売日決定!詳細はいかに?

2017/01/13

Windows 10 の PDF を起動するアプリを設定する方法

2017/01/13

Windows で拡張子を表示させる方法!拡張子が分かればファイルの種類が判別できる

2017/01/12

開業届や青色申告の申請書の PDF はパソコンから入力することができる

2017/01/12

Adobe Acrobat Reader DC インストール手順!ダウンロード時の選択肢を間違えないようにしましょう

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑