1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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>
|
