何をする書き方？
:hoverはポインターが乗ったとき、:focus-visibleはキーボード操作などでフォーカス表示が必要なときの状態です。どのボタンを操作しているか、輪郭を付けて示しましょう。
基本の形
button:hover { ... }
button:focus-visible { ... }:hoverポインターが要素の上にある状態。:focus-visibleフォーカスの表示が必要な状態。outlineレイアウトを押し広げない輪郭線。短い例で確かめる
style.css
button:hover {
background: yellow;
}結果
ボタンにマウスを重ねると黄色になります。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
button {
background: #006b50;
color: white;
}
button:hover { background: #004c39; }
button:focus-visible {
outline: 3px solid #2386d1;
outline-offset: 3px;
}結果
ボタンにマウスを重ねると色が濃くなり、Tabキーで移動すると青い輪郭が出ます。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「操作時のスタイル」の書き方はどれ？
少し変えてみよう
Tabキーだけでボタンまで移動し、Enterキーで操作できるか確かめましょう。
つまずいたら、ここを確認
outline: noneだけを書くと、キーボード利用者が操作位置を見失います。代わりの表示を必ず用意します。
自分の言葉でメモ
記録はこのブラウザーに保存されます。