HTMLのソースコードをSafariで表示するには？

HTMLのソースコードをSafariで表示する方法

はじめに

この記事では、iPhoneやiPadなどのiOS端末上で表示中のHTMLやCSSのソースコードを、MacのSafariで表示する方法をご紹介いたします。この方法により、ウェブサイトの内部構造を確認し、開発やデバッグに役立てることができます。

Safariの環境設定

Safariで開発メニューを表示するには、以下の手順に従ってください。

Safariを開く
トップメニューバーから「Safari」をクリックし、ドロップダウンメニューから「環境設定」を選択します。
「詳細」タブをクリックします。
「メニューバーに"開発"メニューを表示」にチェックを入れます。

開発メニューを使ってソースコードを表示

環境設定で開発メニューを有効にしたら、以下の手順でソースコードを表示できます。

ソースコードを表示したいウェブページを開く
トップメニューバーから「開発」をクリックし、「ページのソースを表示」を選択します。

これで、選択したページのHTMLソースコードを表示することができます。

コード例

以下は、Safariでソースコードを表示する際に見ることのできるHTMLコードの例です。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>サンプルページ</title>
    </head>
    <body>
        <h1>こんにちは世界</h1>
        <p>これはサンプルの段落です。</p>
    </body>
    </html>

まとめ

このようにして、Safariの開発メニューを利用することで、ウェブサイトのHTMLやCSSのソースコードを簡単に表示することが可能です。開発者やデザイナーにとって非常に便利な機能ですので、是非試してみてください。

その他の参考記事:サイト内検索 html