👹「しんのすけ〜！あんた、CSSの`:focus-visible`もうお勉強したんでしょうね〜！？」

## 〜埼玉県春我部市にて〜
👩🏻「しんちゃ〜〜ん！」
👩🏻「あなた、**CSSの情報はちゃんとキャッチアップ**してるの？」
👩🏻「ひまわり組で最初に覚えた内容で止まってないでしょうね〜？」

:flag_de:「**アクション仮面**みてからするゾ〜！」

👹「あんた！前もそう言ってしなかったじゃないの！！」

👹「知らぬ間に全ブラウザ対応してるものもたくさんあるのよ！」
👹「ちゃんとお勉強しなさ〜い！」

:flag_de:「ほほーい...」

:::note
しんちゃんは**春日部市**じゃなくて、**春我部市**に住んでるよ！
:::
:::note
:flag_de:（ドイツ）の国旗がしんちゃん過ぎるよ！
:::

## :flag_de: 今日は`:focus-visible`をお勉強するゾ〜！

:flag_de:「とは言え、みさえ。」
:flag_de:「何からお勉強すればいいんだゾ〜？」

👩🏻「仕方ないわね〜」
👩🏻「じゃあ、今日は`:focus-visible`についてお勉強しましょ〜」

:flag_de:「初めて聞いたゾ〜」
:flag_de:「概要を説明してほしいゾ〜」

## What is `:focus-visible`

👩🏻「じゃあ早速説明するわね！」

👇👇👇

* まず、`:focus-visible`は**擬似要素**である
* **キーボード操作（タブキーでの移動）の場合のみ**、**スタイルが適用**される
* **マウス操作時**は基本的に**スタイルが適用されない**

👆👆👆

👩🏻「ざっとこんな感じね👆」
👩🏻「つまり、**キーボード操作時で`input`や`button`にフォーカスした時のスタイルが設定できる**ってことね！」

:flag_de:「お〜〜、概要はわかったゾ〜」
:flag_de:「**みさえ**、やればできるじゃないか〜」

　
　👹<br>🤜:flag_de:🤛

:::note warn
マウス操作時に**基本的に**と書いたのは、以下の理由があります！
* **キーボードでの入力をサポートする要素**は**マウス操作時でもスタイルが適用**される
  * input要素など... 
:::

## :flag_de: `:focus`使えば〜〜？

:flag_de:「でも、かーちゃん」
:flag_de:「**`input`や`button`へのフォーカス**なら`:focus`があるゾ？」
:flag_de:「よしなが先生も`:focus`を使いましょうって言ってたゾ〜」

👩🏻「確かに`:focus`もあるわね」
👹「でもあんた、この前アクション仮面のサイト作ってる時に、**`button`をクリックしたときの`outline`が気になるってCSSで消してた**でしょ!?」

:flag_de:「た、確かに消したゾ...」

👹「レビューの時にコメントしたのにあんた無視したでしょ！！」
:flag_de:「(そうだ...、みさえにレビュー頼んだったんだ...)」
👹「**本来はアクセシビリティの観点から、消しちゃダメ**なものなのよ！」

👩🏻「でも今後は、`:focus`じゃなく`:focus-visible`を使えば、**この問題は解消**されるのよ〜」
👩🏻「**クリック時には適用されず**、**キーボード操作の時にのみ適用**されるからね」

## :flag_de: 実際、コード見なきゃわかんないゾ

:flag_de:「かーちゃん...」
:flag_de:「そう言われても、実際コード見ないとわからないゾ...」

### `:focus`の挙動

👩🏻「しんちゃんならそう言うと思って、用意してあるわ〜👇」
👩🏻「まずは`:focus`から見ていきましょ〜👇」
👩🏻「グレーの背景をクリックすれば、一つ目のinputにキーボードで移動できるわ〜」

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYJzKOx" data-user="limoza" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/limoza/pen/zYJzKOx">
  Untitled</a> by limoza (<a href="https://codepen.io/limoza">@limoza</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

👩🏻「**クリック時もキーボード操作時も**、フォーカスされたら`outline`が表示されるのがわかるわよね〜」
:flag_de:「わかるゾ〜！！」

### `:focus-visible`の挙動

👩🏻「これを踏まえて`:focus-visible`を見てみましょう〜👇」
👩🏻「同じく、グレーの背景をクリックすれば、一つ目のinputにキーボードで移動できるわ〜！」


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzOQwNE" data-user="limoza" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/limoza/pen/YzOQwNE">
  `:focus-visible`</a> by limoza (<a href="https://codepen.io/limoza">@limoza</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

👩🏻「どうかしら？」
👩🏻「`input`は**キーボード入力をサポート**する要素よ」
👩🏻「だから、**クリック時キーボード操作時の両方で`outline`が適用**されているわ」

👩🏻「でも、`button`は、どうかな？」
👩🏻「**クリック時はスタイルが適用されず**、**キーボード操作時のみ`outline`が適用**されているわ！」

:flag_de:「ホントだゾ〜〜〜！！」
:flag_de:「**強調が必要な人をターゲット**して**スタイルを当てられてる**ゾ〜」

👩🏻「これで、`:focus-visible`の必要性がわかったかしら？」
👩🏻「見ての通り、とっくにほぼ**すべてのブラウザでサポート**されているわ〜！」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003760/b2b52412-402d-f4b4-66fe-e7b008462a5a.png)

:flag_de:「かーちゃん、オラとってもお勉強になったゾ！」
:flag_de:「これからは`:focus-visible`を使っていくゾ〜！」

👩🏻「えらいわね！しんちゃん！」
👩🏻「これからも引き続きお勉強頑張りましょうね〜〜〜〜〜」

:flag_de:「ほほーい！！**（チョコビ食べたい）**」

　
　
　

▼参考にさせていただいたサイト
https://zenn.dev/sakito/articles/c5034684f2266c
https://evoworx.dev/blog/focus-visible/