Visual Studio Code の基本的な使い方

画面の説明

①: メニュー（上部メニュー）: 主な操作メニュー、作業中のファイル名などが表示される

②: アクティビティバー主に使用する機能がアイコンで表示されている。上から「エクスプローラー」など

③: サイドバー選択したアクティビティバーの内容を表示している

④: エディターファイルを表示、作業する画面

⑤: ステータスバー :文字コードなどのファイル情報を表示する、変更も可能。

フォルダーとファイルを作成する

基本的なフォルダーの開き方とファイルの作り方です。

勉強会用のフォルダーを作る今回の勉強会（スラスラわかる HTML＆CSS のきほん）で使用するフォルダーをここで作ります。

すなわち、すらすら-2nd のダウンロードしたサンプルデータが保存されているフォルダー（ここでは[すらすら-2nd] フォルダー）傘下に、すでに保存されている「サンプル」フォルダーと同じ並びで新しいフォルダー「cafe」を作ります。
これは新しく作成するサイトのトップフォルダーになります。
さらにトップフォルダー cafe には css と imagesとtext という名前のサブフォルダ―を追加します。

フォルダーの追加は Windows のエクスプローラーを使って簡単に追加できますが、ここでは Visual Studio Code（以下「VSCode」）を使って追加します。

VSCode でフォルダーを追加する

①: 左端にあるアクティビィティバーの一番上にあるエクスプローラ― アイコンをクリックする
Windows システムにも同じ名前のアプリがあるが、それとは区別しましょう。

②: サイドバーにボタン「フォルダーを開く」が表示されるのでクリックする。
※ 「フォルダーを開く」ボタンが表示されていない時は、➊「ファイル」から「フォルダーを閉じる」をクリックする、次に➋アクティビティバーの「エクスプローラー」をクリックする。

③: 「フォルダーを開く」ダイアログが表示されるので、フォルダーを追加する親のフォルダー（ここでは「すらすら-2nd」フォルダー）を選択する。

④: 「新しいフォルダー」をクリックし、名前を「新しいフォルダー」から「cafe」と変更する。

⑤: 新規「cafe」フォルダーを選択し、「フォルダーの選択」をクリックすると、cafe フォルダーが追加される。VSCode の画面に戻り、サイドバーの「開いているエディター」の下にフォルダー「cafe」が表示されているのを確認する。
トップフォルダーが出来た後すぐにトップファイル（index.html）を追加するのが好ましい（参照：ファイルを作る）。

追加したフォルダーの傘下にサブフォルダーを追加する

続けて cafe トップフォルダの傘下に css と images、それに text の３つのサブフォルダーを追加する

①: サイドバーに表示されているフォルダー「cafe」にカーソルを合わせると、右横にアイコンが４つ表示される。左から 2 番目のアイコン「新しいフォルダー」をクリックする。

②:フォルダー名の入力ボックスが表示されるので「css」と入力しエンターする。これによりcafeフォルダーにcssサブフォルダが追加される。

③: 同様にして café フォルダーに imagesとtext サブフォルダ―も追加する
imagesとtext サブフォルダーを追加する時に、café フォルダーが選択されていることを確認してから追加しよう。

④: Windows のエクスプローラーで、これらサブフォルダーができているのを確認しよう。

ファイルを作る

トップフォルダーcafé に index.html ファイルを作成する

①: エクスプローラ―の開いているエディターの下に表示されたフォルダー名 cafe の右側に４つのアイコンが表示されている中から、一番左のアイコン（「新しいファイル」）をクリックして、ファイル名と拡張子の「index.html」を入力すると、

②:Index.html ファイルが作成されサイドバーにも表示される。
※ 但し、サブフォルダーがある場合にトップフォルダー café に index.html ファイルを入れるのはなぜかできない。サブフォルダーimages の中に作られてしまう。サブフォルダーが 1 つも無い時には、またはトップフォルダーに既にファイルがあれば、トップフォルダーに作られる。サブフォルダーがあるとどうしてもその中に入ってしまう。そのために次の操作が必要になる。