スマホサイトのソースコードをPCで見るには？web制作初心者の疑問を解決！

この記事では、スマートフォン向けウェブサイトのソースコードをPCで確認する方法について、具体的な手順と役立つツールを解説します。web制作初心者の方でも理解できるよう、丁寧な言葉遣いで説明します。あなたのweb制作スキル向上をサポートします。

スマートフォン向けのHPを作るにあたり、既存HPのソースを見て参考にしたいと考えています。現在、旅行日記＆写真のあるHPを自分で作成しました。それをスマートフォンでも見れるように、スマートフォン用のHPを作成したいと考えています。（PCとスマホで兼用できませんでした）

そこで、既存のスマートフォン用のHPのソースを見て参考にしたらよいのではないか？と考えました。

持っているスマートフォンはギャラクシータブです。タブからはページのソースが見えませんでした。見えてもPCで作成したいので、あまり都合はよくないです。

タブで表示したスマホ用のHPのURLをPCに送ったのですが、PCで見ようとするとPC用のページになってしまいます。試したのは食べログとアメブロです。

http://s.ameblo.jp/kyarypamyupamyu/

http://s.tabelog.com/smartphone/restaurant_list/list/?pcd=21

既存のスマートフォン用のHPのソースをPCで見るにはどうしたらよいのでしょうか？

よろしくお願いします。補足ありがとうございます。

FireFoxをインストールし、firemobilesimulatorのアドオンも入れました。上記URLを見ようとしても、またPC版に遷移してしまいます。ググったのですが、アドオンの使い方がわかりません。

結論としては、上記2つのURLサイトをPCで見たいです。スマホ用のHPをPCで見たいです。

よろしくお願いします。

はじめに：なぜスマホサイトのソースコードを確認したいのか？

web制作の世界では、他のウェブサイトのデザインや機能を参考にすることは、非常に有効な学習方法です。特に、スマートフォン向けのウェブサイト（スマホサイト）は、PCサイトとは異なる技術やデザインの工夫が凝らされていることが多く、そのソースコードを参考にすることで、あなたのweb制作スキルを格段に向上させることができます。

今回の質問者様のように、既存のスマホサイトのデザインを参考にしたい、あるいは自分のサイトをスマホ対応させたいというニーズは非常に多いです。スマホサイトのソースコードをPCで確認する方法を知ることで、以下のようなメリットがあります。

デザインのヒントを得る： 他のサイトがどのようにデザインされているか、どのような要素が使われているかを具体的に確認できます。
技術的な学び： HTML、CSS、JavaScriptなどのコードを参考に、スマホサイト特有の技術的な工夫を学ぶことができます。
効率的なコーディング： 既存のコードを参考にすることで、ゼロからコードを書くよりも効率的にサイトを構築できます。
スマホ対応の理解： レスポンシブデザインやモバイルフレンドリーなサイトの作り方を理解できます。

PCでスマホサイトのソースコードを見るための3つの方法

それでは、PCでスマホサイトのソースコードを確認するための具体的な方法を3つご紹介します。それぞれの方法にはメリットとデメリットがありますので、あなたの状況に合わせて最適な方法を選んでください。

1. ブラウザの開発者ツールを使う

最も一般的で、web制作初心者の方にもおすすめなのが、ブラウザに標準搭載されている「開発者ツール」を使う方法です。Chrome、Firefox、Safariなど、主要なブラウザにはすべて開発者ツールが備わっており、スマホサイトの表示をシミュレートすることができます。

手順：

ブラウザを開き、確認したいスマホサイトのURLにアクセスします。 例えば、質問者様が例に挙げている「食べログ」や「アメブロ」のスマホサイトのURLを入力します。
開発者ツールを開きます。
- Chrome：メニュー > その他のツール > デベロッパーツール、または右クリック > 検証
- Firefox：メニュー > Web開発 > 開発ツール、または右クリック > 要素を調査
- Safari：メニュー > 開発 > Webインスペクタを表示（開発メニューが表示されていない場合は、Safari > 環境設定 > 詳細 > メニューバーに”開発”メニューを表示にチェック）
デバイスモードを有効にします。 開発者ツールが開いたら、デバイスアイコン（スマートフォンとタブレットのアイコン）をクリックして、デバイスモードを有効にします。
デバイスを選択します。 デバイスモードが有効になると、表示される画面がスマホの画面のように表示されます。デバイスの選択メニューから、iPhoneやAndroidなど、様々なデバイスを選択できます。
必要に応じて、画面サイズを調整します。 デバイスを選択した後、画面サイズを調整して、実際のスマホ画面に近い表示にすることも可能です。
ソースコードを確認します。 開発者ツールの「Elements」タブを選択すると、HTMLやCSSのソースコードを確認できます。「Network」タブでは、画像の読み込みやJavaScriptの実行状況などを確認できます。

