初心者でもわかるHTML入門｜VS Codeのダウンロードから基本構造まで徹底解説

May 18, 2025June 12, 2025

はじめに

HTMLとは何か？

WebサイトやWebページの土台となる言語が**HTML（エイチティーエムエル）**です。
HTMLは「HyperText Markup Language」の略で、文章の構造や見出し、リンク、画像などをWebブラウザに伝える役割を持っています。

初心者の方でもわかりやすく、ゼロから丁寧にHTMLの基礎を学べるように解説します。
また、実際にコードを書くためのエディタとして、人気の**Visual Studio Code（VS Code）**の導入方法も詳しく紹介します。

このページを読み終える頃には、自分で簡単なHTMLページを作成し、ブラウザで表示できるようになります。
さっそく学びをスタートしましょう！

HTMLを学ぶために必要なもの

テキストエディタの選び方

HTMLを書くにはテキストエディタが必要です。
テキストエディタはプログラムのコードや文章を編集できるソフトウェアで、文字の装飾は基本的に行いません。
Windowsに標準で付いている「メモ帳」でもHTMLは書けますが、コードを書くならば機能豊富な専用エディタを使うことをおすすめします。

Visual Studio Code（VS Code）とは？

Visual Studio Code（VS Code）はMicrosoftが開発している無料のテキストエディタです。
拡張機能が豊富で、多くのプログラマーやWeb開発者に支持されています。
コードの色分けや補完機能があり、初心者でも使いやすいのが特徴です。
この講座ではVS Codeを使ってHTMLの開発環境を整えていきます。

VS Codeのダウンロードとインストール方法（Windows版）

公式サイトからのダウンロード

まず、VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
トップページにある「Download for Windows」ボタンをクリックしてダウンロードを開始します。

インストール手順と設定ポイント

ダウンロードが完了したら、ファイルを開いてインストーラーを起動します。
インストール画面では「デスクトップにアイコンを作成する」にチェックを入れておくと便利です。
その他の設定はデフォルトのままで問題ありません。
インストールが完了したら、「完了」ボタンを押して終了します。

VS Codeの起動と初期設定

VS Codeの起動確認

デスクトップに作成された「Visual Studio Code」アイコンをダブルクリックして起動します。
起動すると初期画面が表示されます。英語表記ですが、次の手順で日本語化できます。

日本語化（日本語表示に切り替える方法）

VS Codeの左側メニューにある「拡張機能」アイコンをクリックします。
検索ボックスに「Japanese Language Pack」と入力し、「Japanese Language Pack for Visual Studio Code」を見つけます。
「Install」ボタンを押してインストールします。
インストールが完了したら、Ctrl + Shift + Pを押してコマンドパレットを開きます。
「Configure Display Language」と入力して選択し、「ja」をクリックします。
再起動を求められるので、「Restart」をクリックしてVS Codeを再起動します。

これでメニューなどが日本語表記になります。

HTMLの基本構造と書き方

HTMLドキュメントの基本構造

HTMLファイルは以下のような構造で成り立っています

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出しタイトル</h1>
    <p>ここに文章が入ります。</p>
</body>
</html>

<!DOCTYPE html> はHTML5であることを宣言します。
<html>タグはHTML文書のルート要素です。
<head>タグ内にはページの情報（タイトルや文字コード）を記述します。
<body>タグ内に実際に表示される内容を書きます。

代表的なタグの使い方

<h1> ～ <h6>：見出しタグ（数字が小さいほど重要度が高い）
<p>：段落（文章）を表します。
<a href="URL">リンクテキスト</a>：リンクを作成します。
<img src="画像URL" alt="説明">：画像を表示します。

実際に簡単なHTMLページを作ってみよう

HTMLファイルの作成方法

VS Codeで新しいファイルを作成します。
上記の基本構造のコードをコピーして貼り付けます。
ファイル名を「index.html」で保存します。

ブラウザでの表示確認

保存したファイルをダブルクリックすると、既定のブラウザで開きます。
作成した見出しや文章が表示されていれば成功です。

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

ファイルを保存していないのに変更が反映されない
→ ファイルは保存しないとブラウザに反映されません。必ず保存しましょう。
ブラウザで真っ白な画面が表示される
→ HTMLタグの記述ミス（閉じタグ忘れなど）がないか確認してください。
日本語が文字化けする
→ <meta charset="UTF-8">の記述があるか確認しましょう。

まとめと次のステップへの案内

今回はHTMLの基礎知識と開発環境の準備、簡単なHTMLページの作成方法を学びました。

これからはタグの種類や属性を増やし、より複雑なページを作っていく段階に進みます。
ぜひ次のステップでCSSやJavaScriptといった技術にもチャレンジしてみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！