ホームページ作成/HTML・スタイルシート(CSS)の基礎

直接アクセスせずにソースを閲覧(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="sample.css">

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でも、これで、直接アクセスすることなく、ソースを閲覧できます。
非常に簡単ですので、ぜひ試してみて下さい。

【関連記事】

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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