このレッスンでは、パソコンでHTMLを書いてWebサイトを構築するための環境の準備を解説します。テキストエディタ「Visual Studio Code」をインストールし、最小構成のHTMLファイルを作成してブラウザで表示するところまでを、手順どおりに進めてみましょう。

テキストエディタの使用

HTMLファイルは文字だけでできたテキストファイルなので、Windows付属のメモ帳のような簡単なテキストエディタでも書くことはできます。ただし、HTML・CSS・JavaScriptのようなマークアップ言語・プログラミング言語を編集するには、Visual Studio Codeのような開発用の「テキストエディタ」を使うのがおすすめです。開発用のエディタには、要素名やプロパティ名を色分けして表示する機能、入力の途中で候補を表示する機能、閉じタグを自動で補う機能などがあり、記述ミスを減らせます。

Visual Studio Code

Visual Studio Codeは、マイクロソフトが無償で提供している、プログラミング言語の編集に最適化されたテキストエディタです。Windows、macOS、Linuxに対応しています。Visual Studio CodeはVS Code（ブイエスコード）と略して呼ぶことがあります。本コースでもVS Codeと表記します。

Visual Studio Codeのインストール

まず、公式サイトのダウンロードページ（URLはレッスン末尾の参考資料に掲載）から、使っているOSに合ったインストーラーをダウンロードします。Windowsの場合はインストーラー（.exe）、macOSの場合はアプリケーションの入った圧縮ファイル（.zip）が配布されています。

ダウンロードしたインストーラーを起動し、画面の案内に従ってインストールを完了させます。macOSの場合は、展開したVisual Studio Codeのアプリケーションを「アプリケーション」フォルダに移動します。

最初に済ませておくと便利な設定

必須ではありませんが、次の設定をしておくと以降の作業がしやすくなります。

• 日本語化: VS Codeの画面は標準では英語です。画面左側の拡張機能（Extensions）の一覧から「Japanese Language Pack for Visual Studio Code」をインストールし、案内に従ってVS Codeを再起動すると、メニューが日本語で表示されます。このレッスンの説明は日本語化した状態のメニュー名で書いています。
• フォルダーを開いて作業する: 「ファイル」メニューの「フォルダーを開く」で作業用のフォルダ（このレッスンではデスクトップに作る「Sample」フォルダ）を開いておくと、画面左側のエクスプローラーでフォルダ内のファイルを一覧でき、新しいファイルやフォルダもそこから作成できます。
• HTMLの雛形の自動入力（Emmet）: 拡張子が.htmlのファイルを編集しているときに、半角の「!」を入力してTabキーを押すと、HTMLの基本的な雛形が自動で入力されます。ただし、生成される <html lang="en"> は英語のページ用の指定なので、日本語のページでは ja に書き換えてください。

ファイルの拡張子を表示させておく

WindowsもmacOSも、標準の設定ではファイル名の末尾の拡張子（.html、.css、.jsなど）が表示されません。HTML、CSS、JavaScriptのファイルを扱うときは、拡張子を表示する設定にしておきましょう。拡張子が見えていないと、「sample.html.txt」のように意図しない拡張子が付いてしまったことに気付けず、ブラウザで開いても正しく表示されない原因になります。

• Windows 11: エクスプローラーを開き、「表示」メニューの「表示」から「ファイル名拡張子」にチェックを入れます。
• Windows 10: エクスプローラーの「表示」タブで「ファイル名拡張子」にチェックを入れます。
• macOS: Finderの「設定」（古いバージョンでは「環境設定」）を開き、「詳細」で「すべてのファイル名拡張子を表示」にチェックを入れます。

HTML/CSS/JavaScriptをVisual Studio Codeで編集する

それでは、実際にVS CodeでHTMLを書いてみましょう。VS Codeを起動し、「ファイル」メニューの「新しいテキストファイル」で新しいファイルを開くと、次のような画面になります。

この画面に、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<p>ページのコンテンツ</p>
</body>
</html>

入力したら、このファイルを「sample.html」という名前で保存します。あらかじめデスクトップに「Sample」という名前のフォルダを作成しておき、その中に保存してください。「ファイル」メニューの「名前を付けて保存」を選び、保存先にSampleフォルダを指定して、ファイル名を拡張子まで含めて「sample.html」と入力します。

保存したsample.htmlをエクスプローラー（macOSではFinder）でダブルクリックすると、ブラウザで開いて次のように表示されます。別のアプリケーションで開いてしまう場合は、ファイルを右クリックして「プログラムから開く」（macOSでは「このアプリケーションで開く」）からブラウザを選びます。

この時点では、CSSファイルとJavaScriptファイルはまだ作成していないため、文字だけの表示になります。これらのファイルは後の手順で作成します。

作成したHTMLファイルの各部分の説明

