2.2 Stylesペイン

Stylesペインの構成

Elementsパネルで要素を選択すると、右側（または下部）にStylesペインが表示される。

表示順序

CSSルールは詳細度と適用順に並ぶ。上にあるルールほど優先度が高い。

1. element.style: インラインスタイル（最優先）
2. スタイルシートのルール: 詳細度の高い順
3. user agent stylesheet: ブラウザのデフォルトスタイル
4. Inherited from ...: 親要素から継承されたスタイル

打ち消し線

上書きされたプロパティには打ち消し線が表示される。どのルールが有効かを視覚的に確認できる。

スタイルの編集

プロパティ値の変更

数値の調整

プロパティの有効/無効

プロパティ左側のチェックボックスでオン/オフを切り替え。スタイルを一時的に無効化してテストできる。

プロパティの追加

新しいルールの追加

Stylesペイン右上の「+」ボタンをクリック。選択要素に対する新しいCSSルールが作成される。

「+」を長押しすると、ルールを追加するスタイルシートを選択できる（Workspacesを使用している場合、変更がファイルに保存される）。

カラーピッカー

色の値をクリックすると、高機能なカラーピッカーが表示される。

カラーピッカーの機能

• スペクトラム: 色相、彩度、明度を視覚的に選択
• スポイト: ページ上の任意の色を取得
• パレット: ページで使用されている色の一覧
• 形式切り替え: hex、rgb、hsl、hwb間で切り替え（Shift+クリック）
• コントラスト比: 背景とのコントラスト比を表示（WCAGガイドライン準拠確認）

コントラスト比の確認

テキスト色を選択すると、背景色とのコントラスト比が表示される。

シャドウエディタ

box-shadowやtext-shadowの値の横にあるアイコンをクリックすると、視覚的なシャドウエディタが表示される。

調整可能なパラメータ

• X オフセット
• Y オフセット
• ぼかし（Blur）
• 広がり（Spread）
• 色
• インセット（内側シャドウ）

タイミング関数エディタ

transition-timing-functionやanimation-timing-functionのイージング値をクリックすると、ベジェ曲線エディタが表示される。

プリセット

ease、ease-in、ease-out、ease-in-out、linear などのプリセットから選択可能。カスタムベジェ曲線も作成できる。

角度エディタ

transform: rotate()などの角度値の横にある時計アイコンをクリックすると、視覚的な角度エディタが表示される。

スタイルのフィルタリング

Stylesペイン上部の「Filter」入力欄でプロパティを検索できる。

// 例: margin関連のプロパティのみ表示
margin

// 例: 色関連のプロパティのみ表示
color

.cls ボタン（クラス操作）

Stylesペインの「.cls」ボタンで、要素のクラスを追加・削除できる。

機能

• 既存クラスの一覧表示とチェックボックスでの切り替え
• 新しいクラスの追加
• クラスの組み合わせをテスト

:hov ボタン（状態の強制）

Stylesペインの「:hov」ボタンで、要素の疑似クラス状態を強制できる。

レンダリングブロッキングの確認

スタイルシートがページレンダリングをブロックしているかを確認できる。ルールの右側に表示される「Render-blocking」ラベルに注目。

ソースファイルへのリンク

各ルールの右側にはソースファイルへのリンクが表示される（例: style.css:42）。クリックするとSourcesパネルで該当行が開く。

スタイルのコピー

ルールを右クリックで様々な形式でコピーできる。