記事

意外と知られていない!? firefox調査ツールの3Dビュー!!

リンク先を見る

 リンク先を見る

firefoxの画面左上のfirefoxアイコンをクリックしてWeb開発から、『調査』をクリックして起動します。またはshift+ctrl+I(windows)で起動できます。

 

画面UIは下に固定されています。firebugのように画面UIを自由に移動することできなくなっております。

そして……、画面の右下にある『3Dビュー』をクリックすると、Webサイトがかっこいい動きとともに3Dに。

リンク先を見る

Webサイトの各パーツが浮き上がり奥行きが感じられます。

とはいえ正面だけではまだ立体を感じずらいかと思いますので、

下から見てみることにします。

 画面中央をつかんで上へドラッグすると、立体が動き出します。

リンク先を見る

 下から見ると、立体になっているのがわかりますね。

しかし、これがなぜ、立体物になっているのか、最初、自分にはさっぱりでした。

○その前に、まずは基本の操作方法

  • 画面ドラッグで自由回転
  • マウスのホイールでズームイン、ズームアウト
  • マウスの矢印キーで平面移動(ただし、上下左右逆転)
  • ブロックをクリックでその要素を選択

操作自体はシンプル。

○立体になっている理由

リンク先を見る

しばらく、触っていてわかったのはHTMLの階層構造で立体になっているということでした。

HTMLの構造については割愛させていただきますが、他にも気になったのは立体物にはブロックごとに色がついているということ。

これは要素の階層構造ごとに、ブロックができていることの視認性をあげているためです。

上記の図で要素の色について、説明すると。

一番下から

階層(下から)
html グレー
body
div 薄緑
nav(html5要素)
h1 ワインレッド
a 群青
img やまぶき

 のような感じです(色に関しては正確な色が当てはめずらかったです……)

 

○その他の主要タグ

要素名
h1~h6

h1はワインレッド h6に下がるにつれて、

徐々に青が足されていき、h6はパープルになります。

p
strong,em
div 薄緑
dl,dt,dd
ul 薄青
li ulの青よりも明度をあげた青
form関連
table
tbody
tr tableより明度をあげた赤
th
td trの赤より明度をあげた赤
obejct
iframe
html5新規セクション要素

………etc。

 

全要素の確認はできていません。

ただ、法則性があればと思いいくつかのサイトを確認しましたが、

具体的な法則は見つけられませんでした。

強いて言うなら、ulなどの子要素が存在しているものは、徐々に色が薄くなる。くらいでしょうか。

 

その他にも

  • javascript要素で生成された要素もブロックとして出てくる。
  • 『3Dビュー』にするとマウスホバーや、スライドショーなどのjavascripの動きは止まる。
  • flashも同様に固定される。フルflashにおいてはobjectの中身画面すら消えます。
  • iframeで呼び出されたものも、さらに積み上げられる。(iframeの色は黒)

ということがあります。

○使用時に気をつけたいこと

『CSSスタイルパネル』による、スタイルの操作はできますが、それが反映されることはありません。

『3Dビュー』を解除したら、そのスタイル操作は反映されます。

○3Dビュー機能まとめ

・『3Dビュー機能』起動は『調査』ツールを開いてツール右下の『3Dビュー』をクリック。
・立体化は要素ごとに行われており、階層構造が深いものほど、高いブロックが積みあがる。
・javascriptでの動的な動作と、『調査』ツールのCSSスタイルパネルでの操作は3D状態では反映されない。
・直感的に階層構造がわかるので、 見方次第で便利なツールになりえる。

○使ってみて

現状ではまだこの『調査』ツールの『3Dビュー』機能はまだ発展途上なツールだと感じました。

理由は

  • 使うたびに、『調査』ツールを立ち上げ、『3Dビュー』を立ち上げないといけないこと。
  • 起動時の初期位置が必ず、正面になるので、横から見たい要素がある場合は、回転させたり、移動させないといけないこと。
  • 『3Dビュー』の状態だと、『調査』ツールのCSSスタイルパネルの値変更はできるが、それは反映されない(『3Dビュー』を解除すると反映されます)。

この中でもとくにCSSスタイルが反映されないのは、編集しながら確認したい人にはつらいかもしれません。

しかし、ソースが長いもので全体がどのようにできているというのを、直感的にわかるのは大きなメリットだと思います。

【最後に】

firefoxはfirebugをはじめ、アドオンでの開発ツールが多数ある中で、デフォルトで装備されているツールたちが進化していくことは、

制作初心者にはわかりやすく、使いやすいと思います。

今回は『3Dビュー』機能の紹介でしたが、

他にも、firefoxにはレスポンシブビューを確認できる機能や、デバッガなどの、さまざまな機能がついております(ユーザーエージェント機能もいずれついたりするのだろうか)。

これからもさまざまな機能がどんどん進化していくのが楽しみです。

あわせて読みたい

「ツール」の記事一覧へ

トピックス

  1. 一覧を見る

ランキング

  1. 1

    質疑から逃げた立民は論外だが、自民党も改憲やる気なし。不誠実な憲法審査会の結末

    音喜多 駿(参議院議員 / 東京都選挙区)

    05月07日 10:21

  2. 2

    病床ひっ迫で入院厳しく…「来た時点で肺が真っ白」 大阪の医師が警鐘「第3波以前とは全く別の病気という印象」

    ABEMA TIMES

    05月07日 08:12

  3. 3

    格差問題の必然性

    ヒロ

    05月07日 11:19

  4. 4

    「コカ・コーラは永久不滅!」雅楽師の東儀秀樹が深い”コーラ愛”を語る

    ふかぼりメメント

    05月08日 00:00

  5. 5

    「日本を食い物にする」無責任IOCに批判殺到…世界からも続々

    女性自身

    05月07日 13:46

  6. 6

    出口治明さんが語る「35年ローン」で家を買ってはいけない理由

    幻冬舎plus

    05月07日 09:04

  7. 7

    「首相も都知事もリアルな社会人の生活を理解してない」 "間引き運転"で露呈した政治家たちの「わかってない」感

    キャリコネニュース

    05月07日 09:14

  8. 8

    総選挙前に自民党総裁選? 安倍晋三元首相が再登板の可能性

    内田樹

    05月07日 14:46

  9. 9

    朝ごはんの器で1日が変わる コロナ禍で“食”を見つめ直すきっかけに

    羽柴観子

    05月07日 08:40

  10. 10

    今こそ、国民民主党の提案する30兆円の緊急経済対策を

    玉木雄一郎

    05月07日 16:57

ログイン

ログインするアカウントをお選びください。
以下のいずれかのアカウントでBLOGOSにログインすることができます。

コメントを書き込むには FacebookID、TwitterID のいずれかで認証を行う必要があります。

※livedoorIDでログインした場合、ご利用できるのはフォロー機能、マイページ機能、支持するボタンのみとなります。