チェックボックスの見た目をCSSで変更しているとき、TABキー移動でフォーカスがあたらない

→チェックボックスを非表示にしている場合、display:noneではなくopacity:0.0に変更する＋position: absoluteとする

・チェックボックスなどの見た目をCSSで変更する場合、元のチェックボックスを非表示にし、疑似要素などを使用して代替アイコンを表示するという実装をするのがほとんどのはず
・元のチェックボックスを非表示にする場合にdisplay:noneやvisibility:hiddenを使うと、フォーカスがあたらなくなる
※フォーカス移動をTABキーで、チェックボックスのONOFFの切り替えをスペースキーで行いたい人にとっては不便になるという問題あり。
※マウス、タッチ操作などではあまり問題にならない。
・非表示にするにはopacity:0.0;（透明度の設定）とする。
単に見えなくなるだけなので、チェックボックスの表示されている部分を詰めて見せるにはposition:absoluteをつける。

・以下は記述のイメージ。
チェックボックス本体を消すCSSを変更する。
※本来はCSS側にはチェックボックスの見た目を変更するためのスタイル設定がたくさんあるのだが、その部分についてはこの記事で扱っている話とは別なので記載していない。
「CSSでチェックボックスの見た目を変更」などで検索するとおそらく出てくる。
検索したコードにもし、チェックボックス本体を消すCSSとして「display:none」等と書かれていた場合は（フォーカスあてられるようにしたいなら）変更した方がいいよ　という話

<label>
  <input type="checkbox" name="xxxx" value="○○" class="test-class-check">
  <span class="checkbox-text">○○</span>
</label>

/* checkboxに設定されているclassに対して */
.test-class-check {
  /*display: none; */
  opacity: 0.0;
  position: absolute;
}

「フォーカスを当てたい」ということは、「現時点でフォーカスが当たっているのか否かが分かる状態にしたい」ということでもあるので、一例として以下の対応を追加
（※隣接テキスト以外のチェックボックス用アイコンを用意していない場合）
・チェックボックス本体（※見えてない）、もしくは隣接テキストにフォーカスが当たったときに、
見えている隣接テキストにスタイル変化を起こしたい場合は以下のような記述を追加

※意味合い的には、
・テキストにフォーカスが当たっている（＝チェックボックスに隣接(+)しているテキストがfocusなどの状態になっている）
・チェックボックスにフォーカスが当たっている（＝focusなどの状態になっているチェックボックスに隣接(+)しているテキスト）
のいずれかに対し、（テキストのまわりに）実線1px灰色をつける。
※「@media(hover: hover)」で囲ってあるのは、スマホでラベルをタッチした際に（hoverの状態が継続されてしまい）スタイル変化が継続されてしまうため、hover（カーソルを乗せる）の動作がないスマホでスタイル変化が起きないようにするため（別記事）

@media (hover: hover) {
  .test-class-check + .checkbox-text:is(:hover, :focus, :active),
  .test-class-check:is(:hover, :focus, :active) + .checkbox-text {
    border: solid 1px #cfcfcf;
 }
}

hover時に色が変わるようにしている要素をスマホで触ると色が変わったままになるので、PCの時だけhover時のスタイルを適用したい

→@media(hover:hover)、@media(hover:none)を使って場合分けする

・PCの場合、hoverは「要素にカーソルを乗せている」
　スマホ（タッチデバイス）の場合、hoverは「要素をタップして違う要素を触るまで」
　そのため、hover時のスタイルが残ったままになり、意図しない状態になることがある
・hoverが効く場合だけにhoverのスタイルが適用されるようにする。
　hoverに対するスタイルの記述を@media(hover: hover){}で囲うことで、hoverが効かないスマホの場合はスタイルが効かないようにできる
・以下は特定のクラスの状態がhover、focus、activeのいずれかである場合、周りに1pxの灰色の実線をつけるCSSのサンプル。スマホの場合に特に装飾が必要なければ、hover: noneの方はいらないかも。

@media (hover: hover) {
  /* 通常（PC）の場合 */
  .test-class:is(:hover, :focus, :active){
    border: solid 1px #cfcfcf;
  }
}
@media (hover: none) {
  /* スマホ等の場合 */
  .test-class:is(:focus, :active){
    border: solid 1px #cfcfcf;
  }
}

CSSファイルを修正し、ブラウザで更新をかけても修正内容が反映されない
頻繁にCSSを変更しながら画面確認している場合に発生することがあるため。

→ブラウザで更新「Shift+F5」、および、サーバー側でキャッシュの削除

・基本的に、ブラウザでShift+F5を試す
・F12（開発者ツール）で修正したCSSにかかわる要素を確認し、CSSの反映内容を確認
・修正内容が反映されない場合、サーバー側でキャッシュが削除されていないのが原因
　ロリポップの場合「ロリポップ！アクセラレータ」で表示高速化をはかっているので
　(1)ロリポップのユーザー専用ページにアクセス
　(2)「サーバーの管理・設定」→「ロリポップ！アクセラレータ」を選択
　(3)使用中ドメインについて「設定」ボタンをクリック
　(4)「キャッシュ」の欄に「キャッシュを削除」のボタンがあるのでクリック