作成したsample.htmlの各部分を順に説明します。なお、<p>…</p> のように開始タグから終了タグまでの全体を「要素」、<p> や </p> のように要素の開始・終了を表す記法を「タグ」と呼びます。試験では要素・タグ・属性の区別が問われるため、このレッスンでも「要素」で統一して説明します。各要素の詳しい仕様は「全体構造とメタ情報」のレッスンで解説します。

DOCTYPE

<!DOCTYPE html>

文書型宣言（DOCTYPE宣言）です。HTML文書の先頭に必ず書きます。この宣言は、ブラウザを標準モード（仕様どおりに表示するモード）で動作させるためのものです。宣言がないと、ブラウザは古いページとの互換性のための後方互換モード（Quirksモード）で表示し、CSSの解釈などが変わってしまいます。「HTML5であること」やバージョン番号を示すものではなく、現在のHTML Standardでもこの短い形で書くことが定められています。大文字・小文字は区別されませんが、<!DOCTYPE html> の形で覚えておきましょう。

html

<html lang="ja"></html>

HTML文書全体を表す要素で、後述するhead要素とbody要素をこの中に書きます。lang 属性には、ページで使用している言語を指定します。日本語のページでは上のように ja、英語のページでは en と書きます。

head

<head></head>

文書のタイトル、文字エンコーディング、外部ファイルの読み込みなど、文書自体に関する情報（メタデータ）を書く部分です。原則としてページの画面には表示されません（title要素の内容がブラウザのタブに表示される程度です）。

title

<title></title>

ページのタイトル（表題）を書く要素です。ページの本文には表示されませんが、ブラウザのタブやウィンドウのタイトル、ブックマーク名、履歴、検索エンジンの検索結果の見出しなどに使われます。head要素の中に原則として1つ書きます。

meta

<meta charset="UTF-8">

meta要素には、ページの付加情報を書きます。さまざまな情報を指定できますが、必ず指定するのは文字エンコーディング（文字をデータとして表す方式）を示す charset 属性です。上の例では、UTF-8で書かれた文書であることを宣言しています。

ここで注意したいのは、宣言と実際の保存形式が一致している必要があることです。VS Codeは標準でファイルをUTF-8で保存するので、上の宣言と一致します（画面右下のステータスバーに「UTF-8」と表示されています）。別のエディタで保存するときに、Shift_JISなど別のエンコーディングで保存してしまうと、宣言と食い違って文字化けの原因になります。また、文字エンコーディングの宣言は文書の先頭から1024バイト以内に書く決まりになっているため、head要素の先頭近くに書きます。

<meta name="description" content="">

ページの説明文（要約）を表す description です。content 属性にページの説明文を書きます。検索エンジンは、この説明文を検索結果に表示する説明文（スニペット）として利用することがあります（必ず使われるわけではありません）。

link

<link rel="stylesheet" href="">

CSSは.htmlファイルの中に直接書くこともできますが、上の書き方は外部のCSSファイルを読み込む方法です。href 属性に読み込むCSSファイルを書きます。CSSファイルがHTMLファイルと同じフォルダにない場合は、次のようにフォルダ名を含めたパスで指定します。パスの意味は後の「HTMLにCSSファイルとJavaScriptファイルを紐づける」で説明します。

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

link要素では、CSSだけでなくファビコン（favicon）を指定することもできます。ファビコンとは、ブラウザのタブに表示される小さなアイコン画像のことです。指定しなくてもページの表示には問題ありませんが、ブラウザのタブやブックマークでページを識別しやすくなるため、設定を推奨します。

<link rel="icon" href="favicon.ico">

古いページでは rel="shortcut icon" という書き方も見かけますが、これは互換性のために許容されている歴史的な書き方で、標準のキーワードは icon です。なお、指定がない場合でも、多くのブラウザはサイトの最上位のフォルダにある favicon.ico を自動的に探して表示します。

script

<script src=""></script>

JavaScriptファイルを.htmlファイルで読み込む場合は、上のようにscript要素を使います。src 属性にJavaScriptのファイル名を書きます。CSSファイルを読み込む場合と同様に、フォルダ名を含めたパスで書くことが多いです。src 属性で外部ファイルを指定する場合でも、終了タグ </script> は省略できません。

ブラウザはHTMLを上から順に解釈していき、script要素に出会うとそこでいったんHTMLの解釈を止めて、スクリプトを読み込んで実行します。そのため、head要素の中に置いたスクリプトは、body要素の内容がまだ読み込まれていない時点で実行されます。本文の要素を操作するスクリプトでは、defer 属性を付けて <script src="./js/script.js" defer></script> のように書く（HTMLの解釈が終わってから実行される）か、script要素をbody要素の末尾に置くのが一般的です。このレッスンの例では、head要素内に置いたままでも動作を確認できる簡単なスクリプトを使います。async 属性・defer 属性の詳細は「モバイル向けの設定と読み込みの高速化」のレッスンで解説します。

body

<body></body>

