ページのソースを表示する方法
Chrome、Firefox、Safariでページのソースを表示する方法 | We.Inc
Chrome、Firefox、SafariでページのHTMLソースを表示するショートカット、検証との違い、再利用してよい範囲を解説します。貼り付けたHTMLを要約するビューアー付き。
ページのソースを表示する方法
WindowsやLinuxのChromeとFirefoxではCtrl+Uを押します。Macでは、ChromeはCommand+Option+U、FirefoxはCommand+Uです。ページの何もない部分を右クリックして「ページのソースを表示」を選ぶこともできます。Safariでは、先に「設定」の「詳細」で開発者向け機能をオンにする必要があります。
ブラウザー別のソース表示ショートカット（各社のヘルプページより）
- Chrome
- Ctrl+U
- Command+Option+U
- Safari
- 利用不可
- 先に「Web開発者向けの機能を表示」をオンにする（設定 > 詳細）
- 上記のどれでも
- ページを右クリックして「ページのソースを表示」
- ページを右クリック（またはControlキーを押しながらクリック）
ページのソースとは、スクリプトが実行される前にサーバーが送ったHTMLファイルです。ページがどのタイトルと説明文を使っているか、どのトラッキングタグを読み込んでいるか、画像がどこにあるかがわかります。編集後に自分のサイトを確認したり、気に入ったページの作りを調べたりする最も手早い方法です。
- 読みたいページを開き、お使いのブラウザーのショートカットを押します。
- ブラウザーの検索機能（Ctrl+FまたはCommand+F）で、<titleやog:imageなど必要な箇所にジャンプします。
- じっくり調べたい場合は、すべてコピーして上のビューアーに貼り付けます。
- スクリプト実行後のページの状態を見たい場合は、代わりに検証を使います。
- Firefoxでは特定の行にリンクできます。view-source:アドレスの末尾に#line100を付けます。
- Firefoxでテキストを選択して右クリックし、「選択部分のソースを表示」を選ぶと、その部分だけが表示されます。
- JavaScriptフレームワークで作られたページは、ソースがほとんど空に見えることがよくあります。スクリプトが作った内容は検証で確認できます。
- リデザインのたびに自分のページを確認しましょう。タイトルや説明文の抜けはソースを見ればすぐにわかります。
よくある質問
「ページのソースを表示」と「検証」の違いは何ですか？
「ページのソースを表示」はサーバーから届いた元のファイルを表示します。「検証」はブラウザーのデベロッパーツールを開きます。Chromeのドキュメントによると、そこに表示されるDOMツリーはページの現在の状態で、JavaScriptが要素を追加、削除、編集するとHTMLとは異なるものになります。
サイトのHTMLコードをコピーしてもよいですか？
読んで学ぶことはできます。再利用は別の問題で、米国著作権局によると、サイト上の独自の文章、アートワーク、写真は保護される場合があります。著作権はアイデア、システム、方法には及ばないので、技術を学んで自分のバージョンを書きましょう。これは一般的な情報であり、法的助言ではありません。
ソース表示のメニューが見当たらないのはなぜですか？
Safariでは、「設定」の「詳細」で「Web開発者向けの機能を表示」にチェックを入れるまで表示されません。会社や学校の管理されたパソコンでは、管理者がデベロッパーツールを無効にしている可能性があるので、問い合わせてみましょう。
PHPやデータベースのクエリなど、サイトのサーバー側のコードは見られますか？
いいえ。サーバーがそのコードを実行し、結果のHTML、CSS、JavaScriptだけを送ります。ページのソースには、それを生成したものの手がかりは何も含まれていません。
自分のページのソースで確認すること
- 上部の<head>内に、検索結果に表示されるテキストである<title>と<meta name="description">があります。その下には、SNSでのリンクプレビューを制御するog:タグや、アナリティクスやタグマネージャーのスクリプトがあります。
- サイトエディターで行った変更がここに表示されない場合は、ページがキャッシュされている可能性があります。一度再読み込みしてから、もう一度確認しましょう。
見つけたものを再利用する場合
- 著作権が保護するのは表現の仕方であり、その背後にあるアイデアではありません。レイアウトのアイデアや一般的な技術は自由に使えますが、他人の写真、文章、イラストは、ライセンスで許可されていない限り使えません。
ソース表示、検証、view-source:の比較
ページのコードを読む3つの方法
- ページのソースを表示
- サーバーが送ったHTML
- 不可
- タイトル、メタタグ、トラッキングスクリプトの確認
- 検証（デベロッパーツール）
- スクリプト実行後のライブのページ
- 可能（一時的）
- ボタンや画像を描画しているコードを探す
- アドレスバーのview-source:（Firefox）
- 「ページのソースを表示」と同じ
- 不可
- #line100のように特定の行へリンクする
ページのソース内で役立つ検索
ソースのタブでCtrl+F（MacではCommand+F）を押し、次の語句を検索すると、特に重要な部分が見つかります。
検索する語句
各行は検索に入力する語句と、それで見つかるものです。
ページのソース ビューアー
「ページのソースを表示」からコピーしたHTMLを貼り付けてください。ブラウザー内にとどまり、何もアップロードや取得はされません。
表示するHTML
次の語句を含む行だけを表示
例：meta
概要
行数：{n}
タイトル：{v}
メタディスクリプション：{v}
リンク：{n}
スクリプト：{n}
行番号付きソース
その語句を含む行はありません。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る