VS Codeを開いてもプロジェクトが表示されない

✅ 回答

VS Codeを起動しただけでは、まだどのフォルダも開いていない状態です。「フォルダーを開く」操作が必要です。

手順（3ステップ）

1. VS Codeの画面上部のメニューから 「ファイル」 をクリック
2. 「フォルダーを開く...」 を選ぶ（Macは「開く...」）
3. 自分のプロジェクトフォルダ（HTMLファイルが入っているフォルダ）を選んで「開く」

左側の「エクスプローラー」パネルにファイル一覧が表示されれば成功です。

なぜ「フォルダ」を開くのか？

VS Codeは「プロジェクト単位」で作業するツールです。フォルダを開くと：

• 中のファイルが左側に一覧表示される
• ターミナルがそのフォルダで開く
• Live Serverが正しいパスで動く
• Gitの管理対象が正しく認識される

ファイル単体を開くと、これらが全部うまく動きません。

よくある間違いパターン

やってしまいがちなこと	正しいやり方
index.htmlをダブルクリックで開く	フォルダごとVS Codeで開く
デスクトップ全体を開く	プロジェクト専用フォルダを作って開く
「最近使ったファイル」から開く	「フォルダーを開く」から開く

おすすめのフォルダ構成

デスクトップに projects フォルダを作り、その中にプロジェクトごとのフォルダを作るのがおすすめです。

• ~/Desktop/projects/my-first-site/ — 最初のサイト
• ~/Desktop/projects/school-festival/ — 学園祭サイト
• ~/Desktop/projects/portfolio/ — ポートフォリオ

ショートカット

次回からは Ctrl+K → Ctrl+O（Macは Cmd+K → Cmd+O）でフォルダを開けます。

フォルダを開く方法（3パターン）

# 方法1: ターミナルから開く（最も速い）
code my-project

# 方法2: VS Codeのメニューから
# ファイル → フォルダーを開く → フォルダを選択

# 方法3: ドラッグ&ドロップ
# Finder/エクスプローラーからフォルダをVS Codeにドラッグ

「ファイルを開く」vs「フォルダを開く」の違い

ファイルを開く：1つのファイルだけ表示される。サイドバーにファイルツリーが出ない。

フォルダを開く：プロジェクト全体が表示される。サイドバーにファイルツリーが出る。ターミナルもそのフォルダで開く。

必ず「フォルダを開く」を使いましょう。ファイル単体で開くと、相対パスが正しく解決されない、拡張機能が正しく動かない等の問題が起きます。

よくあるトラブル

「Live Serverが動かない」：フォルダではなくファイル単体で開いている可能性大。フォルダを開き直しましょう。

「パスが見つからない」エラー：開いているフォルダが正しいか確認。ターミナルで pwd を実行して現在地を確認。

「.gitが認識されない」：.gitフォルダがあるディレクトリをVS Codeで開く必要があります。

ワークスペースの活用

複数のプロジェクトを同時に開きたいときは「ワークスペース」機能を使います。ファイル → ワークスペースにフォルダーを追加 で、複数フォルダを1つのウィンドウで管理できます。学園祭サイトのフロントエンドとバックエンドを同時に開くときに便利です。