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）は人によって違う場合があるから注意。