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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

View Source Chartをインストール

HTMLソースを枠と色で整形して表示できる「View Source Chart」をインストールしてみましょう。手順はとても簡単です。 Ver 2.5.03は無料で入手できます。

[STEP.0] Firefoxを準備

Firefox
Firefox

「View Source Chart」は、Firefox用のアドオンです。 ですから、もしFirefoxをインストールしていない場合は、先にFirefoxをインストールする必要があります。
Firefoxは、無料で利用できるブラウザです。Mozilla Japanサイトから無料でダウンロードできますので、入手してインストールして下さい。サイズは約6MBです。
Firefoxの公式配布ページ(Mozilla Japan)

[STEP.1] View Source Chart配布ページへアクセス

Firefoxを用いて、View Source Chartアドオンの配布ページを表示させます。
https://addons.mozilla.org/ja/firefox/addon/655
そして、このページにある「Firefoxへインストール」ボタンをクリックします。

View Source Chart配布ページ
▲View Source Chart配布ページ

[STEP.2] インストール

View Source Chartのインストールを確認するダイアログが表示されるので、「今すぐインストール」ボタンをクリックします。

View Source Chartインストール確認ダイアログ
▲インストール確認ダイアログ

[STEP.3] 待つ

すると、すぐにダウンロードが始まります。サイズは、わずか30KB程度なので、あっという間にダウンロードは完了します。

View Source Chartのダウンロード
▲ダウンロードの進捗ダイアログ

[STEP.4] Firefoxの再起動

ダウンロードが完了すると、以下のようなダイアログが表示されます。右下にある「Firefoxの再起動」ボタンをクリックしましょう。 (クリックすると、Firefox上で開かれているウインドウやタブはすべて閉じられます。)

Firefox再起動
▲Firefoxを再起動する

しばらくすると、Firefoxが再起動され、「View Source Chart」のインストールが完了します。

それでは、「View Source Chart」を使って、実際に整形されたHTMLソースを表示させてみましょう。

「View Source Chart」の使い方へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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