3D ビュー

by 1 contributor:

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

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

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

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

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

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

3D ビューの用途

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

  • 壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。
  • コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。
  • レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。
  • また、3D ビューの表示は印象的です。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: yyss
最終更新者: yyss,