initial commit

1 files changed, 69 insertions, 0 deletions

diff --git a/files/ja/tools/page_inspector/3-pane_mode/index.html b/files/ja/tools/page_inspector/3-pane_mode/index.html
new file mode 100644
index 0000000000..a7a9fd3966
--- /dev/null
+++ b/files/ja/tools/page_inspector/3-pane_mode/index.html
@@ -0,0 +1,69 @@
+---
+title: 3ペインモードのページインスペクタ
+slug: Tools/Page_Inspector/3-pane_mode
+tags:
+  - 3-pane
+  - CSS
+  - インスペクタ
+  - ガイド
+  - ツール
+translation_of: Tools/Page_Inspector/3-pane_mode
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">この記事では、ページインスペクタの3ペインモードを使用する方法について説明します。</p>
+
+<h2 id="機能の概要">機能の概要</h2>
+
+<p>Firefox 62以降では、<a href="/en-US/docs/Tools/Page_Inspector">ページインスペクター</a> に新しいモード (<strong>3ペインモード</strong>) が用意されています。これを有効にすると、同時に以下を見ることができます：</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML pane</a> on the left hand side, as usual.</li>
+ <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS Rules</a> in the middle in their own separate pane, rather than as a tab.</li>
+ <li>The other CSS related features — such as <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed styles view</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations view</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Fonts view</a> — in tabs on the right hand side, as usual.</li>
+</ul>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: 幅の狭いブラウザウィンドウの幅では、CSSルールペインの下にタブが表示されます。</p>
+</div>
+
+<p>独自のペインに CSS ルールを設定すると、HTML を検査して CSS を編集するだけでなく、計算されたスタイルやグリッドなどの CSS 機能にリアルタイムで反映させることができます。効果を見るには、該当するタブを開いておく必要があります。</p>
+
+<h2 id="簡単なウォークスルー"><span class="short_text" id="result_box" lang="ja"><span>簡単なウォークスルー</span></span></h2>
+
+<p>3ペインのインスペクタはデフォルトで無効になっています。 これは、左側のタブペインにあるトグルコントロールで有効になります。</p>
+
+<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p>
+
+<p>トグルコントロールを押して、2ペインと3ペインの表示を切り替えます。</p>
+
+<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<p>3ペインモードを有効にすると、ページに適用されたルールを編集するときに CSS 機能の実際の変更を確認できます。 たとえば、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>プロパティを編集し、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドインスペクタ</a>ですぐに変更を観察できます。</p>
+
+<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p>
+
+<h2 id="Firefox_62_以前で3ペインのインスペクタを有効にする">Firefox 62 以前で3ペインのインスペクタを有効にする</h2>
+
+<p>以前のバージョンの Firefox (Firefox 59/60 以降) では、about:config に移動して次の prefs を <code>true</code> に切り替えることで、Release/Beta で3ペインモードを有効にすることができます：</p>
+
+<p><code>devtools.inspector.split-rule-enabled</code> — 3ペインモードのオンとオフを切り替えます。</p>
+
+<p><code>devtools.inspector.split-sidebar-toggle</code> — これにより UI トグルボタンが追加され、オン/オフを切り替えることができます。</p>
+
+<p>Firefox 61 では、これらの設定が次のように変更されました。</p>
+
+<ul>
+ <li><code>devtools.inspector.three-pane-enabled</code></li>
+ <li><code>devtools.inspector.three-pane-toggle</code></li>
+</ul>
+
+<p>Firefox 61の機能をテストするには、リリース/ベータ版でこれらの2つを <code>true</code> に切り替える必要があります。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 3ペインのインスペクタは、Firefox 62 より前のNightly/Developer 版ですでに有効になっています。</p>
+</div>