CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

CSSトランジション、 P.178の「曇りガラスの効果」、 P.264の「背

景を暗くして重要度を下げる」

課題

P.264の「背景を暗くして重要度を下げる」 では、半透明の黒色の

オーバーレイ表示を使ってページの一部を暗く表示し、重要度を下げるテ

クニックを紹介しました。一方、ページ上にさまざまな項目が表示されて

いる場合には、かなり暗いオーバーレイ表示を適用する必要があります。

そうしないと、前面に表示されるテキストのために十分なコントラストを

確保できなかったり、そもそも前面のコンテンツ（Lightboxなど）に注目

してもらえなかったりするでしょう。図6.14のように背面のコンテンツ

をぼかす方法が、ここでのよりエレガントなやり方です。ぼかしと暗い表

示を組み合わせてもかまいません。人間の視覚は、焦点が合っている対象

をより近くにあると感じます。つまり、ぼかしによって奥行きを表現する

のは理にかなっています。

背景をぼかして重要度を

下げる

33

270

6章：ユーザーエクスペリエンス

しかし、これを実現するのは暗い表示よりもはるかに困難です。 Filter

Effects（w3.org/TR/filter‐effects）が導入されるまでは、これは完

全に不可能でした。 ...