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

知っておくべきポイント

CSSグラデーション、 background‐size

課題

ある要素について、表示されている範囲の外にもコンテンツがあること

を示すためにスクロールバーがよく使われます。しかし、多くのスクロー

ルバーは見た目が悪くユーザーの作業を妨げています。そこで近年のオペ

レーティングシステムでは、スクロールバーの簡素化が始まっています。

スクロール可能なコンテンツを操作している間だけスクロールバーを表示

し、それ以外の間は完全に隠してしまうケースがしばしば見られます。

多くのユーザーがジェスチャーを使ってスクロールを行うようになり、

スクロールバーの必要性は下がってきています。表示範囲外のコンテンツ

の存在を、より目立たない形で示せるような方法が求められています。

かつて公開されていたGoogle のフィードリーダー「GoogleReader」で

は、表示外のコンテンツがとてもエレガントなやり方で示されていまし

た。図6.20 のように、コンテンツが存在する場合にはその方向に小さく

影が表示されました。

しかし、この効果を表現するために GoogleReaderでは多くのスクリプ

トが使われていました。同じ効果をCSSだけで表現することは可能でしょ

うか。それとも、スクリプトの使用は避けられないのでしょうか。

スクロールを促すヒント

34

274

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

図6.19

このボックスにはもっと多くのコンテ

ンツが含まれているが、操作中でなけ

れば残りのコンテンツの存在に気づか

ない