MacのSafariでWebページのソースコードを表示する3つの方法【開発メニューの有効化手順つき】

美しいWebページの裏側には、そのデザインや機能を支える「ソースコード」と呼ばれる複雑なコードが存在します。ふと、あるWebページがどのようなコードで作られているのか気になったことはありませんか？ 実は、ほとんどすべてのWebブラウザでページのソースコードを確認でき、MacのSafariでも同じことが可能です。

ただし、Mac版Safariの場合、ChromeやFirefoxとは操作方法が少し異なります。Safariでソースコードを表示するには、まずブラウザに隠されている「開発」メニューを有効化する必要があります。

この記事では、そのメニューを有効にする手順と、ソースコードを表示する複数の方法をわかりやすく解説します。

MacのSafariでWebページのソースコードを表示する手順

1. MacでSafariを起動します。

2. 画面上部のメニューバーから「Safari」→「環境設定…」（macOS Ventura以降は「設定…」）の順にクリックします。

3. 設定パネルが開いたら、上部タブの一番右にある「詳細」をクリックします。

4. 「詳細」タブの中に「メニューバーに“開発”メニューを表示」という項目があります。

この項目のチェックボックスにチェックを入れると、ブラウザのメニューバーに即座に「開発」メニューが追加されます。

これでMacのSafariで「開発」メニューが使えるようになりました。続いて、このメニューを使ってWebページのソースコードにアクセスするさまざまな方法をご紹介します。

1. 開発メニューから表示する

Safariのメニューバーには、先ほど有効化した「開発」という新しい項目が表示されているはずです。ページのソースを表示するには、「開発」メニューをクリックし、「ページのソースを表示」を選択します。

Safariが瞬時にそのWebページの完全なソースコードを表示してくれます。

2. キーボードショートカットを使う

複数のWebページのソースコードを頻繁に確認したい場合は、キーボードショートカットを使うのがおすすめです。メニューバーから項目を探してクリックするよりも、はるかに素早く操作できます。

ソースコードを見たいページをSafariで開いた状態で、「Option + Command + U」のキーの組み合わせを押すだけで、そのページのソースコードが表示されます。

3. 右クリックメニューを使う

Webページのソースコードを表示する機能は、Safariのコンテクストメニュー（右クリックメニュー）にも追加されています。Webページ上で右クリックし、「ページのソースを表示」という項目を選ぶだけでOKです。

まとめ

Safariをメインブラウザとして使用していて、さまざまなWebページの裏側にあるコードに興味がある方は、本ガイドの手順を活用してみてください。お気に入りのブラウザを切り替えることなく、手軽にソースコードを確認できるようになります。