blob: bf47242426fb64be452995d3164f192769b1bd00 (
plain)
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: 3D ビュー
slug: Tools/3D_View
tags:
- HTML
- Tools
- Web Development
- Web Development:Tools
translation_of: Tools/3D_View
original_slug: Tools/Page_Inspector/3D_view
---
<div>{{ToolsSidebar}}</div><div class="warning">
<p>Firefox 47 より、3D ビューは使用できません。</p>
<p>同様の機能を提供するアドオンがあります: <a href="https://addons.mozilla.org/firefox/addon/tilt/">https://addons.mozilla.org/firefox/addon/tilt/</a>。ただし組み込み版と同じく、このアドオンは<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> で動作しません。</p>
</div>
<p>3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。</p>
<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
<p>ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a> や <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a> で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。</p>
<p>ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">ブロックリストに登録されたドライバのページ</a>をご覧ください。</p>
<h2 id="Controlling_the_3D_view" name="Controlling_the_3D_view">3D ビューのコントロール</h2>
<p>3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。</p>
<table class="standard-table" style="width: auto;">
<tbody>
<tr>
<td class="header">機能</td>
<td class="header">キーボード</td>
<td class="header">マウス</td>
</tr>
<tr>
<td>ズームイン/アウト</td>
<td><kbd>+</kbd> / <kbd>-</kbd></td>
<td>ホイールの上回転/下回転</td>
</tr>
<tr>
<td>左右の回転</td>
<td><kbd>a</kbd> / <kbd>d</kbd></td>
<td>左右へのドラッグ</td>
</tr>
<tr>
<td>上下の回転</td>
<td><kbd>w</kbd> / <kbd>s</kbd></td>
<td>上下へのドラッグ</td>
</tr>
<tr>
<td>左右の移動</td>
<td><kbd>←</kbd> / <kbd>→</kbd></td>
<td>左右へのドラッグ</td>
</tr>
<tr>
<td>上下の移動</td>
<td><kbd>↑</kbd> / <kbd>↓</kbd></td>
<td>上下へのドラッグ</td>
</tr>
<tr>
<td>ズームレベルの初期化</td>
<td><kbd>0</kbd></td>
<td>ズームレベルを既定の状態に初期化します。</td>
</tr>
<tr>
<td>選択したノードへフォーカス</td>
<td><kbd>f</kbd></td>
<td>選択したノードが見えるようにビューを移動します。</td>
</tr>
<tr>
<td>ビューの初期化</td>
<td><kbd>r</kbd></td>
<td>ズーム、回転、移動を既定の状態に初期化します。</td>
</tr>
<tr>
<td>選択中のノードを隠す</td>
<td><kbd>x</kbd></td>
<td>現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。</td>
</tr>
</tbody>
</table>
<h2 id="Use_cases_for_the_3D_view" name="Use_cases_for_the_3D_view">3D ビューの用途</h2>
<p>さまざまな状況で 3D ビューは役に立ちます:</p>
<ul>
<li>壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。</li>
<li>コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。</li>
<li>レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。</li>
<li>また、3D ビューの表示は<strong>印象的</strong>です。</li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Tools/Page_Inspector" title="Page Inspector">ページインスペクタ</a></li>
<li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a></li>
<li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a></li>
<li><a href="/ja/docs/Tools" title="Tools">開発ツール</a></li>
<li><a href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (ブログ記事)</li>
</ul>
|
