[ネタ]Firefox11の新機能「要素の3D表示」でビルを建てる
この記事は約7分ぐらいで読めます
まず「要素を調査」って知ってます？
えー、最近までGoogle Toolbarのアドオンが更新されないことで敬遠気味だったFirefoxのアップグレードですが、なんか最近はそのへん柔軟に対応してくれるということで久しぶりにアップグレードしてみました。webcre8はメインブラウザがLunascape(Gecko)、セカンドがFifefoxなんですが、CSS3使うときはどうせChrome以外ダメ！というのが多いのでさほどアップグレードの必要がなかったんですよね。
要素を調査はいつだったかに追加された機能ですけど、まあFirebugがあればそんなに必要ない機能なんですよね。
それが今日たまたまRSS見てると、バシャログさんの記事が目に入りました。
Firefox新機能の3Dビューがなんだかすごい | バシャログ。
まじでなんだかすごい…なにこれ…と思って早速試してみたんですが…
家に帰ってやってみた
まずこれが普通のWEBCRE8.jp
右クリックしてコンテキストメニューから要素を調査
右下に3Dボタンが現れる(出ない人もいます)
3D表示された場合。なにこれ…
まじでなにこれ…こんな必要どこにあるの…。
こうやって見ると高層ビルみたい…！
もう全然意味があるのかわからないですけど、とりあえず階層の深さとかはわかる。無駄にわかります。正直iframe内とか無駄に要素多いので単純にコンテンツの階層を見れる感じにはならないし、実用的かどうかは全然わかんないですけど…。
ここでふつふつと沸き上がってくるのが件のバシャログ記事でも触れられていた、「これってビルとか作れるんじゃね？」って話です。もう作るしかない…！
ところで階層と言えば
これを見てマニアなwebの人はピンとくるwebページがあるんじゃないかと思います。そう、あの経済産業省のページです…！
見にくいですけど、divの階層が凄いことに
経済産業省のHTMLソースが糞過ぎる – ゴールデンタイムズ
この記事で紹介されていたページのうず高く積まれたdivは、さぞ美しいビルディング…、いや、可視化されたものを見るとそれはさながら前方後方墳…！！と思って見に行ったら
更地になってました
残念なことに平らに馴らされていました。超残念。時代が早すぎたんですね。
HTML Hierarchical Building(HHB)の作り方
とりあえず、この遊びを「HTMLの階層構造的ビル」と言う意味で「HHB」、HTML Hierarchical Buildingと名付けます。この遊びするの多分webcre8が最初でしょうから。名付けの権利ありますよね。多分。
まずブロックの色を把握しましょう
ブロックの色を把握して行きましょう。思いついたタグを適当に書いて表示してみました。
適当に書いたタグを表示させたもの
これを見る限り
- 赤 … table
- 朱 … tr
- 桃 … td
- 水 … div
- 黄 … img
- 緑 … span
- ピンクから紫 … h1～h6
- グレー … p
- 濃いグレー … その他
- 白 … body
色分けは以上のようになっているようです。もし隠されたレアカラーの要素とか見つけたら教えて下さい！順番にタグを表示させてたんですがだるくなりましたｗ
もう別に意味とか気にせずにガンガン積み上げて行きましょう！！(え
HHBでピラミッドを作る
さて、それじゃ何を作りましょうかね。とりあえず最初に思いついたのはピラミッドですかね。これ作ってみましょう。
さっきのWEBCRE8.jpのスクショを見る限り、ピラミッドぽい黄色の枠を持つのはimg要素になってます。
…とおもいきや、このなかで高さを作っているのはあくまで「子要素」であり、img要素は空要素なので上に積み上げることはできないようです…。一枚だけならいいんですけど。
仕方ないので色のことは一旦忘れてとりあえず形を作ってみましょう。
こんな感じです。エメラルドのピラミッド、みたいな
あ、もちろんこのリンクはFirefox11の要素を調査でご覧下さいｗ
HHBでビルを作る
次はビルです。ビルは灰色、なんのタグでも大丈夫です。じゃasideでも使ってみましょう。
やばいです。ビル高い。
超高い、ビル超高いです。ちなみに99階建てです。
HHBでビル街を作る
今度はこれを更に複数建ててみましょう。
どこからどう見てもビル街
はい、どう見てもビル街ですねｗあとはこう、spanタグとかを駆使して作れば街路樹とか作れるんじゃないでしょうかｗ
終わりに
今週はなんだか不真面目な雰囲気が漂いすぎましたね…ｗ 別にいいんですけど。WEBCRE8.jpはwebとデザインの楽しいことを掘り下げてわいわいやりたいブログです。
HHB作りたい人いませんか？
さてこのHHB、どうせなら誰か作ってくれる人とかいませんかね？更に画像とか使えばもっと見た目にも面白いものを作れると思いますし、配置の仕方では変な形のものも作れるはずですよー。
そして、これで遊びたい人はさっそくFirefoxを最新版の11にしてみて下さい★