VSコードでフォルダとファイルを追加する方法について解説
VSコードでフォルダとファイルを追加する方法について解説します。
VSコードのダウンロードとインストール方法については下記の記事を参照ください。
VSコードのダウンロードとインストール方法について解説
目次
1. ワークスペースにフォルダを追加
VSコード上でコーディングの作業を行う際は、ワークスペースに作業用のフォルダを追加します。
メニューの「ファイル」の中にある「フォルダーをワークスペースに追加…」をクリックします。
今回は、Codejumpの入門編のフォルダ一式を追加してみます。「profile」フォルダを選択して「追加」ボタンをクリックします。
追加するフォルダが信頼できるものであるかを聞かれるポップアップが表示されるので、「Yes」をクリックしてフォルダを追加します。
ワークスペースに「profile」フォルダが追加されました。
続いて「photo」フォルダを追加します。ワークスペースへのフォルダの追加はドラッグ&ドロップでもできます。
「photo」フォルダを選択した状態でワーススペースにドラッグ&ドロップします。
「Add Folder to Workspace」をクリックしてフォルダを追加します。
ワークスペースに「photo」フォルダが追加されました。
index.htmlなどのファイルを選択すると右側にファイルの内容が表示されるので、ここでコーディングを行っていきます。
2. ワークスペースを保存
ワークスペースを保存する際は、メニューの「ファイル」の中にある「名前を付けてワークスペースを保存…」をクリックして、保存先を指定してワークスペースを保存します。
3. ワークスペースを開く
保存したワークスペースを開く際は、メニューの中の「ファイル」内にある「ファイルでワークスペースを開く…」をクリックしてワークスペースのファイル（拡張子が「.code-workspace」）を指定します。
ワークスペースを開くと前回保存した内容が表示されます。
以上で、VSコードでフォルダやファイルを追加したり保存する方法の解説は終わりです。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
