【環境構築】 Web制作の土台作り VSCodeとGitHubの連携手順
何もない状態から、どうやって「作る場所」を作ったかが一目でわかります。
ステップ１：GitHubリポジトリの作成
作業内容を保存し、バージョン管理を行うための「場所」をGitHub上に用意します。
1. GitHubアカウントにログインし、右上の「＋」ボタンから「New repository」を選択します。
2. リポジトリ名 (Repository name): 例: my-first-web-design
3. 公開/非公開 (Public/Private): どちらでも構いませんが、学習目的ならPublicでも良いでしょう。
4. READMEファイルの初期化 (Initialize this repository with a README): チェックを入れておくと便利です。
5. **「Create repository」**をクリックして作成完了です。
🎯 目的：VSCodeで学習し、GitHubにコミットで記録できる環境の構築
🛠️ フェーズ 1: 環境の確認とプロジェクトの作成
ステップ 内容 実行場所 ステータス
1. ソフトウェアの準備 VSCodeとGitをインストールする。 PC 完了（前提）
2. GitHubリポジトリ作成 GitHub上で空の**web-101**リポジトリを作成（READMEはOFF）。 GitHub Webサイト 完了
3. 作業フォルダの作成 Macのデスクトップに空のweb-101フォルダを作成。 ターミナル (cd Desktop, mkdir web-101) 完了
4. VSCodeでフォルダを開く VSCodeでweb-101フォルダを開き、作業開始。 VSCode 完了
🚀 フェーズ 2: ファイルの作成とGit連携
ここからは、web-101フォルダ内でのファイル作成と、GitHubとの接続設定を行いました。
1. プロジェクト基本ファイルの作成 (VSCode内)
• index.html：トップページの骨組みとなるHTMLファイルを作成。
• css/style.css：スタイル（デザイン）を記述するためのCSSファイルを作成。
• README.md：プロジェクトの概要を記述するためのMarkdownファイルを作成。
o これらが、GitHubへアップロードする最初のファイルになります。
