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