メリット：

手軽さ：特別なソフトや拡張機能のインストールが不要で、すぐに利用できます。
多機能性：HTML、CSS、JavaScriptのデバッグや、レスポンシブデザインの確認など、様々な用途に利用できます。
リアルタイムプレビュー：ソースコードを編集すると、リアルタイムで表示が更新されるため、デザインの調整が容易です。

デメリット：

PCの画面サイズに依存：PCの画面サイズによっては、実際のスマホ画面と完全に同じ表示にならない場合があります。
高度な知識が必要：開発者ツールの機能をすべて使いこなすには、ある程度のHTML、CSS、JavaScriptの知識が必要です。

2. ブラウザの拡張機能（アドオン）を使う

ブラウザの拡張機能（Chromeの拡張機能やFirefoxのアドオンなど）を利用することで、より簡単にスマホサイトの表示をシミュレートできます。質問者様が試されたFireFoxの「firemobilesimulator」も、このカテゴリに該当します。

手順：

ブラウザの拡張機能ストアから、スマホサイトシミュレーターの拡張機能をインストールします。 例えば、Chromeウェブストアで「User-Agent Switcher」などの拡張機能を検索してインストールします。
拡張機能を有効にします。 インストールした拡張機能を有効にします。
User-Agentを設定します。 拡張機能の設定画面で、User-Agent（ユーザーエージェント）をスマホの機種（例：iPhone、Android）に設定します。
スマホサイトのURLにアクセスします。 設定後、スマホサイトのURLにアクセスすると、スマホの画面表示でサイトが表示されます。
ソースコードを確認します。 開発者ツールを開き、HTMLやCSSのソースコードを確認します。

メリット：

手軽さ：開発者ツールよりも簡単にスマホサイトの表示を切り替えられます。
豊富な種類：様々な種類の拡張機能があり、自分の目的に合ったものを選べます。

デメリット：

拡張機能のインストールが必要：事前に拡張機能をインストールする必要があります。
拡張機能の互換性：ブラウザのバージョンによっては、拡張機能が正常に動作しない場合があります。

3. 実際のスマホで確認する

最も確実な方法は、実際にスマホでサイトを表示して確認することです。PCで確認するだけでは得られない、実際のスマホでの表示や操作性を確認できます。

手順：

スマホで、確認したいスマホサイトのURLにアクセスします。
サイトの表示を確認します。 デザイン、レイアウト、操作性などを確認します。
ソースコードを確認します。 スマホのブラウザによっては、ソースコードを表示する機能が搭載されている場合があります。

メリット：

正確性：実際のスマホでの表示を確認できるため、最も正確な確認方法です。
操作性の確認：タップ操作やスクロールなど、スマホ特有の操作性を確認できます。

デメリット：

手間：毎回スマホを取り出して確認する必要があります。
ソースコードの確認が難しい：スマホのブラウザによっては、ソースコードの確認が難しい場合があります。

具体的なケーススタディ：食べログのスマホサイトをPCで確認してみよう

それでは、質問者様が例に挙げている「食べログ」のスマホサイトをPCで確認する手順を、開発者ツールを使って具体的に説明します。

