アクセスしたウェブページの内部を知りたいですか？Mac、iPad、iPhone でページのソースコードを表示する方法をご覧ください。
小規模な Web 開発に携わっている場合でも、コードを調べて仕組みを確認するという一般的な興味を持っている場合でも、特定の Web ページの背後にある HTML ソース コードを確認したい場合があります。
これは Mac の Safari (または他のブラウザ) から実行できますが、iPhone または iPad の場合は専用のサードパーティ製アプリを使用する必要があります。
macOS と iOS の手順は次のとおりです。
Macの場合
サイトの HTML コードを表示できるようにするための最初のステップは、開発モードを有効にすることです。Apple は、開発者だけがこれらのオプションをいじりたいと考えているため、このモードはデフォルトで非表示になっています。
Safari で開発モードを有効にする:
1) Safariを開き、上部のメニューバーから「Safari」 > 「設定」または「環境設定」をクリックします。
2) 「詳細設定」タブに移動します。
3)下部にある「Web 開発者向けの機能を表示する」または「メニュー バーに開発メニューを表示する」というボックスをオンにします。
メニュー バーに、 [開発]という新しいタブが表示されます。
ページのソースコードを表示:
開発者モードを有効にすると、次の 3 つの方法で Web ページのソース コードにアクセスできるようになります。
- Web ページを開いた状態で、メニュー バーの[開発]に移動し、 [ページ ソースの表示]を選択します。
- ソースコードを表示する Web ページで、Option + Command + Uキーを同時に押します。
- これはおそらく最も簡単な方法です。ページの空白部分をControlキーを押しながらクリックするか、右クリックして「ページソースを表示」を選択するだけです。
これらの操作を行うと、ページのソースコードがSafariウィンドウの下部に表示されます。そこから、必要な情報をすべて確認できます。
iPhoneまたはiPadの場合
iPhoneやiPadからウェブページのソースコードを表示したい場合は、アプリを使うと便利です。最近のアプリの多くは、このプロセスを簡単にし、便利な構文強調表示機能を備えているため、表示内容をよりよく理解できます。
App Storeから無料でダウンロードできるHTML Viewer Qのご利用をお勧めします。インストールが完了したら、以下の手順に従ってウェブページのソースコードを表示してください。
1) HTML Viewer Qを起動し、アプリの右上にあるリンクボタンをタップします。
2)ソースコードを確認したいウェブページのURLを入力し、「Go」ボタンをタップします。ここではAmazonを例に説明します。
3)ページが読み込まれたら、アプリの左上にあるコードボタンをタップします。
選択したウェブページのソースコードが表示されています。アプリ上部の数字をタップすると、フォントサイズ（9pt、12pt、16ptなど）を変更できます。また、「検索」ボタンを使って、探しているキーワードや構文を検索することもできます。
このアプリでは HTML コードをコピーして、他のアプリに貼り付けることもできます。
この機能は、Web ページの動作原理を理解できる好奇心旺盛なユーザーにとって大きな力となりますが、Web ページの背後にあるコードをより深く理解したい、または単に自分のサイトのトラブルシューティングを行いたいと考えている初心者や経験豊富な Web 開発者にとっても、非常に役立つツールです。
次にチェックしてください： Mac、iPad、iPhoneでSafari Webインスペクタを使用する方法
