【WEBデザイン】背景を薄いグレーにする理由のひとつ「区切り線の立体感を簡単に出せる」

本日、こんなWEBアプリをリリースしました。
スマホがあれば誰でも人狼の司会ができる！『うそつき人狼 ゲームマスターガイド』をリリースしました！ | 株式会社人狼

そこそこに好評なようで、とてもうれしいです。jQueryだけで作ってます。
metaでapple-mobike-web-app-status-bar-styleだとか、
apple-mobile-web-app-capableだとかを設定してるので、
iPhoneで「ホーム画面に追加」をしてもらうと、まるでネイティブアプリみたいになります！
ぜひ、「ホーム画面に追加」してみてください！

さてさて、この『うそつき人狼 ゲームマスターガイド』というWEBアプリの背景色は、
薄いグレー（#f0f0f0）に設定してあります。

白ではなく、なぜ薄いグレーを採用しているのか？
質感を出すという理由ももちろんありますが、
個人的には「区切り線に立体感を出せる」というのが大きいです。

↓背景色を薄いグレーにすることで、区切り線に立体感を出すことができます。

ポイントは、1pxの区切り線を2本重ねて、
上を背景色より濃いグレー、下を背景色より薄いグレーにすることです。

もし、背景色を真っ白にした場合、背景色より薄い色が存在しないため、
立体感を出すのは難しくなってしまいます。

覚えておくと、いろんなところで使える便利な小技です。
ぜひ、使ってみてくださいね！