VS Codeをインストールする
まずはソフトを自分のパソコン（PC）に入れましょう。
- 公式サイトにアクセス: Visual Studio Code を開きます。
- ダウンロード: 青いボタン（Windowsなら
Download for Windows、MacならDownload for macOS）をクリック。 - インストール: ダウンロードされたファイルを実行し、基本的にはすべて「次へ」や「同意する」を押していけば完了です。
画面を「日本語」にする（最初の設定）
インストール直後はすべて英語です。まずは日本語化して、操作の心理的ハードルを下げましょう。
- 拡張機能アイコンをクリック: 左端にある「四角がいっぱいあるアイコン」を押します。
- 検索ボックスに入力:
Japaneseと入力します。 - インストール: 「Japanese Language Pack for Visual Studio Code」という項目の
Installボタンを押します。 - 再起動: 右下に「再起動（Restart）」を促すボタンが出るので、それをクリック。これでメニューが日本語になります！
Web制作の「準備」をする（フォルダ作成）
VS Codeで作業を始めるには、**「箱（フォルダ）」**を作ることが大切です。
- デスクトップやドキュメントに「my-web」など、好きな名前のフォルダを新しく作ります。
- VS Codeのメニューから [ファイル] ＞ [フォルダーを開く] を選択し、今作ったフォルダを選びます。
- 左側のサイドバーに、そのフォルダ名が表示されれば準備OKです！
最初のHTMLファイルを作る
いよいよファイルを書き始めます。
- サイドバーのフォルダ名の横にある「＋アイコン（新しいファイル）」をクリック。
- 名前を
index.htmlと入力してEnter（※必ず半角英数字で！）。 - 右側の編集エリアに
!（びっくりマーク） を1つだけ打ち、EnterまたはTabキーを押してください。- → 一瞬でHTMLの雛形が登場します！（これが前回触れたEmmetの魔法です）
書いたコードをブラウザで見る（Live Server）
「書いたものがどう見えるか」を確認する一番簡単な方法を入れましょう。
- 左側の拡張機能アイコンで
Live Serverと検索。 - 紫色のアイコンのものを
インストールします。 - HTMLファイルを右クリックして [Open with Live Server] を選択。
- → ブラウザが自動で立ち上がります。これ以降、ファイルを上書き保存（Ctrl+S）するたびに、ブラウザが自動で更新されます！
備忘録：初期設定のまとめ
- インストール：公式サイトからダウンロード
- 日本語化：拡張機能で「Japanese」を検索
- ファイル作成：
index.htmlという名前にする - 便利機能：
!で雛形作成、Live Serverでブラウザ表示
これで、いつでもWebサイトを作れる「あなた専用の工房」が完成しました！
ここまでの手順で、PCにインストールできそうですか？もし「ここがうまくいかない」という点があれば、何でも聞いてくださいね。
コメント