非天マザー by B-CHAN

iPhoneの使い方、IT、ビジネス、金融、経済、不動産、保険、音楽、映画、ニュース、自己啓発その他。

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

ウェブページのレイアウトと部品名を可視化 

 

みなさん、こんにちは!

B-CHANです。

 

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

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

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

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

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

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

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

 

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

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

 

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

 

Web Developer

 

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

Wed Developerボタン

 

 

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

Display Div Order

 

 

すると、ほら!

レイアウト

 

 

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

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

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

まさに救世主!

 

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

 

関連記事

MacでもWindowsのようにtabキーでフォーカスを移動する方法 - 非天マザー by B-CHAN

Macを劇的に便利にするアプリ、PopClip - 非天マザー by B-CHAN

一度使うと手放せない!パソコンでのインターネット閲覧を劇的に快適にするAutoPagerizeを使おう - 非天マザー by B-CHAN