PCのブラウザで見ている画面(ローカル)を、スマホからも見る方法を、備忘録として記録しておきます。すぐ忘れるので。笑

ChatGPTにまとめてもらったので、そのまま貼ります😇

---

✅ 【ブログ用】ローカルのサイトをスマホでプレビューする方法

📌 環境の前提

PC: Mac (Windows でもOK)

エディタ: VSCode

サーバー: VSCodeの拡張機能 Live Server を利用

スマホとPCは同じWi-Fiに接続

🚀 やることはシンプル

PCに立てたローカルサーバーを、スマホのブラウザから直接見るだけ。

🔍 ステップ① PCのIPアドレスを調べる

Macの場合ターミナルを開いて：

ipconfig getifaddr en0

を入力。

これで192.168.xx.xx

みたいなIPが出る。

これが「PCの住所」になる。

（Windowsなら ipconfig と打って IPv4 アドレス を探す）

🚀 ステップ② VSCodeのLive Serverを起動

VSCodeでプロジェクトを開いて 右下の「Go Live」ボタンを押す localhost:5500 みたいなアドレスがブラウザに表示される

これは PCだけが知ってる住所 なので

スマホからは localhost じゃなく IPアドレス でアクセスする。

🌍 ステップ③ スマホのブラウザでアクセス

例えば PCのIPが 192.168.1.3 なら

スマホでブラウザを開いて：http://192.168.1.3:5500

にアクセス！

✅ 注意点

公共のWi-Fi（カフェ・図書館など）だと大抵通信が制限されててダメ。

自宅のWi-Fiか、スマホのテザリングでPCを繋ぐと確実。

Live Serverのポート（5500）は人によって違う場合があるから注意。