Chrome Devtoolsとは
Chrome DevtoolsはGoogle Chromeブラウザに搭載された開発者向けツールです。このツールを使用することで、Webページの構造（HTML）、スタイル（CSS）、そしてJavaScriptの動作などを詳細に確認し、デバッグすることができます。
特にCSSのデバッグにおいて、Chrome Devtoolsは特に以下の点から使い勝手の良いツールです。
- 要素の選択
- スタイルの即時編集
- 擬似クラスの状態確認
SafariやEdgeなどにもDevtoolsはありますが、今回は一例としてChromeのものを取り上げています。
検証できる擬似クラスについて
まずDevtoolsを立ち上げてみます。
WindowsであればCtrl + Shift + I、MacであればCommand + Option + IでDevtoolsを立ち上げることができます。
※ちなみに上記の記事は、最近読んだ中でとても印象に残っているのでおすすめさせて頂きます。
擬似クラスの検証モードはどこだ..............
..............
..............
..............
ここだぁーーーー
みづらいと思うので、左側に拡大版を掲載しておきます。
Chrome Devtoolsでは、画像に載っている様々な擬似クラスの状態をシミュレートして確認することができます。それぞれの:〇〇クラスを選択することで、状態を簡単に切り替えることができます。
以下、主要な擬似クラスについて、実際のコード例とともに説明していきます。
:active
:activeは要素がクリックされている間（マウスボタンを押している状態）のスタイルを指定する擬似クラスです。
コード例
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
}
.button:active {
background-color: #2980b9;
transform: scale(0.98);
}
この例では、ボタンがクリックされている間、背景色が少し暗くなり、わずかに縮小するアニメーション効果を実装しています。
:hover
:hoverは要素にマウスカーソルが重なっている際のスタイルを指定する擬似クラスです。
コード例
.nav-link {
color: #333;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.3s;
}
.nav-link:hover {
border-bottom-color: #3498db;
}
この例では、ナビゲーションリンクにマウスを重ねると、下線が徐々に表示される効果を実装しています。
:focus
:focusは要素がフォーカスされている状態（タブキーで選択されている場合など）のスタイルを指定します。
コード例
.input-field {
border: 1px solid #ddd;
padding: 8px 12px;
outline: none;
}
.input-field:focus {
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
この例では、入力フィールドがフォーカスされると、青い枠線とシャドウ効果が追加されます。
:focus-within
:focus-withinは要素自身またはその子孫要素がフォーカスを受けている場合のスタイルを指定します。
コード例
.form-group {
padding: 15px;
background-color: #f8f9fa;
}
.form-group:focus-within {
background-color: #fff;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}
この例では、フォームグループ内の任意の入力要素がフォーカスされると、グループ全体の背景色が変化し、微かなシャドウが追加されます。
:focus-visible
:focus-visibleは、主にキーボード操作によってフォーカスされた場合のみスタイルを適用する擬似クラスです。
コード例
.button:focus {
outline: none;
}
.button:focus-visible {
outline: 2px solid #3498db;
outline-offset: 2px;
}
この実装により、マウスでのクリック時にはアウトラインを表示せず、キーボードでの操作時のみアウトラインを表示させることができます。
:target
:targetは、URLのフラグメント識別子（#）によって指定された要素のスタイルを定義します。
.section {
padding: 20px;
background-color: #f8f9fa;
transition: background-color 0.3s;
}
.section:target {
background-color: #e3f2fd;
animation: highlight 1s ease-out;
}
@keyframes highlight {
from { background-color: #bbdefb; }
to { background-color: #e3f2fd; }
}
この例では、URLで指定されたセクションの背景色が変化し、アニメーション効果によってユーザーの注目を集めます。
まとめ
ここまで、Chrome Devtoolsで検証できる擬似クラスについてまとめてきました。
各擬似クラスについて理解を深めることで、実際にDevtoolsでも使いこなせるようになると思いますし、使いこなすことによって以下効果が期待できます！
- 擬似クラスの状態を手動で切り替えることができるため、実際のインタラクションなしでスタイルを確認できる
- スタイルの変更をリアルタイムで確認できるため、効率的な開発が可能になる
- アクセシビリティの観点からも、:focus-visibleなどの擬似クラスの適切な実装を確認することができる
これらの機能を活用することで、より質の高いUIを実装していきましょう！
本記事をご一読いただきありがとうございました