こんにちは。最近、HTML/CSSでのフロントエンド作業が増えている中で、「VSCodeのLive Server拡張機能」がとても便利だったので紹介します！
💬 こんな人におすすめ！
- HTML/CSSの勉強中の方
- Web制作で効率よく開発したい方
🔧 Live Serverってなに？
Live Serverは、Visual Studio Code（VSCode）の拡張機能のひとつで、ローカルサーバーを立ち上げてリアルタイムでHTMLの変更をブラウザに反映してくれるツールです。
手動でブラウザを更新しなくても、自動で再読み込みしてくれるので、ちょっとしたCSSの修正もすぐに確認できるのが大きなメリットです。
✅ 導入方法（インストール手順）
- VSCodeを開く
- 左側の拡張機能（四角いアイコン）をクリック
- 検索窓に「Live Server」と入力
- 開発者：Ritwick Dey のLive Serverをインストール
🚀 使い方（超かんたん）
- HTMLファイルを開く
- 右下に表示される「Go Live」ボタンをクリック
→ または 右クリック → 「Open with Live Server」
すると、ブラウザが自動的に立ち上がって、ローカルサーバーでページが表示されます。
💡 使ってみてよかった点
- 変更が即反映される！
- HTMLやCSSを編集して保存（Ctrl + S）すると、ブラウザが自動的に更新されます！
- コーディング中にすぐ見た目が確認できる
- レスポンシブ調整の確認もラク
- 軽くて動作もサクサク
- サーバーを構築しなくても確認ができるため、開発に関して億劫だと思うことが少なくなる
- 開発の回数が増え、スキルアップのスピード感が加速する
⚠️ 注意点
- ファイルを保存しないと変更は反映されません（自動保存ONもおすすめ）
- ローカルサーバーなので、ネット公開はされていません（安心）
📝 まとめ
Live Serverは、HTML/CSS/JavaScriptのフロント開発にとって、とても便利なツールです。まだ使ったことがない方は、ぜひ一度試してみてください！
🙌 最後に
この記事がLive Serverを導入するきっかけになれば嬉しいです。ご質問やコメントもお気軽にどうぞ！