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

HTML/CSSの検査と編集を高速化し、UIの問題を即座に解決する要素検査ショートカット

Ctrl+Shift+C

要素パネルを開く

要素パネルを開き、要素検査モードを有効にします。

💡 覚え方: Click to inspect（クリックして検査）

🎯 要素検査モードを起動して、HTML要素を直接クリックで選択できる

Arrow Up/Down

要素間を移動

DOM内の要素を上下に移動して選択します。

💡 覚え方: 矢印キー = 移動

🎯 DOM構造を矢印キーで素早く移動して、要素間の関係を把握できる

Right Arrow

要素を展開

選択した要素を展開して子要素を表示します。

💡 覚え方: → = 展開

🎯 要素を展開して子要素を表示し、DOM構造を詳細に確認できる

Enter

属性を編集

選択した要素の属性編集モードに入ります。

💡 覚え方: Enter = 編集開始

🎯 HTML属性を直接編集して、リアルタイムで変更を確認できる

H

要素を非表示

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

💡 覚え方: Hide（隠す）

🎯 要素の表示/非表示を切り替えて、レイアウトへの影響を即座に確認できる

F2

HTMLとして編集

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

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

🎯 HTML全体を編集モードで変更して、複雑な構造変更を効率的に行える

Ctrl+F

パネル内を検索

現在のパネル内でテキストを検索します。

💡 覚え方: Find（探す）

🎯 要素パネル内で特定のテキストや属性を素早く検索できる