ホームページ作成/ホームページ作成補助ソフト

HTML構造を把握しやすく整形表示するツール(3ページ目)

長いページや複雑なページは、HTMLソースを表示させても構造が把握しにくい場合があります。改行や字下げが適切に行われていないソースも、読みにくいでしょう。HTMLの構造を整えて表示してくれるツールをご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

View Source Chartを使ってHTMLソースを整形表示

「View Source Chart」を使うには、次のように操作するだけです。

  1. HTMLソースを表示させたいページを、Firefoxで表示させる。
  2. そのページ内の任意の箇所を右クリックし、コンテキストメニューから「View Source Chart」をクリックする。

これだけです。(下図参照)

メニューから「View Source Chart」を選択
▲メニューから「View Source Chart」を選択

すると、そのページのHTMLソースが枠線と色で整形されて、下図のように別ウインドウで表示されます。

「View Source Chart」のウインドウ
▲「View Source Chart」のウインドウに整形されたソースが表示

要素名をクリックすると、その要素の存在するブロックを折りたたんで非表示にできます。 この機能を活用すると、長いソースや複雑なソースの全体像が把握しやすくなります。

おわりに

今回は、HTMLソースの構造を枠と色で整えて表示してくれるForefoxのアドオン「View Source Chart」をご紹介いたしました。 ぜひ、使ってみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます