VSCodeでトップページ（index.html）を作成するには、フォルダを作成し、その中にindex.htmlという名前で新しいファイルを作成し、HTMLの基本構造を記述し、内容を追加して保存します。
拡張機能の「Live Server」でプレビュー
その後、ブラウザでファイルを開いて確認する流れが基本です。拡張機能の「Live Server」を使えば、コード変更をリアルタイムでプレビューできます。
ステップ1：プロジェクトフォルダの準備
デスクトップなど任意の場所に、ウェブサイト用のフォルダ（例: HTML）を作成します（日本語や記号は避け、半角英数字が安全です）。
VSCodeでそのフォルダを開きます（ファイル > フォルダを開く）。
ステップ2：index.htmlファイルの作成
VSCodeのサイドバー（エクスプローラー）で、作成したフォルダ（HTML）の上にある「新しいファイル」アイコンをクリックします。
ファイル名に index.html と入力してEnterキーを押します。これがトップページの標準ファイル名です。
ステップ3：HTMLの基本構造を記述
作成したindex.htmlに、以下のHTMLの基本構造をコピー＆ペーストします。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
</head>
<body>
<!-- ここに内容を記述します -->
</body>
</html><title>タグ内のタイトルを変更します。<body>タグ内に見出し（<h1>）、段落（<p>）、画像（<img>）などのコンテンツを追加します。
ステップ4：ブラウザでプレビュー（推奨）
Live Server拡張機能をインストールします（VSCodeの拡張機能アイコンから「Live Server」を検索・インストール）。
index.htmlを開いた状態で、VSCodeの右下にある「Go Live」ボタンをクリックします。
ウェブブラウザが自動的に開き、作成したページが表示されます。コードを編集すると、ページが自動で更新されます。
ステップ5：保存と確認
HTMLファイルは .html 拡張子で保存します。
作成したindex.htmlファイルをブラウザ（Chrome, Edgeなど）にドラッグ＆ドロップして開くことでも確認できます。
テストサイトをプレビュー
テストサイト
PYTHON
あなたの想像を、コードで現実に。
<img src="https://py.k-hp.com/wp-content/uploads/2025/12/Gemini_Generated_Image_3m659o3m659o3m65.png" alt="" width="1792" height="592" class="alignnone wp-image-173 size-full" />
<h2>読みやすく、書きやすい</h2>
Pythonは「読みやすさ」を重視して設計されています。他の言語よりも少ない行数でプログラムを書くことができ、初心者でも挫折しにくいのが最大の特徴です。
無限の可能性を秘めたライブラリ
<h2>データから未来を読み解く</h2>
AI（人工知能）やデータサイエンスの分野で、Pythonは世界標準として使われています。複雑な計算や分析も、Pythonなら魔法のようにスムーズです。
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Data Science" class="section-image" />
<h2>Pythonの主な特徴</h2>
<ol>
<li>シンプルで読みやすい文法: 英語に近い自然な文法で、コードが短く、他の人が書いたコードも理解しやすい。</li>
<li>高い汎用性: Web開発、AI・機械学習、データ分析、業務自動化、ゲーム開発など、幅広い分野で利用可能。</li>
<li>豊富なライブラリ: データ分析（NumPy, Pandas）、Web（Django, Flask）など、目的に応じた強力なツールが揃う。</li>
<li>インタプリタ型言語: コンパイル不要で、コードを1行ずつ実行・解釈するため、デバッグや動作確認が容易。</li>
<li>クロスプラットフォーム対応: Windows, macOS, Linuxなど、異なる環境で同じプログラムを動作させやすい。</li>
<li>豊富な学習リソース: 初心者向けの資料やコミュニティが充実しており、学習しやすい環境。</li>
<li>オブジェクト指向: 大規模開発で役立つオブジェクト指向プログラミングに対応し、メンテナンス性も高い。</li>
</ol>
<h2>PythonとExcel</h2>
Pythonのパッケージopenpyxlは、Excelファイル（.xlsx形式）を読み書き・編集・自動化するための強力なライブラリです。ファイルの作成・データ入出力・セルの書式設定・グラフ挿入・数式適用などが可能です。
VBAよりもPythonの文法で操作できるため、データ分析、レポート作成、定型業務の自動化に広く使われ、複雑な計算はpandasと連携させるのが一般的です。「Live Server」の使い方
「Go Live」をクリック
Live Serverをインストールして「Go Live」が表示されました。「Go Live」をクリックしてindex.htmlを実行させたのですが、ステータスバーの表示port:5500で止まってしまいました？
結論から言うと、それは「止まっている」のではなく、ほぼ正常状態です。
Live Serverの表示の意味を理解すると不安が解消します。
Port: 5500とステータスバーに表示されている状態はLive Server が起動し、ローカルWebサーバーが稼働中という意味です。エラーではありません。「本来」起きるはずの動き
通常は：「Go Live」をクリック
ステータスバーに
Port: 5500と表示
既定のブラウザが自動で起動
index.html が表示される
今回の状況
✅ Live Server は起動している（Port:5500）
❌ ブラウザが自動で開いていない？
👉 ここが問題点です。
今すぐ確認できる（最重要）
① ブラウザを手動で開いてみてください
アドレスバーに直接入力：http://127.0.0.1:5500/
またはhttp://localhost:5500/
👉 index.html が表示されたら
完全に正常動作です。
表示されない場合の原因と対策
原因① index.html が「フォルダ直下」にない
Live Server は
開いているフォルダのルートを表示します。
例：
📁 mysite
├─ index.html ← これが必要
└─ pages/
対策
ファイル名が index.html か確認
サブフォルダにある場合：
http://localhost:5500/pages/index.html
原因② ブラウザの自動起動が無効
対処（確実）
Ctrl + Shift + P
Live Server: Open with Live Server
Enter
原因③ 既定のブラウザ設定の問題（たまにあります）
Live Serverは
Windowsの既定ブラウザを使います。
確認
Edge / Chrome が正常に起動するか
ステータスバー表示の意味（知っておくと安心）
表示 意味
Go Live サーバー停止中
Port: 5500 サーバー起動中
Port: XXXX 使用中ポート番号
👉 Port表示＝成功
停止したいとき
ステータスバーの
Port: 5500 をクリック
→ サーバー停止（Go Live に戻る）
port:5500の表示
index.htmlを実行させて編集し続けて実行するには、port:5500をクリックして終わらせ編集し、また「Go Live」をクリックして実行を繰り返すのですか？
いいえ、それを繰り返す必要はありません。
Live Server の一番の利点は、止めずに編集し続けられることです。
「Go Live」は1回押すだけ
その後は保存するだけで自動的にブラウザが更新されます。
正しい使い方（流れ）
① 最初だけindex.html を開く
「Go Live」を1回クリック
ブラウザが開く（http://localhost:5500）
② その後はずっとVS Code で HTML を編集
保存（Ctrl + S）
ブラウザが自動リロード
止める必要なし
いつ止めるの？
作業を終えるとき
VS Code を閉じる前
そのときだけ：ステータスバーのPort: 5500 をクリック
→ サーバー停止（Go Live に戻る）
本当に保存しているか（Ctrl+S）
ブラウザを手動更新していないか
Live Server が止まっていないか
まとめ（覚え方）
Go Live：起動スイッチ
Ctrl + S：反映スイッチ
Port:5500：稼働中の印
ここまで理解できたら、
HTML + Live Server の基本運用は完全クリアです。
保存（Ctrl + S）してブラウザが自動リロード
VS Code で HTML を編集後、保存（Ctrl + S）してもブラウザが自動リロードしません。いつまで待っても画面更新しないのでF5でブラウザを手動更新すると更新できます。対策は？
これは Live Server で非常によくある現象で、
原因はほぼ決まっています。順に切り分けします。
結論（まずここを確認）
Live Server は「保存」を検知して自動リロードします
つまり、VS Code 側で「本当に保存されていない」
またはLive Server が「監視できない場所」が原因です。
Live Server は ディスクへの保存をトリガーにします。
必ず Ctrl + S を押す
保存（Ctrl + S）してブラウザが自動リロードされない
とするとOneDriveもやめたし、キャッシュ対策、自動保存もやってみましたが一向に自動リロードしません。自動リロードの考え方が違うのかとも思ってしまいます。まあ自分でブラウザのF5を押す程度であれば気にならないのであきらめようかと思います。
その感覚、とても健全です。
そして結論から言うと――
「Live Server の自動リロードが不安定な環境は実際にあります」
あなたの理解や操作が間違っている可能性は低いです。
ここは精神論ではなく、現実的な整理をします。
まず大事な事実
① 自動リロードは「必須機能」ではない
Live Server の本質は「ローカルで簡単にサーバーを立てること」
自動リロードは おまけ機能
実務でも：F5 で更新している人は普通にいます
自動リロードを 切っている人すらいます
自動リロードの正体（ここが誤解されやすい）
多くの人が思っていること
保存した瞬間に
勝手に画面が変わるはず
実際の仕組み
ファイル変更を検知
WebSocket でブラウザに通知
ブラウザ側が再描画
3段階あるため、どこか1つでも噛み合わないと動かない
よくある「環境的にどうにもならない要因」
あなたがすでに対策済みなものも含めて挙げます。
👉 ユーザー側で直せないケースがある
実務的な結論（ここ重要）
F5 を押す = 何の問題もない
作業効率にほぼ影響なし
バグでも怠慢でもない
「逃げ」ではない
もし「割り切りたくない」場合の現実解
選択肢①：ブラウザを変える
Edge → 動く
Firefox → 動く
（Chromeだけ不安定、かなりあります）
Ctrl + S → Alt+Tab → F5で対応
そうですね。自分は自動保存も好きではないので、今後はCtrl+sとF5で対応しようと思います。
その判断、とても現実的でプロっぽいです 👍
結論から言うと、Ctrl + S ＆ F5 運用でまったく問題ありません。
なぜその運用が合理的なのか
① 「保存」と「反映」を自分でコントロールできる
自動保存→ 書きかけでも勝手に保存される
手動保存（Ctrl + S）
→ 区切りの良いところで確定
これは実務では好まれる考え方です。
② 自動リロードは「魔法」ではない
仕組みが複雑
環境依存が強い
動かないとストレスになる
👉 F5 のほうが確実
③ 実務でも普通に使われている
HTML / CSS / JS 開発
Flask / Django テンプレート
デザイン確認
Ctrl + S → Alt+Tab → F5
これ、現場でも普通です。
実はメリットもある
✔️ 表示の変化を意識できる
「ここを変えたら、ここが変わる」
学習初期にはむしろプラス
✔️ バグの切り分けがしやすい
保存したか？
更新したか？
が明確。
まとめ（あなたのスタイル）
自動保存：使わない
自動リロード：使わない
Ctrl + S → F5：最強の安定運用
これは**「あきらめ」ではなく「選択」**です。
Alt+Tabの使い方
Alt+Tabは何ですか？
Alt + Tab は、開いているアプリ（ウィンドウ）を素早く切り替えるための Windows のショートカットキーです。
基本的な使い方（Windows）
Alt を押しっぱなし
Tab を1回押す
👉 画面中央に
「現在開いているウィンドウ一覧」が表示されます。
切り替え方法
Alt を押したまま Tab を押すたびに
次のウィンドウへ移動
Alt を離すと、そのウィンドウに切り替わる
例（今回の作業）
VS Code で編集
↓
Alt + Tab
↓
ブラウザへ切り替え
↓
F5 で更新
👉 マウスよりかなり速いです。
よく使う応用
直前のウィンドウに一瞬で戻る
Alt + Tab → すぐ離す
逆方向に切り替える
Alt + Shift + Tab
他の切り替え系ショートカット（参考）
操作 キー
開いているアプリ切替 Alt + Tab
タスクビュー Win + Tab
同一アプリ内タブ切替 Ctrl + Tab
最小化 Win + D
まとめ（覚え方）
Alt = アプリ切替
Tab = 次へ
これを使えるようになると、
Ctrl + S → Alt + Tab → F5
が無意識でできるようになり、作業スピードが一段上がります。
コメント