DevTools (Firefox)
ブラウザ内蔵の強力な開発者ツール群。DOM操作、ネットワーク分析、パフォーマンス測定でWeb開発を革新します
CSSの編集とスタイル調整を効率化し、美しいデザインを素早く実現するスタイル編集ショートカット
Shift+F7
スタイルエディターを開く
CSSファイルを編集するスタイルエディターを開きます。
💡 覚え方: Shift + F7 = スタイル
🎯 スタイルエディターを開き、CSSファイルを直接編集します
Ctrl+S
スタイルシートを保存
現在のスタイルシートをディスクに保存します。
💡 覚え方: Save（保存）
🎯 編集したスタイルシートを保存し、変更を永続化します
↑
値を増加
選択したCSSの数値を1増加させます。
💡 覚え方: ↑ = 増加
🎯 CSS数値を1単位で調整し、細かいスタイル調整を行います
Shift+↑
値を10増加
選択したCSSの数値を10増加させます。
💡 覚え方: Shift + ↑ = 大きく増加
🎯 CSS数値を10単位で調整し、大きなレイアウト変更を素早く適用します
Ctrl+↑
値を0.1増加
選択したCSSの数値を0.1増加させます。
💡 覚え方: Ctrl + ↑ = 小さく増加
🎯 CSS数値を0.1単位で調整し、opacity や scale の微調整を行います
Ctrl+/
コメント切り替え
選択した行のコメント化/コメント解除を切り替えます。
💡 覚え方: / = コメント記号
🎯 CSSルールをコメント化/解除し、スタイルの適用を素早く切り替えます
Ctrl+J
行へ移動
指定した行番号へジャンプします。
💡 覚え方: Jump to line（行へジャンプ）
🎯 指定行へジャンプし、大きなCSSファイル内でも素早く目的の場所へ移動します