MENU

初心者でも安心！ホームページとvscodeで始める環境構築ガイド

大規模情報サイト運営
vscode ホームページ
2025/11/29
目次

はじめに

目的

この章は、VSCode（Visual Studio Code）を使ってホームページを作る全体像をわかりやすく示すために書きました。まず何を準備し、どの順で学べばよいかを把握できます。

対象読者

初めてホームページ制作をする方や、エディタの使い方に不安がある方に向けて書いています。パソコンの基本操作（ファイルの作成・保存）ができれば始められます。

本書で学べること

  • VSCodeの基本的な使い方（ファイルを開く・保存するなど）
  • 環境構築の手順（インストールと設定）
  • HTML・CSS・JavaScriptの基本的なファイル構成と役割
  • ブラウザで確認するための拡張機能の導入例（例：Live Preview）
  • 実践的な制作ステップとプロジェクト整理のコツ

進め方の提案

章ごとに手を動かしながら進めると理解が早くなります。まずは小さなページを1つ作り、章を読み進めながら機能を追加してください。

必要な準備

インターネット接続とパソコン（Windows・macOS・Linuxのいずれか）があれば十分です。ソフトは本書の手順に従ってインストールします。

VSCodeとは何か、なぜ必要なのか

概要

Visual Studio Code（略してVSCode）は、軽量で高速なテキストエディタです。プログラムを書くために作られており、複数ファイルの編集や検索、保存がスムーズに行えます。Windows・macOS・Linuxで動作します。

主な特徴と具体例

  • コード補完：入力中に候補が表示され、タイプミスを減らせます。たとえばHTMLのタグやJavaScriptの関数名を素早く選べます。
  • 拡張機能：機能を追加できます。Live Serverでローカルのページを即座に確認したり、Prettierでコードの書式を自動整形できます。
  • 統合ターミナル：エディタ内でコマンドを実行できます。npmやgitコマンドを別ウィンドウに切り替えずに使えます。
  • デバッグ機能：ブレークポイントを置き、変数の中身を確認しながら動作を追えます。

なぜ必要か

複数ファイルを扱うと手作業ではミスや時間が増えます。VSCodeは作業を自動化し、エラーを早く見つけられるよう支援します。初めての人でも拡張機能を導入するだけで作業効率が大きく上がります。

誰に向いているか

初心者からプロまで幅広く使えます。学習中の人は補完や拡張で学びやすく、開発者はデバッグやバージョン管理で作業を高速化できます。

環境構築の第一歩 – VSCodeのインストール

はじめに

ホームページ制作を始めるには、まずエディタを用意します。ここではVisual Studio Code（以下VSCode）を公式サイトからダウンロードしてインストールする手順を説明します。

ダウンロード手順

  1. 公式サイト（https://code.visualstudio.com/）にアクセスします。\n2. 使用中のOS（Windows / macOS / Linux）を選び、表示されたインストーラーをダウンロードします。例：Windowsなら「User Installer」か「System Installer」を選べます。

インストールのポイント

  • 使用許諾契約書に同意して進めます。\n- Windowsでは「Add to PATH」や「Open with Code」を選ぶと便利です。\n- macOSは.dmgを開いてApplicationsにドラッグします。\n- Linuxは配布に応じて.debや.rpm、またはパッケージマネージャーを使います。

初回起動と確認

インストール後、VSCodeを起動してWelcome画面が表示されれば成功です。ファイル > 開くで適当なフォルダを開き、左側のエクスプローラーにファイルが見えれば準備完了です。

補足（注意点）

管理者権限が必要な場合があります。設定は後で変更できるので、初めてなら表示されるデフォルト設定のまま進めると無難です。

必須拡張機能 – Live Previewの導入

Live Previewとは

Live Previewは、VSCode内でHTMLを編集しながらリアルタイムにブラウザ表示を確認できる拡張機能です。保存や手動でリロードする手間が減り、見た目や動作の確認が速くなります。初心者が変化を目で追えるため学習効率が上がります。

インストール手順（簡単）

  1. VSCodeのサイドバーで「拡張機能」アイコンをクリックします。
  2. 検索欄に「Live Preview」と入力し、提供元がMicrosoftのものを探します。
  3. 「インストール」をクリックして完了です。

基本的な使い方

  1. HTMLファイルを開きます。
  2. 右上やエディタ上の「Open in Live Preview」ボタンを押すか、コマンドパレット（Ctrl/Cmd+Shift+P）で「Live Preview: Open Preview」を実行します。
  3. 編集すると自動で反映されます。画像やCSS、JavaScriptの変更も素早く確認できます。

