3Dの表示でウェブのレイアウトを可視化出来るFirefoxのデバッグモードがすごい!!

0
110

Firefox3Ddebug1

サイトを作っている時にFirefoxのデベロッパーモードに

【3Dビュー】なるものを最近、発見しました。

既知でしたらこの記事はスルーして下さい。

今回は、Yahooのページで試してみます。

いつものデベロッパーモード

ChromeやIE、Safariでも似たようなモードが

拡張機能なしで使えます。
Firefox3Ddebug7

おそらく、数あるブラウザの中でFirefoxにしかないと思われる3Dボタン。

画面右下にある【3Dビュー】ボタンをクリック

Firefox3Ddebug6

画面構成が変わり、3Dビューモードに切り替わります。

最初はちょっと驚きます。

Firefox3Ddebug5

マウスでドラッグするとページが傾けられるので

DIVタグで囲まれた部分や、重なり順を直感的に把握出来ます。

これはすごい!!

Firefox3Ddebug4

スクロールするとページがズームされます。

Firefox3Ddebug3

ページをくるっと回して

画像やテキストを反転させて表示することも可能です。

Firefox3Ddebug2

こんな機能が標準で付いているFirefoxは凄いなーっと思いました。

サイト作成が捗りそうです。

コメントを書く

必須項目をご入力ください
必須項目をご入力ください