head要素の次に書くのがbody要素です。その名のとおり、Webページの本体となるコンテンツを書く部分で、見出し・段落・画像・リンクなど、非常にさまざまな要素をこの中に書いていきます。

HTMLにCSSファイルとJavaScriptファイルを紐づける

先ほど作成したsample.htmlには、外部のCSSファイルとJavaScriptファイルを読み込む次の2行が含まれています。

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

./css/style.css のような書き方を相対パスといいます。先頭の「./」は「このHTMLファイルがあるフォルダ」（ここではSampleフォルダ）を表します。つまり ./css/style.css は、「Sampleフォルダの中のcssフォルダにあるstyle.css」という意味です（「./」は省略して css/style.css と書くこともできます）。同様に ./js/script.js は、Sampleフォルダの中のjsフォルダにあるscript.jsを指します。

この指定に合わせて、sample.htmlを保存したSampleフォルダの中に、次の2つのフォルダを作成します。

• css
• js

CSSファイルの作成

CSSは、ページの色や文字の大きさ、余白などの見た目（デザイン）を指定するための言語です。次の例では、ページ全体（body要素）の文字の種類・背景色・文字色と、段落（p要素）の背景色・内側の余白を指定しています。

VS Codeで新しいファイルを開いて次の内容を入力し、cssフォルダの中に「style.css」という名前で保存します。ファイル名と保存場所は、HTML側の href="./css/style.css" の指定と一致していなければなりません。名前や場所が1文字でも違うとファイルは読み込まれず、スタイルは反映されません。

body {
    font-family: sans-serif;
    background-color: blue;
    color: yellow;
}

p {
    background-color: white;
    padding: 20px;
}

保存したら、sample.htmlをブラウザで開き直します（すでに開いている場合は、再読み込みのボタンを押すか、WindowsではF5キー、macOSではCommand+Rキーで再読み込みします）。CSSが反映されて、次のように表示が変わります。

JavaScriptファイルの作成

次に、JavaScriptでページに動的な処理（例: ダイアログの表示、クリックに応じた表示の切り替え）を追加してみましょう。VS Codeで新しいファイルを開いて次の内容を入力し、jsフォルダの中に「script.js」という名前で保存します。こちらも、HTML側の src="./js/script.js" の指定と名前・場所を一致させます。

alert("JavaScriptが動いています！");

この状態でsample.htmlをブラウザで開く（または再読み込みする）と、次のようにメッセージの書かれたダイアログが表示されます。alert はブラウザにメッセージ用のダイアログを表示させる命令で、別のウィンドウ（ポップアップウィンドウ）を開くものではありません。このスクリプトはhead要素内で読み込んでいるため、ダイアログはページの本文が表示される前に出て、「OK」を押すと本文が表示されます。

CSSやJavaScriptが反映されない場合は、次の点を確認してください。

• ファイル名が「style.css」「script.js」、フォルダ名が「css」「js」になっているか（大文字・小文字、全角・半角、余分な拡張子にも注意）。
• ファイルを保存したか（VS Codeでは、未保存のファイルはタブに白い丸が表示されます）。
• ブラウザで再読み込みしたか。
• HTML側の href・src の指定と、実際のフォルダ構成が一致しているか。

まとめ

このレッスンで作成したファイルの構成は次のとおりです。HTMLファイルが、相対パスでCSSファイルとJavaScriptファイルを読み込む形になっています。

Sample/
├── sample.html
├── css/
│   └── style.css
└── js/
    └── script.js

次のレッスンでは、このSampleフォルダの中身をインターネット上に公開する方法を解説します。

このレッスンのポイント

• HTML・CSS・JavaScriptの編集には、Visual Studio Code（VS Code）のような開発用のテキストエディタを使う。VS CodeはWindows、macOS、Linuxに対応し、標準でUTF-8で保存する。
• 作業の前にOSの設定でファイルの拡張子を表示しておく。「sample.html.txt」のような意図しない拡張子に気付くため。
• <!DOCTYPE html> はブラウザを標準モードで動作させるための文書型宣言で、HTML文書の先頭に必ず書く。バージョン番号を示すものではない。
• head要素には文書のメタデータ（title、meta charset、link、scriptなど）を書き、body要素にはページの本体を書く。<meta charset="UTF-8"> の宣言と実際の保存形式を一致させる。
• ファビコンの指定は <link rel="icon" href="...">。本文を操作するスクリプトは defer 属性を付けるか、body要素の末尾で読み込む。
• 外部ファイルは、HTML側の href・src の相対パスと、実際のファイル名・フォルダ構成を一致させないと読み込まれない。

参考資料

• Visual Studio Code 公式サイト
• Visual Studio Code ダウンロードページ
• Visual Studio Code 公式ドキュメント
• HTML Standard – The DOCTYPE
• HTML Standard – Link type “icon”
• MDN Web Docs – <meta>: メタデータ要素
• MDN Web Docs – <link>: 外部リソースリンク要素
• MDN Web Docs – <script>: スクリプト要素