Into The World

旅と世界とインターネット

もはや芸術!? webページのコードを3Dに見れるfirefox 3Dがスゴい!!

      2013/11/22

 

firefox 3D icatch

デベロッパーの方は、webを作る時に、
firebugを使ったり、chromeで要素の検証をしてコードを確認したりすることがよく有るかと思います。その際に使えるfirefoxの面白い機能があったので、ご紹介。

 
webサイトの構造を3Dで表示してくれる機能、
その名も「firefox 3D」です。

firefox限定ですが、初めて使ったときは感動しました笑

 

使い方としては、まず firefoxを起動します。

適当にサイトを表示して、右クリックすると、一番下に「要素を調査」という項目があるのでクリック

firefox 3D 画像2

すると、下にサイトの要素を検証できるウィンドウが現れます。
そこの一番右のメニューにある、四角アイコンをクリック!!

 

firefox 3D 画像

すると、どーん!!
 

firefox 3d google

表示しているサイトの要素を3Dで検証する事が出来るのです。

 
firefox 3D google 横

スクリーンショット 2013-11-21 13.09.53

Googleのサイトは検索窓に非常にコードが詰まっている事がよくわかりますね。

 

○twitter

スクリーンショット 2013-11-21 13.10.56

スクリーンショット 2013-11-21 13.11.09

なんだか横から見ると、どこかの町並みみたいです。

 
このブログ「Into the World」もこの通り
 

スクリーンショット 2013-11-21 13.17.17

スクリーンショット 2013-11-21 13.17.32

 
なかなか面白いでしょう?笑

「Firefox」のバージョン11以降には実装されているようです。

 

この機能を使えば、要素自体がどこに集中しているのか一目瞭然です。
CSSでtext-indent:-9999px;とかで指定した要素も見えたりしますし、3D機能を使いながら、要素ごとにコードをチェックする事も可能です。複雑なサイトを作っているとき等には、使ってみると便利かもしれません。

正直web開発をする方以外は、あまり頻繁に使う機能とは言えませんが、
触ってみるとなかなか面白いので、自分がよく行くサイトなんかをこれを使ってみて見ると面白いと思います。

 

興味のある方は、是非試してみては?

 

 - HTML, WEBサービス, Web制作

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  関連記事

Macでwifiのパスワード忘れた時に確認する方法
Macで一度使ったWifiのパスワードを確認する方法

Macを使っていて、wifiのパスワード忘れた。。なんだっけ? 友達に共有したり …

ノートパソコンで仮想通貨をマインングMinergate
ノートパソコンで仮想通貨をマイニング(CPUマイニング)してみたよ!

最近話題の暗号通貨(仮想通貨)ですが、マイニング(採掘)をしてみました。 暗号通 …

Image uploaded from iOS (11)
ベトナムでは当たり前?虫下し薬「Fugacar」を飲んでみた

ベトナムはホーチミンに移住してから、はや1年4ヶ月が経とうとしている。 こっちに …

raspberry-pi-logo
ベトナムのホーチミンでRaspberry pi 3 Model B を買ってみた。

IoTって単語よくききますよね。 Apple watchとかGoogle gla …

os_x_el_capitan_roundup
MacbookのOSをMarveriksからEl Capitanにあげたら、ローカル開発環境でApacheにアクセスできなくなった。

上げよう上げようとずっと思っていたんですが、なんかローカルの環境の設定とかどうせ …