[CSS] アプリでよく見かけるガイドのようなものを作る

WEB新規機能を実装したときに、ユーザーにその機能について知ってもらいたいし、もっと言うと使ってもらいたい🥺

そんなときに、画面全体に薄暗くして、注目してほしい部分だけ明るくしたい時がある。

たとえば、新規機能として「Bボタン」を追加した。

この「Bボタン」だけ薄暗くしたビューがかかっていない状態にしたい。

ただCSSだけで画面に切り抜いてゴニョゴニョする。みたいな方法がなさそう😣

結論

1. 薄暗くしたビューの上に、明るく見せるため（切り抜いたように見せるため）の白いビューを配置

2. 注目してほしいDOMのz-indexを大きくして、白いビューよりも上の最前面に配置

…こんな感じで🤔（今回は、JSで白いビューの位置をいじっている。）

ちなみに…

Intro.jsというのもあるので、それ使うとよりリッチなガイドのデザインができると思う。

• usablica/intro.js

• alex-oleshkevich/vue-introjs

なんて調べたらいいかよくわからなかったのもあるが、けっこうな時間を使って調べたものの、（この方法も含めて）ヒットしなかった。

結果的に社内の人と教えてもらって解決

たぶんもっといい方法がある気もするけど、現時点での解決方法はコレになるかな🤔