「ホームページ制作を始めたいけど、環境構築ってどうやるの？」と悩んでいませんか？
この記事では、初心者向けにVSCodeを使ったホームページ制作の基本的な環境構築を歴10年以上のベテランコーダーが解説します。
環境構築が初めての方でも、最後まで読めば、自分のパソコン上でホームページを作り始められるようになるので、ぜひ参考にしてください。
環境構築とは？
ホームページ制作における環境構築は、基本的に以下の3つを整えることを指します。
- コードを書くためのエディタを準備する
- HTML、CSS、JavaScriptのファイルを作成し、連携する
- 便利な機能を活用して効率的に作業を進める
これらの準備が整えば、ホームページを自分のパソコン上で作り始められます。
一度作ってみるとそこまで難しくないことがわかりますので、このあと解説する内容を参考に挑戦してみてください。
ホームページ制作の環境構築4ステップ
ホームページ制作をする際の環境構築を4ステップで解説します。
- エディタ（VSCode）のインストール
- HTMLファイルの作成
- CSSファイルで見栄えを整える
- JavaScriptファイルで動きを加える
順に見ていきましょう。
1. エディタ（VSCode）のインストール
ホームページ制作を始めるには、コードを書くためのエディタが必要です。
おすすめは、Microsoftが提供する Visual Studio Code（VSCode）です。
・多数の便利な機能が無料で使える
・ホームページ制作に適した拡張機能が豊富
多くのプログラミング言語に対応しているうえ、無料で利用できますので、ぜひインストールしてみてください。
1．VSCodeの公式サイトにアクセス
まず、VSCodeの公式サイトにアクセスします。
2．自分のOSに合ったバージョンをダウンロード
右上の「Download」をクリックし、Windows、Macなど自分のOSに応じたボタンからダウンロードします。
3．インストール
ダウンロードしたインストーラーを実行し、画面の指示に従ってセットアップを完了させます。
2. HTMLファイルの作成
エディタの準備ができたら、ホームページの構造や内容を記述するためのHTMLファイルを作成します。
HTMLファイルの作成手順は次のとおりです。
1．プロジェクトフォルダを作成する
デスクトップ上に「test」という名前の新規フォルダを作成します。
2．VSCodeにフォルダを読み込む
作成したフォルダをVSCodeにドラッグアンドドロップして読み込ませます。
すると、エクスプローラーのサイドメニュー上にフォルダが表示されます。
3．HTMLファイルを作成する
フォルダ内に「index.html」という名前で新規ファイルを作成します。
4．基本構造を記述する
VSCodeでは、「!（感嘆符）」を入力してTabキーを押すと、自動的にHTMLの基本構造が挿入されます。
▼
これは「Emmet」という、短い記述で特定のHTMLやCSSのコードを展開できるVSCodeの便利な機能です。
Emmetはコーディングの効率をグッと上げられるため、コーダーはぜひマスターしましょう。
Emmetについては以下の記事で詳しく解説していますので、あわせてご覧ください。
5．内容を記述する
これでHTMLを記述する準備は整いました。
今回は例として、<p>タグを使って「こんにちは！」と表示するコードを記述します。
<p>こんにちは！</p>
6．ブラウザで確認する
作成したHTMLファイルをChromeのブラウザにドラッグアンドドロップして表示を確認します。
「こんにちは！」と表示されていればOKです。
3. CSSファイルで見栄えを整える
次に、ホームページの見た目を整えるためのCSSファイルを作成します。
1．CSS用のフォルダとファイルを作成する
testのフォルダ内に「css」という名前のフォルダを作り、その中に「style.css」というファイルを作成します。
2．HTMLファイルにCSSをリンクする
HTMLの<head>セクションに以下のコードを追加します。
<link rel=”stylesheet” href=”style.css”>
Emmetを使えば「link:css」と入力してTabキーを押すと、上記のコードを簡単に展開できます。
このままではパスが書かれていないため、「./」で参照先のファイル候補を出し、「./css/」を追加しましょう。
3．CSSでスタイルを設定する
「style.css」に以下のコードを記述します。
body {
background-color: #000;
color: #fff;
}
再びブラウザで表示を確認すると、背景が黒、文字が白に変わります。
▼
特に初心者はパスを間違えたまま修正を繰り返してしまう人が多いので、細かく確認してみてください。
4. JavaScriptファイルで動きを加える
HTMLやCSSだけでも基本的なホームページは完成しますが、JavaScriptを使うとページに動きを追加できます。
1．JavaScript用のフォルダとファイルを作成する
testのフォルダ内に「js」というフォルダを作り、その中に「script.js」を作成します。
2．HTMLファイルにJavaScriptをリンクする
HTMLの<body>タグの末尾に以下を追加して、HTMLとJavaScriptをリンクさせましょう。
Emmetを使えば「script:src」と入力してTabキーを押すと、上記のコードを簡単に展開できます。
Emmetを使用した場合は「./js/script.js」を追記してください。
3．簡単な動きを追加する
今回は例として「script.js」に以下のコードを記述して動きを追加します。
document.querySelector(‘p’).addEventListener(‘click’, function(e) {
e.target.style.color = ‘red’;
});
再読み込み後、ページ内の「こんにちは」をクリックすると、文字色が赤に変わることを確認できます。
どのホームページを作る際も今回紹介した流れで進めていきますので、しっかりと押さえておきましょう！
知っておきたいVSCodeの便利な機能3つ
VSCodeにはコーディングに役立つ便利な機能が多数あります。
その中でも特に知っておきたい3つをご紹介します。
- 自動保存
- 自動フォーマット
- Live Server
1．自動保存
自動保存は初心者だけでなく、長時間コードを書くプロにも欠かせない機能です。
コードの保存忘れを防ぐために、VSCodeの「オートセーブ」機能を有効化しましょう。
設定方法は次のとおりです。
VSCode左下の「管理アイコン」→「設定」→「Auto Save」を検索→「off」から「After Delay」に変更
デフォルトでは「off」になっているため、「After Delay」に変更する必要があります。
なお、他にも「onFocusChange」「onWindoesChange」がありますが、数秒間操作がない場合に自動保存される「After Delay」がおすすめです。
2．自動フォーマット
VSCodeにはフォーマットの機能が備わっているため、ぜひ活用しましょう。
たとえば、意図せずにタグやスペースが乱雑になってしまった場合でも、右クリックメニューから「ドキュメントのフォーマット」を選ぶだけで、インデントやコードがすぐに整います。
また、設定画面で「Format on Save（保存時にフォーマット）」にチェックを入れて有効にすると、保存するたびに自動でコードが整えられるようになります。
3．Live Server
ホームページ制作で欠かせないのが、HTMLやCSSの変更が実際にどのように表示されるかをブラウザで確認する作業です。
「Live Server」を使うと、コードの変更を保存するたびにブラウザが自動で更新されるため、ブラウザを再読込して表示を確認する手間を省けます。
Live ServerはVSCodeの拡張機能からインストールでき、有効化すると右下に「Go Live」ボタンが表示されます。
「Go Live」をクリックするとリアルタイムで編集内容がブラウザに反映されるようになるため、パソコン画面でVSCodeを開きつつ、別の画面で画面表示を確認することが可能です。
まとめ：ホームページ制作の基本的な環境構築をマスターしよう！
本記事では、ホームページ制作の基本的な環境構築を解説しました。
- VSCodeをインストールする
- HTML、CSS、JavaScriptファイルを準備する
- VSCodeの便利な機能を活用する
上記を押さえておけば、自分のパソコン上で簡単なホームページを作り始めるところまで進められます。
ホームページ制作初心者の方は、まずこの記事の内容を一つずつ実践してみてください。
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。