ホームページ作成

【ホームページ作成】直接アクセスせずにソースを閲覧

HTML・スタイルシート（CSS）の基礎

更新日：2004年06月13日

直接アクセスせずにソースを閲覧

西村文宏

HTMLから呼び出されている外部のスタイルシートやJavaScriptのソースを見たい場合、どうしますか？ブラウザで直接アクセスができないファイルのソースは一見閲覧できなさそうですが、実は簡単に閲覧可能なのです。

直接アクセスできないページのソースを閲覧

さて、HTML内から呼び出されているCSS（スタイルシート）ファイルやJavaScriptファイルのソースを閲覧するには、どうすれば良いでしょうか。

非常に手軽な方法があります。以下に、その手順をご紹介致します。

目的のファイルのURLを調べる

まずは、目的のファイルのURLを調べます。

例えば、http://allabout.co.jp/hoge/hoge.html というHTMLファイルから呼ばれているCSSファイルのソースを見たいとしましょう。そのCSSファイルのURLを得るために、HTMLファイルのソースを見ます。

そのソースの中で、例えば次のように書かれていれば...

CSSファイルのURLは、http://allabout.co.jp/hoge/sample.css であると分かります。

view-source:

そして、そのURLの前に「view-source:」と加えます。
例えば、次のようになります。

view-source:http://allabout.co.jp/hoge/sample.css

あとは、これをブラウザのアドレス欄に入力するだけです。

「view-source:」の使い方サンプルIE版

「view-source:」の使い方サンプルNetscape版

これで、目的のソースが閲覧できます。

ソースを表示したところ(IE) ソースを表示したところ(Netscape)
Internet Explorerの場合（左）／Netscape Navigatorの場合（右）

Internet Explorerでは、外部のテキストエディタ（標準では「メモ帳」。上図では「EmEditor」）で開きます。Netscape Navigatorでは、ブラウザ内部のビューアで開きます。
※Netscape Navigator内部のビューアだと、HTMLソースが色分けされて表示されます。「メモ帳」では色分けされず全部黒色で表示されます。 Internet Explorerのソース閲覧用エディタを特に変更していないなら、Netscape Navigatorでソースを見た方が見やすいかも知れません。

おわりに

どんなURLでも、これで、直接アクセスすることなく、ソースを閲覧できます。
非常に簡単ですので、ぜひ試してみて下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！