Chromeブラウザを開き、食べログのスマホサイトのURL（例：http://s.tabelog.com/smartphone/restaurant_list/list/?pcd=21）にアクセスします。
右クリックし、「検証」を選択して開発者ツールを開きます。
開発者ツールの上部にあるデバイスアイコンをクリックして、デバイスモードを有効にします。
デバイス選択メニューから、例えば「iPhone X」を選択します。 画面がiPhone Xの表示に変わります。
必要に応じて、画面サイズを調整します。 開発者ツール内で画面サイズを調整して、より実際のiPhone Xの画面に近い表示にすることも可能です。
Elementsタブを選択し、HTMLソースコードを確認します。 食べログのスマホサイトのHTMLソースコードが表示されます。
Stylesタブを選択し、CSSスタイルを確認します。 各要素に適用されているCSSスタイルを確認できます。
Networkタブを選択し、画像の読み込み状況やJavaScriptの実行状況などを確認します。

この手順に従うことで、食べログのスマホサイトのソースコードをPCで確認し、デザインや技術的な工夫を学ぶことができます。

web制作初心者が陥りやすい問題と解決策

web制作初心者の方がスマホサイトのソースコードを確認する際に、よく陥る問題と、その解決策をご紹介します。

問題1：開発者ツールの使い方がわからない
解決策： 開発者ツールの基本的な使い方を学びましょう。HTML、CSS、JavaScriptの基礎知識を身につけることも重要です。オンラインのチュートリアルや書籍などを活用して、学習を進めてください。
問題2：ソースコードが複雑すぎて理解できない
解決策： 最初は、すべてのコードを理解しようとせず、興味のある部分から少しずつ見ていくようにしましょう。HTMLの要素（<div>、<p>など）やCSSのプロパティ（color、font-sizeなど）の意味を理解することから始めると、徐々に理解できるようになります。
問題3：スマホサイトとPCサイトの違いがわからない
解決策： レスポンシブデザインやモバイルファーストデザインについて学びましょう。メディアクエリ（CSSの@mediaルール）を使って、画面サイズに応じて表示を切り替える方法を理解することが重要です。

まとめ：スマホサイトのソースコード確認でweb制作スキルを向上させよう

この記事では、PCでスマホサイトのソースコードを確認するための3つの方法（開発者ツール、ブラウザ拡張機能、実際のスマホでの確認）をご紹介しました。web制作初心者の方は、まず開発者ツールから試してみることをおすすめします。開発者ツールは、HTML、CSS、JavaScriptの学習にも役立ちます。

他のウェブサイトのソースコードを参考にすることで、デザインのヒントを得たり、技術的な知識を深めたりすることができます。積極的にソースコードを参考にし、あなたのweb制作スキルを向上させてください。

web制作の学習は、一朝一夕にできるものではありません。地道な努力と継続的な学習が重要です。わからないことがあれば、積極的に質問したり、オンラインのコミュニティに参加したりして、学びを深めていきましょう。

もっとパーソナルなアドバイスが必要なあなたへ

この記事では一般的な解決策を提示しましたが、あなたの悩みは唯一無二です。
AIキャリアパートナー「あかりちゃん」が、LINEであなたの悩みをリアルタイムに聞き、具体的な求人探しまでサポートします。

今すぐLINEで「あかりちゃん」に無料相談する

無理な勧誘は一切ありません。まずは話を聞いてもらうだけでも、心が軽くなるはずです。

web制作スキルをさらに高めるための追加情報

web制作スキルをさらに高めるために、以下の情報を参考にしてください。

HTML、CSS、JavaScriptの基礎を学ぶ： これらの言語は、web制作の基本です。オンラインの学習サイトや書籍などを活用して、基礎知識を習得しましょう。
レスポンシブデザインを学ぶ： レスポンシブデザインは、様々なデバイスで最適な表示を実現するための技術です。メディアクエリの使い方などを学びましょう。
デザインの基礎を学ぶ： 色彩理論、レイアウト、タイポグラフィなど、デザインの基礎知識を学ぶことで、より魅力的なウェブサイトを制作できるようになります。
ポートフォリオを作成する： 自分の作品をまとめたポートフォリオを作成することで、あなたのスキルをアピールできます。
最新の技術を学ぶ： web制作の世界は常に進化しています。新しい技術やトレンドを積極的に学び、スキルアップを目指しましょう。

これらの情報を参考に、あなたのweb制作スキルをさらに高めてください。

“`

コメントするコメントをキャンセル

お役立ちコンテンツ

転職体験談

転職ノウハウ

転職コラム