【WEB初心者】VS CODEを使ってWEB開発環境を5分で構築する方法
ここでは、VS CODEでHTML、CSS、Java Scriptのファイルを簡単に作成してchromeで実行結果を確認する方法を解説します。
この記事は初心者向けなので、中上級者はなんだこんなことかと思うかもしれません。
OS
Windows10
目次
１．VS CODEをインストールする ２．VSCODEを起動する ３．chromeで実行結果を確認する
１．VS CODEをインストールする
２．VS CODEを起動する
２－１．初期起動は以下の画面になるように初期設定を行う。
２－２．タブ「File」⇒「Open Folder」をクリックする。
２－３．ソースを管理するフォルダを選択して、「フォルダーの選択」をクリックする。
「新しいフォルダー」をクリックして新規でフォルダを作成してもよい。
２－４．下記のように左側のツリーに「プログラム演習」というフォルダが作成されたことを確認する。
２－５．一番左のアイコン「New File」をクリックし、HTMLファイル名（例えば「index.html」）を入力し、エンターキーを押下する。すると、右側にHTMLファイルのエディタが表示される。
２－６．上記２－５のエディタ部分に以下のコードを書く。（コピペでも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>
２－７．上記２－６の「css/styles.css」にマウスカーソルを合わせ、Ctrlキーを押下しながらクリックする。
２－８．「css/styles.css」が未作成であれば「作成しますか？」（英語）というダイアログが表示されるので、「Create File」を選択するとCSSファイルが自動作成される。
２－９．上記２－６のhttp://js/main.jsにマウスカーソルを合わせ、Ctrlキーを押下しながらクリックする。すると、「js/main.js」が未作成であれば「作成しますか？」（英語）というダイアログが表示されるので、「Create File」を選択するとJavaScriptファイルが自動作成される。
３．chromeで実行結果を確認する
「index.html」のファイル名タブを、chromeのURL部分（Googleで検索するか、URLを入力してくださいと書いてある部分）ドラッグすると、URLが表示される。その後、エンターキーを押下するとブラウザとして表示される。
実行結果
このように、まずHTMLのファイルを作成してしまえば、CSSファイルとJavaScriptファイルは自動作成することができる。
