← 用途別ショートカット一覧に戻る

HTML/CSSの検査と編集を高速化し、レイアウトやスタイルの問題を即座に解決する要素検査ショートカット

Ctrl+Shift+C

要素を選択

ページから要素を選択するモードを開始し、インスペクタータブを開きます。

💡 覚え方: Choose element（要素を選ぶ）

🎯 ページ上の要素をクリックで選択し、HTMLとCSSを素早く検査します

F2

HTMLとして編集

選択した要素をHTMLとして編集します。

💡 覚え方: F2 = 編集モード

🎯 選択した要素のHTMLを直接編集し、リアルタイムで変更を確認します

Delete

ノードを削除

選択したHTML要素を削除します。

💡 覚え方: Delete（削除）

🎯 不要な要素を即座に削除し、ページレイアウトの問題を特定します

H

ノードの表示/非表示

選択した要素の表示/非表示を切り替えます。

💡 覚え方: Hide（隠す）

🎯 要素の表示/非表示を切り替えて、レイアウトへの影響を確認します

S

要素を表示領域にスクロール

選択した要素が見えるようにページをスクロールします。

💡 覚え方: Scroll（スクロール）

🎯 選択した要素を表示領域にスクロールし、ページ内の位置を確認します

↑

値を増加

選択したCSSの数値を1増加させます。

💡 覚え方: ↑ = 増加

🎯 CSS数値を上下キーで調整し、スタイルの微調整を効率的に行います

Shift+↑

値を10増加

選択したCSSの数値を10増加させます。

💡 覚え方: Shift + ↑ = 大きく増加

🎯 CSS数値を10単位で調整し、大きな変更を素早く適用します

Ctrl+↑

値を0.1増加

選択したCSSの数値を0.1増加させます。

💡 覚え方: Ctrl + ↑ = 小さく増加

🎯 CSS数値を0.1単位で調整し、精密なスタイル調整を行います