この記事は CSS 珍百景 Advent Calendar 2014 11日目の記事です。
みんな大好き box-shadow
box-shadow プロパティは要素に影をつけることができるプロパティです。今回は box-shadow で出会った珍百景と解決法を紹介します。
Chrome で 印刷しようとすると…
まずはこちらを見てください。 2つの div 要素に box-shadow をつけたものです。
片方は1つの shadow, もう片方は複数の shadow を別々の色で加えたものになります。
CSS はこんな感じで設定しています。
div{ width: 100px; height: 100px; margin: 1em auto 2em; } .box1{ box-shadow: 0px 0px 8px #898989; } .box2{ box-shadow: -10px -10px 0px red, 0px -10px 0px green, 0px 5px 0px yellow, 10px 5px 0px pink }
これを Google Chrome で印刷、または PDF 化しようとすると、以下のような状態になりました。
(Mac Chrome 39.0.2171.95 (64-bit),Mac Chrome 41.0.2245.0 canary (64-bit), Windows Chrome 最新版[バージョン番号確認し忘れました…確認次第更新します…] )
黒い…。
ぼかしの値も無視されちゃいました。
解決法
これは、プリントするために WEBページを変換する際に起こっている ものだと思われるので、解決方法としては印刷時に box-shadow を切るか、border とかに置き換えるしか無いのかなーと思っていたのですが、 解決法は意外とすぐ見つかりました。
box-shadow, when printed, appears solid black
filter: blur を使います。
先ほどの例で試してみましょう。 div に filter をかけてみます。
div{ width: 100px; height: 100px; margin: 1em auto 2em; -webkit-filter: blur(0); }
blur を使っている以上当たり前なのですが、0以上の値をかけるとボケてしまうので注意してください。
な、直った！
今回は要素に直接 filter をかけてしまいましたが、実際に利用する際には link 要素の media 属性を使って、印刷するときにだけ適用されるようにしたほうがいいと思います。
直った原因はよくわかってませんが、もともと SVG にあった filter プロパティを使うことで要素の扱いが変わってごにょごにょ…ということなのでしょか？（調査不足ですごめんなさい…）
ちょっとした box-shadow であれば印刷時に表示されなくてもそんなに気にはなりませんが、先ほどの例の下の div のように box-shadow を装飾に使っている場合は印刷時に黒くなってしまっていることを気にする人もいるかもしれませんので、そういった場合にはこれで解決できるようになりますね！
