【WEB初心者】VS CODEを使ってWEB開発環境を5分で構築する方法

ここでは、VS CODEでHTML、CSS、Java Scriptのファイルを簡単に作成してchromeで実行結果を確認する方法を解説します。
この記事は初心者向けなので、中上級者はなんだこんなことかと思うかもしれません。
OS
Windows10
目次
1.VS CODEをインストールする 2.VSCODEを起動する 3.chromeで実行結果を確認する

1.VS CODEをインストールする

2.VS CODEを起動する
2-1.初期起動は以下の画面になるように初期設定を行う。

2-2.タブ「File」⇒「Open Folder」をクリックする。

2-3.ソースを管理するフォルダを選択して、「フォルダーの選択」をクリックする。
「新しいフォルダー」をクリックして新規でフォルダを作成してもよい。

2-4.下記のように左側のツリーに「プログラム演習」というフォルダが作成されたことを確認する。

2-5.一番左のアイコン「New File」をクリックし、HTMLファイル名(例えば「index.html」)を入力し、エンターキーを押下する。すると、右側にHTMLファイルのエディタが表示される。

2-6.上記2-5のエディタ部分に以下のコードを書く。(コピペでもOKです)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Webサイトのタイトル</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <script src="js/main.js"></script> </body> </html>
2-7.上記2-6の「css/styles.css」にマウスカーソルを合わせ、Ctrlキーを押下しながらクリックする。

2-8.「css/styles.css」が未作成であれば「作成しますか?」(英語)というダイアログが表示されるので、「Create File」を選択するとCSSファイルが自動作成される。

2-9.上記2-6のhttp://js/main.jsにマウスカーソルを合わせ、Ctrlキーを押下しながらクリックする。すると、「js/main.js」が未作成であれば「作成しますか?」(英語)というダイアログが表示されるので、「Create File」を選択するとJavaScriptファイルが自動作成される。

3.chromeで実行結果を確認する
「index.html」のファイル名タブを、chromeのURL部分(Googleで検索するか、URLを入力してくださいと書いてある部分)ドラッグすると、URLが表示される。その後、エンターキーを押下するとブラウザとして表示される。


実行結果

このように、まずHTMLのファイルを作成してしまえば、CSSファイルとJavaScriptファイルは自動作成することができる。
