FirefoxのWeb開発ツールを使用してWebサイト構造を3Dで表示する方法

Firefox 11はFirefoxの既に印象的な兵器庫に2つの新しいWeb開発者ツールを追加しました。チルト機能はWebサイトの構造を3Dで視覚化し、スタイルエディタはCSSスタイルシートをその場で編集できます。.

Tiltと呼ばれる3D機能は、WebサイトのDOMを視覚化する方法です。既存のドキュメントインスペクタと統合し、WebGLを使用してブラウザに豊富な3Dグラフィックを表示します。.

傾斜 - 3Dウェブサイトビジュアライゼーション

あなたはFirefoxのPage Inspector内からTiltにアクセスすることができます。はじめに、Web開発者メニューから「検査」を選択してページインスペクタを開きます。現在のページを右クリックして「要素の検査」を選択し、特定の要素からインスペクタを起動することもできます。.

インスペクタツールバーの「3D」ボタンをクリック.

3Dモードを有効にするとページの構造は表示されますが、回転させるまでは平らに見えます。.

左クリックしてモデルを回転し、右クリックして画像を移動し、マウスホイールを使用してズームインおよびズームアウトします。.

このビューは、インスペクタの他のツールと統合されています。 HTMLまたはスタイルパネルを開いている場合は、ページ上の要素をクリックしてその要素のHTMLコードまたはCSSプロパティを表示できます。.

より多くの3D機能

3Dビジュアライゼーション機能はTilt拡張機能に基づいていましたが、Tilt拡張機能のすべての機能が備わっているわけではありません。色をカスタマイズしたり、3D編集プログラムで使用するために3Dモデルファイルとしてビジュアライゼーションをエクスポートしたい場合は、Tilt 3Dアドオンをインストールする必要があります。あなたが持っていたら、あなたはWeb Developerメニューに新しい“ Tilt”オプションを得るでしょう。.

プロンプトが表示されたら古いバージョンのTiltを使用するには、[キャンセル]ボタンをクリックします。.

ウィンドウの左側にあるビジュアライゼーションやエクスポート機能を含む他のオプションをページ上部にカスタマイズするためのコントロールがあります。.

CSSスタイルエディタ

ページのCSSスタイルシートを表示および編集するには、Web開発者メニューからスタイルエディタを開きます。.

スタイルエディタは現在のページのスタイルシートを一覧表示します。スタイルシートの名前の左側にある目のアイコンをクリックして、スタイルシートのオンとオフを切り替えます。スタイルシートを選択してコードを変更し、スタイルシートを編集します。.

変更はすぐにページに反映されます。スタイルシートをオフに切り替えると、ページのスタイル情報が失われます。スタイルシートを編集すると、入力中にページに編集内容が表示されます。.

スタイルシートの1つのコピーをコンピュータに保存したり、コンピュータから既存のスタイルシートをインポートしたり、[スタイルエディタ]ウィンドウの[保存]、[インポート]、または[新規]リンクを使用して新しい空白のスタイルシートを追加できます。.

3Dビジュアライゼーション機能は現在のページの変更を監視し、変更が発生したときに通知します。 3Dインスペクタを開いた状態でスタイルエディタを使用すると、変更内容はすぐに3Dビューに反映されます。これは、FirebugなどのWebページを変更するサードパーティ製の拡張機能でも機能します。.