超絶便利！ウェブページのHTMLのIDやクラス名と配置を可視化

みなさん、こんにちは！

B-CHANです。

ブログやウェブサイトを作っている本職の人たちは、HTMLやCSSを自在に操るんでしょうが、ボクのように他業界の人間が試行錯誤していると、困ることがたくさん。

そのひとつが、ウェブページのID名やクラス名、レイアウト構造がどうなっているのか、良くわからないことです。

自分でゼロからページを設計することはほとんど無くて、何らかのテンプレートを改良するケースが大半です。

例えば、本文の欄の幅やサイドバーの幅をちょっと変えたいのにな〜、なんてことは良くあります。

この「非天マザー」でもいろいろ試行錯誤してるんですが、これまで、<div>タグなどのID名やクラス名が良くわからなくて、あまりいじれなかったんですよね。

ソースコードを見てもHTMLとCSSの関連が非常にわかりにくいです。

WordPressなどで自分のサーバーにファイルを置いている人はわかるんでしょうけど、はてなブログなどのブログサービスを使っていると、すべてのファイルを見ることができるわけでは無いので、非常に困難です。

そんな絶望的な暮らしで、涙で視界がぼんやりする中で見つけた超絶便利なプラグイン。

ウェブページのレイアウト構造とID名、クラス名が一発でわかるようになります。

Google Chrome、Firefox、Operaのブラウザで使えるプラグインで、入手先はこちら。

インストールすると、ツールバーに歯車の形のボタンが追加されます。

Wed Developerボタン

それをクリックするとメニューがズラリと出てくるので、上段の"information"タブをクリックし、その中の"Display Div Order"をクリックするだけ。

Display Div Order

すると、ほら！

レイアウト

ID名、クラス名がレイアウトとともにビジュアルで表示されます。

うわー！ボクのブログはこんなことになっちゃってる！

でも、これのおかげでサイドバーの幅を変えることができましたし、ちょっとした飾りも付けることができました。

まさに救世主！

このツールがあると無いとでは作業効率がずいぶん変わるので、良かったら試してみてください。