HTML、CSS、JavaScriptをVisual Studioを使って、開発環境の構築からHelloWorldの出力まで

4789 ワード
ドットインストール VisualStudio2017 HTML JavaScript CSS HTML テキストリンク

HTML、CSS、JavaScriptの勉強をドットインストールというサイトで始めました。いくつかやってみましたが、とても分かりやすくて、効率良く学習できると思います。環境に関してはブラウザとテキストエディタさえあれば十分なのですが、私は、Visual Studioを使って学習を進めています。Visual Studioを使ったやり方を説明しているサイトが少なかったので、ここに書き記そうと思いました。ぜひ参考にしてみてください。

ついでに作成したWebページを無料で公開する方法！→ GitHub Pagesを使って、10秒でWebページを公開する

開発環境

・Windows 10 home
・Google Chrome
・Visual Studio 2017 Community

Visual Studioで開発環境の構築手順

上記のものをそれぞれインストールし終わった前提で話を進めていきます。

Visual Studio 2017 Communityを起動する

起動するとこのような画面が出てきます。

新しいプロジェクトの作成

ファイル → 新規作成 → プロジェクト(Ctrl + Shift + N)から新しいプロジェクトを作成します。その他のプロジェクトの種類のVisual Studio ソリューションを選択し、空のソリューションを選びます。ここではとりあえず、名前はtest01とし、デスクトップ上に保存しました。できたらOKを押します。

このような画面が出れば成功です。

HTML、CSS、JavaScriptファイルの準備

画面右側の方にあるソリューションエクスプローラーのソリューション'test01'(0プロジェクト)を右クリック → 追加 → 新しい項目(Ctrl + Shift + I)の順に進めると、このような画面が出てきます。
そしてHTMLページ、JavaScriptファイル、スタイルシートを追加しましょう。

このような画面になれば、開発環境の構築は完了です。
それではweb上にHelloWorldを出力してみましょう。

HelloWorldの出力

HTMLPage1.htmlに＜h1＞HelloWorld＜/h1＞を書き足します。一応プログラムは下記にある通りです。

HTMLPage1.html
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>HelloWorld</h1>
</body>
</html>

書き足したら保存をしましょう。ファイル → すべて保存(Ctrl + Shift + S)

それではデスクトップ上に保存していたtest01フォルダの中のHTMLPage1.htmlをGoogle Chromeで開いてみましょう。

HelloWorldが出力されていれば成功です。お疲れ様でした。

終わりに

メモ帳などのテキストエディタでもできますが、Visual Studioを使ってあげた方が、予測変換などがあり、使い勝手が良いのでお勧めです。簡単に環境構築ができるので、ぜひ試してみてください。

HTML、CSS、JavaScriptの勉強をしている方々、ぜひ一緒に頑張っていきましょう！

作成したWebページを無料で公開する方法もあります！→ GitHub Pagesを使って、10秒でWebページを公開する