--- 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 ---
{{ToolsSidebar}}

Firefox 47 より、3D ビューは使用できません。

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネルスタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

3D ビューのコントロール

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

機能 キーボード マウス
ズームイン/アウト + / - ホイールの上回転/下回転
左右の回転 a / d 左右へのドラッグ
上下の回転 w / s 上下へのドラッグ
左右の移動 / 左右へのドラッグ
上下の移動 / 上下へのドラッグ
ズームレベルの初期化 0 ズームレベルを既定の状態に初期化します。
選択したノードへフォーカス f 選択したノードが見えるようにビューを移動します。
ビューの初期化 r ズーム、回転、移動を既定の状態に初期化します。
選択中のノードを隠す x 現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。

3D ビューの用途

さまざまな状況で 3D ビューは役に立ちます:

関連情報