Safariでソースコードを表示する完全ガイド｜HTML・CSS・JavaScriptを確認する方法

Web

「このWebサイトはどうやって作られているんだろう？」
「綺麗なデザインのCSSコードを参考にしたい」
「JavaScriptのエラーを調べたい」

こんな時、Webページのソースコードを見ることで、サイトの構造や仕組みが分かります。

実は、Safariでもソースコードを表示できるんです。ただし、デバイスによって方法が異なり、特にiPhoneやiPadでは少し工夫が必要です。

今回は、Mac、iPhone、iPadそれぞれでSafariのソースコードを表示する方法を、初心者の方にも分かりやすく、実践的に解説していきます。

スポンサーリンク

ソースコードとは？見て分かること

ソースコードで確認できる3つの要素

Webページのソースコードには、主に3種類のコードが含まれています。

1. HTML（構造）

  • ページの骨組み
  • テキストや画像の配置
  • リンクやボタンの設置

2. CSS（デザイン）

  • 色やフォント
  • レイアウトや配置
  • アニメーション効果

3. JavaScript（動作）

  • ユーザーの操作に反応する処理
  • 動的なコンテンツの制御
  • データの送受信

これらを見ることで、Webサイトがどのように作られているかを学べます。

ソースコードを見る目的

学習・参考目的：

  • Web制作の勉強
  • デザインの参考
  • コーディング技術の習得

デバッグ目的：

  • エラーの原因調査
  • 表示崩れの確認
  • パフォーマンス問題の特定

セキュリティ確認：

  • 怪しいコードの発見
  • 個人情報の扱い確認
  • 外部スクリプトのチェック

Macでソースコードを表示する方法

方法1：開発メニューを有効にする（推奨）

ステップ1：開発メニューの表示

  1. Safariを開く
  2. メニューバーから「Safari」→「環境設定」（Command + カンマ）
  3. 「詳細」タブをクリック
  4. 「メニューバーに”開発”メニューを表示」にチェック
  5. 環境設定を閉じる

ステップ2：ソースコードを表示

  1. ソースを見たいWebページを開く
  2. メニューバーの「開発」をクリック
  3. 「ページのソースを表示」を選択
  4. 新しいウィンドウでソースコードが表示される

ショートカットキー：
Option + Command + U で即座に表示できます！

方法2：右クリックから表示

  1. Webページ上で右クリック
  2. 「ページのソースを表示」を選択

ただし、この項目は開発メニューが有効な場合のみ表示されます。

方法3：URLバーを使う方法

  1. アドレスバーに以下を入力：
view-source:https://example.com
  1. Enterキーを押す

この方法は他のブラウザでも使える汎用的な方法です。

iPhone・iPadでソースコードを表示する方法

iOSのSafariには標準でソースコード表示機能がないため、工夫が必要です。

方法1：ショートカットアプリを使う（最も簡単）

ショートカットの作成手順

  1. 「ショートカット」アプリを開く
  2. 右上の「＋」をタップ
  3. 「アクションを追加」をタップ
  4. 検索で「WebページでJavaScriptを実行」を選択
  5. 以下のコードを入力：
var source = document.documentElement.outerHTML;
var newWindow = window.open();
newWindow.document.write('<pre>' + 
  source.replace(/</g, '&lt;')
  .replace(/>/g, '&gt;') + 
'</pre>');
completion(true);
  1. ショートカット名を「ソース表示」に設定
  2. 「共有シートに表示」をオン

ショートカットの使い方

  1. Safariでページを開く
  2. 共有ボタン（四角に上矢印）をタップ
  3. 「ソース表示」ショートカットを選択
  4. 新しいタブでソースが表示される

方法2：ブックマークレットを使う

ブックマークレットの設定

  1. 適当なページをブックマークに追加
  2. ブックマークを編集
  3. 名前を「ソースを表示」に変更
  4. URLを以下のコードに置き換え：
javascript:(function(){
  var w=window.open();
  w.document.write('<html><head><title>Source</title></head><body><pre style="word-wrap:break-word;white-space:pre-wrap;">'+
  document.documentElement.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')+
  '</pre></body></html>');
})();

ブックマークレットの使い方

  1. ソースを見たいページを開く
  2. アドレスバーをタップ
  3. 「ソースを表示」と入力
  4. ブックマーク候補から選択
  5. 新しいタブでソースが表示される

方法3：View Sourceアプリを使う

App Storeには、ソースコード表示専用のアプリがあります。

おすすめアプリ：

  • View Source – シンプルで使いやすい
  • Source Browser – 高機能でカラー表示対応
  • HTML Viewer Q – 日本語対応で初心者向け

アプリの使い方（View Sourceの例）

  1. App Storeからアプリをインストール
  2. Safariでページを開く
  3. 共有ボタンをタップ
  4. 「View Source」を選択
  5. アプリが起動してソースが表示される

Webインスペクタで詳細に調べる

Mac版Safariの強力な機能

単純なソース表示より詳しく調べたい場合は、Webインスペクタを使います。

Webインスペクタの起動

  1. 開発メニューから「Webインスペクタを表示」
  2. またはOption + Command + I
  3. または要素を右クリック→「要素の詳細を表示」

インスペクタでできること

要素タブ：

  • HTMLの階層構造を確認
  • リアルタイムでHTMLを編集
  • 適用されているCSSを確認
  • 要素のサイズや余白を視覚化