よくあるトラブルと対処法

  • 変更が反映されない：ファイルを保存しているか確認してください。自動保存設定も有効にできます。
  • ポートやブラウザの問題：既存のLive Serverなど別の拡張と競合することがあります。その場合は不要な拡張を無効化してください。
  • ローカルファイルの読み込み制限：CORSやパスが原因の場合は、正しい相対パスを使うか簡易サーバーを利用してください。

導入は簡単で効果が大きいです。まずは1つのHTMLファイルで試してみてください。

基本ファイル構成 – HTMLファイルの作成

はじめに

ホームページ制作では、まず3つのファイルを用意します。index.html（内容と構造）、style.css（見た目）、script.js（動き）です。今回はindex.htmlの作成に焦点を当てます。

HTMLの基本構造

HTMLは決まった骨組みで書きます。最低限必要な要素は次の4つです。
– DOCTYPE宣言（文書の種類をブラウザに伝えます）
– 要素（文書全体を包みます）
– 要素（タイトルや文字コード、外部ファイルの読み込み）
– 要素（画面に表示する内容）

index.htmlの簡単な例

以下は最小限の例です。VSCodeで新規ファイルに貼り付け、index.htmlで保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ようこそ</h1>
  <p>ここにサイトの内容を書きます。</p>
  <script src="script.js"></script>
</body>
</html>

保存と確認

ファイル名は必ずindex.htmlにしてください。これをブラウザで開くと最初のページとして表示されます。VSCodeのLive Preview拡張を使うと編集と確認がスムーズです。

HTMLファイルの基本構造

基本の例

以下は最も基本的なHTMLファイルの例です。CSSとJavaScriptを外部ファイルで読み込み、文字コードを指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>見出しです</h1>
  <p>ここに本文が入ります。</p>
  <script src="script.js"></script>
</body>
</html>

各要素の役割

  • <!DOCTYPE html>
    ブラウザにHTML5で書かれていることを伝えます。省略すると表示が不安定になることがあります。
  • 言語を指定します。検索や音声読み上げで役立ちます。
  • 文字化けを防ぐために必ず指定します。
  • CSSを読み込み、見た目を整えます。
  • JavaScriptを読み込み、動きを追加します。bodyの最後で読み込むと表示が速くなります。

よくある注意点

  • ファイル名やパスを正しく指定してください。小文字・大文字や相対パスに注意します。
  • meta charsetはheadの先頭近くに置くと安全です。
  • 開発中はブラウザで保存→再読み込みを行い、変更が反映されるか確認してください。

CSSファイルで見た目を整える

CSSファイルを作る

新しいファイルを作り、名前をstyles.cssなどにします。HTML側では<link rel="stylesheet" href="styles.css">を<head>内に追加して読み込みます。

基本のスタイル例

次のように書くと見た目を整えやすくなります。

/* 全体の文字と背景 */
body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f8f9fa;
  color: #333;
  margin: 0;
}

/* 見出しの細かい調整 */
h1 {
  font-size: 24px;
  margin: 0; /* h1の上余白を消す */
}

