Edge DevToolsのElementsパネルでCSSメニューを非表示にする方法

Microsoft EdgeのDevTools（開発者ツール）を使用しているとき、Elements（要素）パネルの右側に表示されるCSSメニューが気になることがあります。この記事では、そのCSSメニューを非表示にする方法をわかりやすく解説します。

DevToolsとは？

まず、DevTools（開発者ツール）とは、ウェブページを解析したり、コードをデバッグしたりするための強力なツールです。Microsoft Edgeでは、ウェブ開発者向けに多くの機能が提供されており、ElementsパネルはHTMLやCSSの構造を視覚的に確認するための重要な部分です。

ただし、CSSメニューが右側に常に表示されるため、作業がしづらいと感じることもあります。その場合にメニューを非表示にする方法を知っておくと、より快適に作業を進めることができます。

EdgeのDevToolsで、Elementsパネルを開いたときに右側に表示されるCSSメニューを非表示にするには、以下の手順を試してみてください。

DevToolsを開く：まず、Microsoft Edgeを開き、F12キーを押してDevToolsを起動します。
Elementsパネルを選択：次に、「Elements」タブを選択し、HTMLやCSSの構造が表示される画面に移動します。
右側のCSSメニューを最小化：右側のCSSメニュー部分にマウスカーソルを合わせ、右上隅にある矢印アイコンをクリックすることで、CSSメニューを最小化できます。
Dock位置を変更する：もし、完全にCSSメニューを非表示にしたい場合は、DevToolsの設定を変更して、Dock位置を別の位置に変更することで表示方法を調整できます。DevToolsの右上にある「…」アイコンから、「Settings」を選択し、表示される設定画面で「Dock side」を変更します。

CSSメニューが最小化されても、他の作業スペースを広く使いたい場合は、CSSメニューのカスタマイズも有効です。例えば、Elementsパネルの「Styles」タブだけを表示し、他のオプションを非表示にする設定も可能です。

これを行うには、DevToolsの「Settings」から「Preferences」にアクセスし、「Enable CSS editor」を選択することで、より効率的にCSS編集を行うことができます。

EdgeのDevToolsを使いこなすためには、基本的な操作方法を習得することが重要です。ここでは、特に役立つヒントをいくつか紹介します。

ショートカットキーの活用：開発者ツールを迅速に操作するために、ショートカットキーを活用しましょう。例えば、F12キーでDevToolsを開き、Ctrl + Shift + IでDevToolsを表示・非表示できます。
レスポンシブモード：EdgeのDevToolsにはレスポンシブモードがあり、デバイス別の表示を確認できます。この機能を使うことで、モバイルファーストでのデザイン調整がしやすくなります。
Consoleタブの活用：Consoleタブでは、JavaScriptのエラーやログを確認することができ、デバッグ作業が効率的に行えます。