[CSS] アプリでよく見かけるガイドのようなものを作る
WEB新規機能を実装したときに、ユーザーにその機能について知ってもらいたいし、もっと言うと使ってもらいたい🥺
そんなときに、画面全体に薄暗くして、注目してほしい部分だけ明るくしたい時がある。
たとえば、新規機能として「Bボタン」を追加した。
この「Bボタン」だけ薄暗くしたビューがかかっていない状態にしたい。
ただCSSだけで画面に切り抜いてゴニョゴニョする。みたいな方法がなさそう😣
結論
-
薄暗くしたビューの上に、明るく見せるため（切り抜いたように見せるため）の白いビューを配置
-
注目してほしいDOMのz-indexを大きくして、白いビューよりも上の最前面に配置
…こんな感じで🤔（今回は、JSで白いビューの位置をいじっている。）
ちなみに…
Intro.jsというのもあるので、それ使うとよりリッチなガイドのデザインができると思う。
なんて調べたらいいかよくわからなかったのもあるが、けっこうな時間を使って調べたものの、（この方法も含めて）ヒットしなかった。
結果的に社内の人と教えてもらって解決
たぶんもっといい方法がある気もするけど、現時点での解決方法はコレになるかな🤔