/* コンテナの余白 */
.container {
  max-width: 800px;
  margin: 24px auto;
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

marginとpaddingの違い

  • marginは要素の外側の余白です。隣の要素との距離を調整します。
  • paddingは要素の内側の余白です。背景や境界線と内容の間を広げます。

ちょっとしたコツ

  • 共通の色やサイズは変数（カスタムプロパティ）にまとめると楽です。
  • ブラウザの開発者ツールで調整し、確認しながら保存します。
  • 汎用クラス（.btnなど）を作ると再利用できます。

最初は小さな変更を繰り返して見た目を整えてください。実際に触るほど感覚が身につきます。

JavaScriptで動きを加える

概要

JavaScriptはページを動的に変えるための言語です。ボタンを押したときに本文を変えたり、クラスを切り替えてアニメーションを動かしたりできます。処理は要素が存在してから実行する必要があります。

スクリプトの配置

  • に置く場合はdefer属性を付けます。これでHTMLの読み込み後に実行されます。
  • 直前に置けば、ルート要素が既に作られているためそのまま使えます。

ページ読み込み後に実行する方法

document.addEventListener(‘DOMContentLoaded’, () => { / 初期化 / });

クリックでテキストを変える例

<button id="btn">クリック</button>
<p id="msg">最初の文章</p>
<script>
document.getElementById('btn').addEventListener('click', () => {
  document.getElementById('msg').textContent = 'クリックされました！';
});
</script>

クラス切替で見た目を変える例

.fade { transition: opacity .5s; }
.hidden { opacity: 0; }

const p = document.querySelector('p');
p.classList.toggle('hidden');

簡単な動き（アニメーション）の考え方

短いループはrequestAnimationFrameを使うと滑らかです。setIntervalより描画タイミングに合いやすいです。

実践的な環境構築のステップ

概要

ホームページ制作の環境は4つのステップで進めます。手順を順に行えば初心者でも無理なく動く状態を作れます。

ステップ1: VSCodeの準備

VSCodeを起動し、作業用フォルダを開きます。拡張機能は必要に応じて追加しますが、まずはエディタだけで始めて問題ありません。

ステップ2: HTMLファイルの作成

作業フォルダに index.html を作成し、基本のHTMLを書きます。最初は見出しと段落だけでも構いません。

ステップ3: CSSで見た目を整える

同じフォルダに style.css を作り、index.html に <link rel="stylesheet" href="style.css"> で読み込みます。まずは文字の大きさや余白を調整しましょう。

ステップ4: JavaScriptで動きを加える

script.js を作り、最後に <script src="script.js"></script> を追加します。簡単なクリックイベントなどで動作確認します。

実践のコツ

ファイル名は半角英数字で統一し、ブラウザで表示できないときはパスの確認を行います。変更後はブラウザをリロードして動作を確かめてください。

プロジェクトフォルダの構成

目的

効率的に制作するため、関連ファイルをわかりやすく整理します。作業が増えても迷わず編集できるようにします。

推奨フォルダ構成（例）

Desktop/test/
  ├─ index.html
  ├─ css/
  │   └─ style.css
  ├─ js/
  │   └─ script.js
  └─ images/
      └─ logo.png

作り方（手順）

  1. デスクトップに「test」フォルダを作成します。
  2. index.html を作成します。
  3. css フォルダを作り、style.css を入れます。js や images フォルダも必要に応じて作成します。

実際のリンク例

HTML の head に書く例：

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

相対パスを使うとフォルダの中でそのまま動きます。

注意点

  • ファイル名は小文字で短く、スペースを避けます。
  • 同じ名前のファイルを別の場所に置くと混乱します。フォルダ分けで明確に管理してください。

ブラウザ確認環境の構築

概要

Live PreviewやLive Serverを使うと、コードを保存するだけでブラウザが自動で更新されます。編集→確認を素早く繰り返せるので、デバッグやデザイン調整が効率的に行えます。

Live Previewの使い方

  1. VSCodeの拡張機能で「Live Preview」を検索してインストールします。
  2. HTMLファイルを開き、右上のLive Previewアイコンかコマンドパレットから起動します。
  3. ブラウザが開き、保存すると自動で更新されます。

Live Server（代替案）

  1. 拡張機能「Live Server」を導入します。
  2. エディタで右クリック→”Open with Live Server”を選びます。
  3. ローカルのURL（例: http://127.0.0.1:5500）で動作確認できます。FetchやAjaxはローカルサーバで動かす必要があります。

ブラウザでの確認とデバッグ

  • 開発者ツール（F12）で要素やコンソールを確認します。
  • レスポンシブ表示でスマホサイズをテストします。
  • キャッシュが残ると更新が反映されないことがあるので、更新時はハードリロードやシークレットウィンドウで確認します。

よくあるトラブルと対処法

  • プレビューが起動しない: ポート競合やファイアウォールを確認します。
  • 保存しても反映されない: ファイルが保存されているか、拡張機能が有効か確認します。
  • 外部APIでCORSエラー: ローカルサーバからリクエストするか、API側の設定を確認します。

この環境を整えると、コーディングの試行錯誤が格段に速くなります。

初心者向けの最小限の知識

はじめに

ホームページ作成に必要な知識は思ったより少ないです。複雑な仕組みを後回しにして、まずはHTMLとCSSの基礎だけで実用的なサイトを作れます。

押さえるべき最小限の要素

  • HTMLの構造: headとbody、見出し（h1〜）、段落（p）、リンク（a）、画像（img）を使えれば十分です。
  • CSSの基本: 色、余白（margin/padding）、文字サイズ、背景。これだけで見た目が大きく変わります。
  • ファイル構成: index.html、styles.css、必要ならscript.js。シンプルに保ちます。

簡単な例

<!-- index.html -->
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>サイトの見出し</h1>
  <p>ここに説明文を書きます。</p>
</body>
</html>

作るときの心構え

1つのページを丁寧に作ってから拡張します。複雑な機能は後で追加できます。まずは「見やすさ」と「使いやすさ」を重視してください。

短いチェックリスト

  • ブラウザで表示できるか確認する
  • レスポンシブ（スマホで見やすいか）をざっくり確認する
  • コードは小さく分けて保存する

基礎に集中すれば、短時間できれいなホームページが作れます。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
vscode ホームページ
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次