【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ファイルは自動作成することができる。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中