SafariでHTMLソースコードを表示する方法【ショートカットキー解説つき】

この記事では、MacのSafariでウェブページのHTMLソースコードを表示する方法を、メニュー操作・右クリック・ショートカットキーの3つの方法に分けてわかりやすく解説します。

ポイント

• Safariのメニューから「開発」>「ページのソースを表示」を選択する
• ページ上で右クリックし、表示されたメニューから「ページのソースを表示」を選ぶ方法もある
• キーボードショートカットはOption+Command+U

Safariでソースコードを表示する手順

Safariでソースコードを表示するのはとても簡単です。以下の手順に従ってください。

1. Safariを起動します。

2. ソースを確認したいウェブページに移動します。

3. 画面上部のメニューバーから「開発」メニューを選択し、「ページのソースを表示」をクリックします。すると、そのページのHTMLソースが表示されたウィンドウが開きます。

   または、キーボードでOption+Command+Uを押しても同じ操作ができます。

4. もしメニューバーに「開発」メニューが表示されていない場合は、Safariの「環境設定」を開き、「詳細」タブ内の「メニューバーに"開発"メニューを表示」にチェックを入れてください。

右クリックから表示する方法

ほとんどのウェブページでは、ページ上の空いている部分(画像の上ではなく)で右クリックし、「ページのソースを表示」を選択することでもソースを確認できます。なお、この項目が表示されるには、あらかじめ環境設定で「開発」メニューを有効にしておく必要があります。

ショートカットキーで素早く表示

SafariにはHTMLソースを表示する専用のショートカットも用意されています。CommandキーとOptionキーを押しながらUキー(Cmd+Opt+U)を押すだけで、ワンタッチでソースを開けます。頻繁にソースを確認する方には、この方法が最も効率的です。

ソースコードを表示するメリット

ソースコードを見ることで、ウェブデザイナーがどのようにレイアウトを実現しているのかを知ることができ、自分のスキル向上や仕事の質の改善につながります。実際、長年にわたり多くのウェブデザイナーや開発者が、気になるページのソースを表示するだけでHTMLを学んできました。初心者がHTMLを学ぶ絶好の入り口であると同時に、ベテランのプロフェッショナルが新しいテクニックや実装方法を研究する手段としても活用されています。

ただし、ソースファイルは非常に複雑な場合がある点に注意してください。ページのHTMLマークアップだけでなく、サイトの見た目や機能を支える大量のCSSやJavaScriptファイルも含まれているため、最初は内容を理解できなくても焦る必要はありません。HTMLソースの表示はあくまで第一歩です。その後は、Chris Pederick氏の「Web Developer」拡張機能のようなツールを使えば、CSSやスクリプトの確認、HTMLの特定要素の検証なども行えます。Safariの「開発」メニューには「Webインスペクタ」も搭載されているので、あわせて活用するとさらに効果的です。

ソースコードを表示することは違法?

サイトのコードを丸ごとコピーして、自分のウェブサイトであるかのように公開することは、もちろん許容される行為ではありません。しかし、そのコードを学習の出発点として活用することは、多くの人がこの業界で成長してきた実際の方法です。サイトのソースを見て何かを学んだことのない現役のウェブプロフェッショナルを探すほうが、よほど難しいでしょう。

ウェブのプロフェッショナルたちは互いに学び合い、インスピレーションを受けた作品をさらに改良していくのが常です。遠慮なくサイトのソースコードを表示し、学習ツールとして活用しましょう。ただし、コードを流用する場合は著作権に十分配慮し、あくまで参考として利用することを心がけてください。