【マテリアルデザイン】高度に合わせたbox-shadowを設定したclassを作る

Googleのマテリアルデザインは、フラットデザインに影がついてるだけと思われがちですが、厳密にたくさんのルールが存在しています。そのあたりはマテリアルデザインのガイドラインが存在しているのでぜひ一読することをおすすめします。Googleの考えるデザインの勉強にもなりますので、ぜひぜひ😊。
今回はマテリアルデザインの高度(重なり方)におけるbox-shadowのclassを予め作っておこうというお話。
Elevationsの重なり高度の確認
マテリアルデザインのガイドラインによると、Elevations(重なり高度)は1~24まであります。
Elevation (dp) | Component |
24 | Dialog
Picker |
16 | Nav drawer
Right drawer Modal bottom Sheet |
12 | Floating action button (FAB – pressed) |
9 | Sub menu (+1dp for each sub menu) |
8 | Bottom navigation bar
Menu Card (when picked up) Raised button (pressed state) |
6 | Floating action button (FAB – resting elevation)
Snackbar |
4 | App Bar |
3 | Refresh indicator
Quick entry / Search bar (scrolled state) |
2 | Card (resting elevation) *
Raised button (resting elevation)* Quick entry / Search bar (resting elevation) |
1 | Switch |
単位dpはandroidの画面解像度がいろいろあるので生まれた単位くらいに思っといてくれればたぶん大丈夫。
webサイトの作成においては、px単位と同じようなもんです。つまり1px~24pxまでの高度があるということです。高度が高ければ高いほど、ぼかしの度合いも大きくなる。そこがポイントになります。
したがって、高度の数値とぼかしの数値が一致すれば、box-shadowの設定ができそうです。
box-shadow用のclassのためのSCSSを組み立てる
1 2 3 4 5 6 7 8 |
// 高度における影設定 @for $i from 1 through 24 { .elevation-#{$i} { $z-index: #{$i}px; // 水平 垂直 ぼかし 広がり 色 inset box-shadow: 0 4px $z-index rgba(#000, .2); } } |
@forを使うことで、くり返しができるので1から24までということで @for $i from 1 through 24を設定。後は#{$i}に単位のpxをくっつけて、box-shadowの広がり部分に数値が入っていくようにしました。
これによって、コンパイルされるclassは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
.elevation-1 { -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2); } .elevation-2 { -webkit-box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2); } .elevation-3 { -webkit-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2); } .elevation-4 { -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); } .elevation-5 { -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); } .elevation-6 { -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } .elevation-7 { -webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); } .elevation-8 { -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .elevation-9 { -webkit-box-shadow: 0 4px 9px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 9px rgba(0, 0, 0, 0.2); } .elevation-10 { -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .elevation-11 { -webkit-box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2); } .elevation-12 { -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .elevation-13 { -webkit-box-shadow: 0 4px 13px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 13px rgba(0, 0, 0, 0.2); } .elevation-14 { -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .elevation-15 { -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .elevation-16 { -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .elevation-17 { -webkit-box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2); } .elevation-18 { -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); } .elevation-19 { -webkit-box-shadow: 0 4px 19px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 19px rgba(0, 0, 0, 0.2); } .elevation-20 { -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .elevation-21 { -webkit-box-shadow: 0 4px 21px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 21px rgba(0, 0, 0, 0.2); } .elevation-22 { -webkit-box-shadow: 0 4px 22px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 22px rgba(0, 0, 0, 0.2); } .elevation-23 { -webkit-box-shadow: 0 4px 23px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 23px rgba(0, 0, 0, 0.2); } .elevation-24 { -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } |
あとは、ガイドラインに合わせて、class=”~”の部分にできあがったclassを入れていけば、マテリアルデザインにおける高度の影が完成します。
mixinで作ったタイプ
classとは別にhover時を始めとして、何かしらのアクションを取ったときに高度が変わるときは、classだと不便なときもあります。
1 2 3 |
@mixin elevation($elevation: 1, $color: #000, $opacity: .2) { box-shadow: 0 4px #{$elevation}px rgba($color, $opacity); } |
そんなときは、mixinを使って、高度の設定をします。
例えば、カードタイプだと、通常が高度2で選択時(hover時)は高度8になるので
1 2 3 4 5 |
.card { &:hover { @include elevation(8); } } |
こんな感じでSCSS書けばOK❗
好みに合わせてtransitionを設定すると、ふわっとしたアニメーションになります。