コンソールタブ：

  • JavaScriptのエラーを確認
  • コンソールログの表示
  • JavaScriptコードを実行

ネットワークタブ：

  • 読み込まれたファイル一覧
  • 各ファイルのサイズと時間
  • APIの通信内容を確認

ソースタブ：

  • JavaScriptファイルの中身
  • ブレークポイントの設定
  • ステップ実行でデバッグ

ソースコードの見方：初心者向け解説

HTMLの基本構造を理解する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>見出し</h1>
    </header>
    <main>
        <p>本文テキスト</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

重要なタグ：

  • <head> – ページの設定情報
  • <body> – 実際に表示される内容
  • <div> – レイアウト用のボックス
  • <a href=""> – リンク
  • <img src=""> – 画像

CSSの読み方

.header {
    background-color: #333;  /* 背景色 */
    color: white;            /* 文字色 */
    padding: 20px;          /* 内側の余白 */
    margin: 0;              /* 外側の余白 */
}

よく使われるプロパティ：

  • color – 文字の色
  • font-size – 文字のサイズ
  • width/height – 幅と高さ
  • display – 表示方法
  • position – 配置方法

JavaScriptの基本

// ボタンクリック時の処理
document.getElementById('button').addEventListener('click', function() {
    alert('クリックされました');
});

よく見るパターン：

  • document.getElementById() – 要素の取得
  • addEventListener() – イベントの設定
  • console.log() – デバッグ用の出力
  • fetch() – データの取得

実践的な活用方法

デザインの参考にする

CSSを調べる手順

  1. 気に入ったデザインの要素を右クリック
  2. 「要素の詳細を表示」
  3. 右側のスタイルパネルでCSSを確認
  4. 値を変更して効果を確認
  5. 気に入ったコードをメモ

エラーの原因を特定する

JavaScriptエラーの調査

  1. Webインスペクタのコンソールタブを開く
  2. 赤いエラーメッセージを確認
  3. エラーの行番号をクリック
  4. 問題のコードを確認
  5. 修正方法を検討

パフォーマンスを分析する

読み込み速度の確認

  1. ネットワークタブを開く
  2. ページを再読み込み（Command + R）
  3. ファイルサイズと読み込み時間を確認
  4. 重いファイルを特定
  5. 最適化の方法を検討

セキュリティとプライバシーの注意点

ソースコードから分かる情報

公開されている情報：

  • HTML構造
  • CSSスタイル
  • クライアントサイドのJavaScript
  • 画像やファイルのURL

見えない情報：

  • サーバーサイドのコード（PHP、Pythonなど）
  • データベースの内容
  • 他のユーザーの情報
  • 管理画面のコード

注意すべきポイント

個人情報の取り扱い

  • ソースコードに個人情報が含まれていないか確認
  • APIキーなどの秘密情報が露出していないか
  • コメントに不適切な情報がないか

著作権の尊重

  • ソースコードにも著作権がある
  • 学習目的での参照は問題ない
  • そのままコピーして使用は避ける
  • ライセンス表記を確認する

トラブルシューティング

よくある問題と解決法

Q1: ソースが文字化けする

原因： 文字エンコーディングの問題

解決法：

  1. 表示メニュー→「テキストエンコーディング」
  2. 「UTF-8」や「Shift_JIS」を試す
  3. ブラウザを再起動

Q2: JavaScriptで生成された内容が見えない

原因： 動的に生成されるコンテンツ

解決法：

  1. Webインスペクタを使用
  2. 要素タブで確認（レンダリング後のHTML）
  3. コンソールでJavaScriptを実行

Q3: ソースが圧縮されていて読めない

原因： minify（圧縮）されたコード

解決法：

  1. オンラインの整形ツールを使用
  2. Webインスペクタの「Pretty Print」機能
  3. Chrome拡張機能などの整形ツール

便利なツールとテクニック

ソースコード解析ツール

オンラインツール：

  • Beautifier.io – コードの整形
  • JSFiddle – コードの実行テスト
  • CodePen – HTML/CSS/JSの確認

ブラウザ拡張機能

Safari Extensions：

  • Develop Menu – 開発者向け機能拡張
  • Source Viewer – ソース表示の強化
  • Web Developer – 総合開発ツール

キーボードショートカット集

Mac版Safari：

  • Cmd + Option + U – ソース表示
  • Cmd + Option + I – インスペクタ
  • Cmd + Option + C – コンソール
  • Cmd + Shift + C – 要素選択モード

まとめ：ソースコードは学習の宝庫

Safariでソースコードを表示する方法について、基本から応用まで解説してきました。

重要ポイントのおさらい：

  1. Macは開発メニューから簡単に表示 – Option + Command + U
  2. iPhone/iPadはショートカットが便利 – 共有シートから実行
  3. Webインスペクタで詳細分析 – リアルタイム編集も可能
  4. セキュリティと著作権に注意 – 適切な利用を心がける
  5. 学習と問題解決に活用 – Web制作スキルの向上

ソースコードを見ることは、Web制作を学ぶ最良の方法の一つです。

優れたWebサイトのコードを研究し、自分の知識として吸収していくことで、より良いWebサイトを作れるようになります。最初は難しく感じるかもしれませんが、少しずつ理解できるようになっていきます。

この記事を参考に、ぜひWebサイトの裏側を探検してみてください！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました