HTML/CSS入門編｜1章：HTML文書を作成しよう

前の章に戻る次の章に進む

1章 HTML文書を作成しよう

本章では、Webページを作成するための基本言語であるHTML（Hyper Text Markup Language）を学んでいきます。

HTMLは、Webデザイナー、コーダー、フロントエンドやバックエンドのエンジニアなど、Web制作に関わるどの職種の人も、はじめに学習するべき重要な言語です。
決して難しい言語ではないので、誰でも読み書きができるようになりますが、いくつかのポイントをおさえて学習することにより、効率良く習得することができるでしょう。
本章以降の学習には、テキストエディタ（VSCode）とブラウザ（Google Chrome）が必要となります。
まだインストールが済んでいない場合は、0章の内容を参考にインストールと設定を終えてから学習をスタートしてください。

【1-1】HTMLの基本書式を学ぼう

初学者がHTMLを学習する流れ

実際にHTMLのコードを入力してWebページを作成する演習に入る前に、まずは、構造化 /マークアップ/タグ/開始タグ/終了タグ/要素/空要素/属性 /属性値などの前提知識となるHTMLの用語の意味や書式の解説をします。
その後、HTMLの基本構造と呼ばれるWebページの骨組みにあたるコードを実際に入力しながら、HTMLの書式、エディタやブラウザの操作方法についての理解を深めていくという流れで学習を進めていきます。
最初からすべての用語を覚える必要はありませんが、学習を進めていく過程で、繰り返し本章を読み直し、HTMLの概念をしっかりと身につけてください。

HTMLによる構造化

「HTML/CSS入門編はじめに - Webページのことを知ろう」で学習したとおり、WebページとはHTMLファイルのことです。

HTMLは「Hyper Text Markup Language」の略です。
- Hyper Text（ハイパーテキスト）とは、リンクを通じて他の文書や情報にアクセスできることを特徴としたテキストファイルのことです。
HTMLファイルは、HTMLタグと呼ばれる単語を記述して作成します。
HTMLタグの役割は、Webページの情報を論理的に構造化することにあります。
- HTMLタグによる情報の構造化といっても、とくに難しい話ではありません。
以下の「HTMLタグによる情報の構造化とは」の各項目のように、コンピュータやブラウザが文書の内容を正確に読み取ることができるだけでなく、人間にとっても理解しやすくなるように、用途に適ったHTMLタグを利用して情報を整理することを、構造化すると呼んでいるのです。
HTMLタグを使い情報を構造化することを、マークアップするともいいます。

HTMLタグによる情報の構造化とは

あるテキストには「タイトル」という意味を与える。
あるテキストには「目次」という意味を与える。
あるテキストには「見出し」という意味を与える。
あるテキストには「段落」という意味を与える。
あるテキストには「リンク」という意味を与える。
画像を挿入する。

上記のように、Webページのコンテンツを構成する各要素に対して、HTMLタグによって意味（役割）を付与することを構造化と呼びます。

続いて、HTMLによる構造化の具体例を見てみましょう。
上がテキストエディターで開いたHTMLファイル。下はそのHTMLファイルをブラウザで表示したものです。
情報が構造化されていないHTMLファイルと、構造化されたHTMLファイルを比べてみてください。

構造化がされていないHTMLファイル

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>みんなのパスタレシピ</title>
</head>

<body>
    みんなのパスタレシピ
    このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！
    ぜひ自分でつくって食べてみてね！
    ペペロンチーノ
    ペペロンチーノの写真
    材料
    にんにく・・・・・1片
    鷹の爪・・・・・1つ
    イタリアンパセリ・・・・・適量
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    フライパンにオリーブオイルを大さじ2入れる。
    にんにくと鷹の爪を入れて弱火で加熱する。
    同時にパスタを茹ではじめる。
    にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
    少し早めに上げたパスタをフライパンに入れる。
    ソースを絡めたら完成。
    カルボナーラ
    カルボナーラの写真
    材料
    卵・・・・・1個
    パンチェッタ・・・・・40g
    パルミジャーノ・レッジャーノ・・・・・20g
    生クリーム・・・・・40cc
    黒胡椒・・・・・少々
    オリーブオイル・・・・・適量
    パスタ麺・・・・・80g
    作り方
    パスタを茹ではじめる。
    生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
    フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。
    弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
    パスタとソースを混ぜてあえる。
    皿に盛りつけてから黒胡椒をかけて完成。
    Copyright &copy; pasta for everyone All Rights Reserved.
</body>

</html>

サンプルコード1－1

ブラウザの表示

HTMLタグによって正しく構造化されていないファイルは、テキストが横一列に連なった状態でブラウザに表示されます。
これでは人間にとって、とても読みにくいだけではなく、ブラウザやコンピュータにとっても、情報として読み取ることが難しいのです。

それでは、上記のファイルをHTMLタグにより、適切にマークアップしたものを見てみましょう。

適切に構造化されたHTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>みんなのパスタレシピ</title>
  </head>

  <body>
    <h1>みんなのパスタレシピ</h1>
    
    <p>
      このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br />
      ぜひ自分でつくって食べてみてね！
    </p>

    <h2>ペペロンチーノ</h2>
    <img src="images/peperoncino.jpg" alt="ペペロンチーノの写真" />

    <h3>材料</h3>

    <ul>
      <li>にんにく・・・・・1片</li>
      <li>鷹の爪・・・・・1つ</li>
      <li>イタリアンパセリ・・・・・適量</li>
      <li>オリーブオイル・・・・・適量</li>
      <li>パスタ麺・・・・・80g</li>
    </ul>

    <h3>作り方</h3>
    <ol>
      <li>フライパンにオリーブオイルを大さじ2入れる。</li>
      <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
      <li>同時にパスタを茹ではじめる。</li>
      <li>
        にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
      </li>
      <li>少し早めに上げたパスタをフライパンに入れる。</li>
      <li>ソースを絡めたら完成。</li>
    </ol>

    <h2>カルボナーラ</h2>
    <img src="images/carbonara.jpg" alt="カルボナーラの写真" />

    <h3>材料</h3>

    <ul>
      <li>卵・・・・・1個</li>
      <li>パンチェッタ・・・・・40g</li>
      <li>パルミジャーノ・レッジャーノ・・・・・20g</li>
      <li>生クリーム・・・・・40cc</li>
      <li>黒胡椒・・・・・少々</li>
      <li>オリーブオイル・・・・・適量</li>
      <li>パスタ麺・・・・・80g</li>
    </ul>

    <h3>作り方</h3>
    <ol>
      <li>パスタを茹ではじめる。</li>
      <li>
        生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
      </li>
      <li>フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。</li>
      <li>
        弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースもいれる。
      </li>
      <li>パスタとソースを混ぜてあえる。</li>
      <li>皿に盛りつけてから黒胡椒をかけて完成。</li>
    </ol>

    <p>Copyright &copy; pasta for everyone All Rights Reserved.</p>
  </body>

サンプルコード1－2

ブラウザの表示

テキストが適切にマークアップされると、ブラウザ表示では、見出しは見出しらしく太字に、箇条書き項目にはマーカー（・）や連番がつき、前後が改行されます。
図版（写真）が挿入されることで、テキストのみだった情報の具体性が増し、分かりやすくなりました。

これなら、人間にとっても読みやすいですし、ブラウザやコンピュータも正確に情報を読み取ることができます。

Webページ制作の学習は、HTMLタグを使い、情報を適切にマークアップする方法を学ぶところからスタートします。
以下に、HTMLタグの詳細を解説します。

HTMLタグについて

Webページの文書作成には、HTML（Hyper Text Markup Language）という、マークアップ言語を使用し、タグ（Tag）と呼ばれる単語を入れ子状に組んでいきます。

マークアップ言語とは

文書やデータの構造を記述するための言語
- Webページを作成するための HTML（Hyper Text Markup Language）や、
- Webシステム間でのデータのやりとりに使われる XML（eXtensible Markup Language）などがある。

HTMLタグは何種類あるの？

現在使用できるHTMLタグは100種類以上あります。
一般的なWebサイトを制作するために頻繁に使用されるタグは、そのうちの30〜40種類と言われています。
すべてのHTMLタグを覚える必要はありませんが、まずは30〜40種類のよく使うタグを覚えると、効率よく学習できます。
本章に登場するタグは、たいていのWebサイト制作において使用される学習必須のタグばかりです。

よく使うHTMLタグ一覧

タグ	意味	補足事項
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>	見出し	h1～h6の6段階で重要性を表す。
<p> </p>	段落テキスト	前後が改行されるが、ブラウザ表示ではそれ以外の変化はなし。
<ul> <li> </li> </ul>	箇条書き（順序なしリスト）	ulとliは必ずセットで使用する。
<ol> <li> </li> </ol>	箇条書き（番号つきリスト）	olとliは必ずセットで使用する。
<a> </a>	ハイパーリンク	ページ遷移。
<img>	画像の挿入	単独で使う空要素。

HTMLタグの要素（Element）と属性（Attribute）

要素（Element）とは：開始タグと終了タグ

開始タグ（Opening tag）と終了タグ（Closing tag）をセットにして｢対｣で使い、タグの指示を与えたい領域を囲むというのが、HTMLタグの基本的な書式です。
開始タグと終了タグで囲まれた領域には何らかの「意味付け」がなされます。
- 例えば、「タイトル」「見出し」「リンク」「段落テキスト」などと意味付けされます。
<title></title> を titleタグ、<p></p> を pタグ、<a></a> を aタグと呼びます。
開始タグと終了タグに囲まれて意味付けされた範囲を「要素（Element）」と呼びます。
title、h1、p、aなど、タグの基本的な意味を表すアルファベットや数字から構成される名前のことを「要素名」と呼びます。
要素名を囲む記号 <> をヤマカッコと呼びます。

空要素（Element）とは：

領域指定の必要がない画像の<img> や、改行の<br>、CSSの関連付けの<link> などのタグには終了タグがなく単独で使用します。
このような終了タグのないタグを空要素と呼びます。
空要素は <img />、<br />、<link /> のように要素名の後に /（スラッシュ）を入れて記述することがありますが、これは以前のバージョンのHTMLとの互換性を考慮しての記述で、スラッシュなしでも問題ありません。
エディタによっては /（スラッシュ）を自動で入れてしまうものがあるので、念のため記憶に留めておいてください。

属性（Attribute）とは

上記図解の例では、a要素にhref属性を追加し、属性値としてURLを指定しています。
これはハイパーリンク（a要素）とそのリンク先（href属性）を設定するための記述です。

要素に追加できるオプション設定（追加情報）のことを属性（Attribute）と呼びます。
属性を記述することで、HTMLタグに対し、より詳細な設定ができます。
追加できる属性の種類は使用する要素により異なります。
属性は、属性名＝”属性値” という書式で、開始タグの要素名の後に半角スペースを空けてから記述します。
- 誤って全角スペースを空けてしまった場合は、ブラウザは正しくHTMLを解釈できずエラーになります。

HTMLの基本構造を学ぼう

続いて、HTML文書を作成するにあたり、最低限必要とされるHTMLタグの組み合わせである基本構造について学びます。

Webページを作成するにあたり、まずはじめに記述しなければならないのが、ブラウザがWebページとして認識するために必要な「骨組み」にあたるコードです。
HTMLの骨組みにあたる必要最低限のHTMLタグのセットのことを「HTMLの基本構造」と呼びます。

HTMLの基本構造

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのWebデザイン</title>
  </head>
  <body>
    はじめてのWebデザイン
  </body>
</html>

サンプルコード1－3

基本構造に使われるタグは、htmlタグ、headタグ、titleタグ、bodyタグの4種類です。
しかし一般的なWeb制作においては、この4種類のタグに DOCTYPE 宣言（文書型宣言）と、metaタグを加えたものを「HTMLの基本構造」と呼んでいます。

HTML文書の構造図

HTMLサンプルコード1-3の基本構造は、下図のように、開始タグと終了タグに囲まれた領域を、下図のように「四角いボックス」として考えると、情報の構造が分かりやすくなります。

次に、HTMLの基本構造に使われる6種類のタグの役割について解説します。

① DOCTYPE宣言（文書型宣言）

<!DOCTYPE html>

サンプルコード1－4

<!DOCTYPE html> は、HTML文書が HTML5 の仕様に準拠していることをブラウザに伝えるための記述です。
この宣言があると、ブラウザはその文書をHTML5として扱い、最新のHTML仕様に基づいて表示します。
!DOCTYPE と html の間には、必ず半角スペースを入れます。
HTML文書の最初の行に記述します。

② htmlタグ

htmlタグ

<html></html>

サンプルコード1－5

htmlタグ（lang属性で日本語を指定した場合）

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

サンプルコード1－6

htmlタグは、「ここからここまでがHTMLのコードです」ということを表しています。
開始タグの <html> が「ここからHTMLのコードが始まる」という意味で、終了タグの </html> が「ここでHTMLのコードが終わる」という意味です。
- 開始タグと終了タグでコンテンツを囲むことにより、意味づけの領域指定をします。
このタグでコード全体を囲みます。

htmlタグのlang属性とは？

htmlタグのlang属性は、そのWebページに使用する主な言語を指定するための属性です。
日本語が主に使用されているページであれば、<html lang="ja">と記述します。
英語が主に使用されているページであれば、<html lang="en">と記述します。
必須の属性ではありませんが、アクセシビリティ、SEO、多言語対応の側面から指定することが推奨されています。

③ headタグ

<head></head>

サンプルコード1－7

headタグは、HTML文書のメタデータを記述するための要素です。
メタデータとは、主にブラウザや検索エンジンが読み取るための情報のことです。
メタデータはページに直接表示されることはありませんが、Webページの処理や表示、検索結果などに大きな影響を与えます。
メタデータではないが、外部CSSのリンクやファビコン（ページアイコン）を設定するためのlinkタグもheadタグ内に記述します。

headタグ内に記述できるメタデータの種類

④ metaタグによる文字コードの指定

<meta charset="UTF-8">

サンプルコード1－8

metaタグは、<head></head>の間に記述します。
文字コードとは、コンピュータが文字を識別するために、ひとつひとつの文字に与えられた「数値（コード）」のことです。
文字コードには多くの種類がありますが、Web標準の文字コードは UTF-8 です。
ブラウザでの日本語の文字化けを防ぐためには、metaタグを使いUTF-8を指定する必要があります。

⑤ titleタグ

<title></title>

サンプルコード1－9

titleタグは、<head></head>の間に記述します。
titleタグは、「Webページのタイトル」を表します。
<title>はじめてのHTMLマークアップ</title>のように、テキストを囲むように記述すると、そのテキストがブラウザのタブやタイトルバーに表示されます。
Googleの検索結果に表示されるページタイトルでもあります。

⑥ bodyタグ

<body></body>

サンプルコード1－10

bodyタグは「Webページの内容（中身）」を表します。
ブラウザ画面に表示されるのはbodyタグ内に書かれたものだけです。
テキストも画像も、表示させたいものは全て<body></body>の間に書き込みます。

以上がHTMLの基本構造に使われる6種類のタグです。

【1-2】HTMLの基本構造を入力してみよう

それでは、テキストエディター（VS Code）を使用して、実際にHTMLの基本構造を入力してみましょう。

新規ファイルを作成しよう

新規ファイルを作成します。
メニューバーの「ファイル」から「新しいテキストファイル」を選んでください。

新規ファイルが作成されます。

新規ファイルを保存しよう

新規ファイルを保存する

新規ファイルの作成と保存

メニューバーの「ファイル」から「新しいテキストファイル」を選ぶ。
「ファイル」から「保存」または「名前をつけて保存…」を選ぶ。
保存先のフォルダを選ぶ。フォルダがなければ作成する。
ファイル名をつけてから保存する。（ファイル名の末尾には、適切な拡張子をつける）

入力画面にはまだ何も入力しなくて構いませんので、まずはファイル名をつけて保存します。
保存先に「html-lesson」というフォルダを作成し、「index.html」という名前をつけてファイルをそのフォルダ内に保存してください。（先にファイルを保存してからコード入力をしないと、VS Codeの入力サポート機能を利用することができません）

ファイル名やフォルダ名のつけ方を覚えよう

ファイルやフォルダに名前をつける際にはルールがあります。
以下のルールに従って命名しましょう。

ファイル名の付け方

使用可能な文字

半角英数字（a-zと0-9）。
アルファベットは小文字のみを使用する。
- 大文字と小文字を区別するシステム（UNIX系OS）でのエラーを防ぐため。
記号は「-」（ハイフン）と「_」（アンダースコア）のみが使用可能。
- 一般的には、アンダースコアよりもハイフンを優先して使った方が良いとされる。

拡張子をつける

拡張子とは、ファイル名の末尾につく文字列のこと。
通常は「.（ドット）」の後に続く半角英字で表される。
拡張子はそのファイルの種類や形式を示す。
拡張子に応じて、ファイルを開くアプリケーションが選ばれる。

ファイルの種類	拡張子
HTMLファイル	.html
CSSファイル	.css
JavaScriptファイル	.js
画像ファイル	.jpg / .png / .svgなど

フォルダ名の付け方

フォルダ名については、業界の慣習に従い、以下のように命名するとよいです。
- 画像ファイルを保存するフォルダ名は「images」または「img」にする。
- CSSファイルを保存するフォルダ名は「css」にする。
- JavaScriptファイルを保存するフォルダ名は「js」にする。

特別なファイル名「index.html」

通常、Webサイトのトップページのファイル名は「index.html」とします。
index.htmlは、URLを表記する際に、唯一省略可能なファイル名です。

なぜ「_ 」（アンダースコア）より「-」（ハイフン）を優先するの？

ファイル名やフォルダ名をつける際、記号で使用可能なものは、「-」（ハイフン）と「_ 」（アンダースコア）ですが、以下の理由により、一般的には、ハイフンを使用することが勧められています。

SEO（検索エンジン最適化）に適しているため

Googleなどの検索エンジンでは、「-」を単語の区切りとして認識する。
「_」は単語の区切りとして認識しない。
Googleは日本語の公式ドキュメントで、URL内の単語の区切りにアンダースコアではなくハイフンを使用することを推奨している。
- https://developers.google.com/search/docs/crawling-indexing/url-structure?hl=ja

例

study-support	「study」と「support」の2つの単語として認識される
study_support	「study_support」という1つの単語として扱われる

文書型宣言 <!DOCTYPE html>を入力しよう

<!DOCTYPE html>を入力する

HTMLの基本構造のタグを順番に入力していきます。
各タグの意味を、本章「HTMLの基本構造を学ぼう」節で確認しながら自分で入力してください。

まずは文書型宣言 <!DOCTYPE html>から入力します。
DOCTYPEが大文字で記述されるのは業界の慣習によるもので、小文字で記述してもまったく問題ありません。
VS CodeでHTMLのコードを入力する際、全ての文字を自分で入力する必要はありません。
VS Codeには、頭文字などを入力するだけで、HTMLやCSSの適切な単語の候補を予測して一覧表示する機能があります。
文書型宣言は「<」（ヤマカッコ）を入力すれば候補として「 <!DOCTYPE html>」が表示されますので、選択してenter（return）キーで確定すれば入力が完了します。

htmlタグ <html></html> を入力しよう

<html></html> を入力する

文書型宣言の下に、<html></html>を入力します。

HTMLタグは要素名だけを入力すれば候補が表示され、選択してenter（return）キーで確定すれば、開始タグと終了タグで対になったタグのセットが入力されます。

headタグ <head></head> を入力しよう

<head></head> を入力する

次に、<html></html>の開始タグと終了タグの間で改行してから、<head></head>を入力します。

このように、タグの中に別のタグを組んでいくことを、入れ子にするといいます。
HTMLの基本構造は、タグを入れ子にする位置や順番には決まりがありますので、各タグをどこにどのような順番で入力するのかを覚えましょう。

metaタグ <meta> で文字コードを指定しよう

title

<head></head>の開始タグと終了タグの間で改行してから、<title></title>を入力します。

<meta charset="UTF-8">よりも下に記述することで、タイトルの文字化けも防止します。
<title></title>もメタ要素のひとつですので、<head></head>の間に入力します。
<title></title>内にはページタイトルを考えて入力します。
- ここでは、「はじめてのHTML」としました。

bodyタグ <body></body> を入力しよう

body

<head></head>の下に、<body></body>を入力します。

<body></body>の間に書かれたものが、Webページのコンテンツとしてブラウザ画面に表示されます。

VS CodeのEmmet機能を使用してHTMLの基本構造を入力しよう

Emmet

VS Codeは標準でHTMLやCSSのコード入力をサポートしてくれるEmmetという機能を備えています。

ここまでの基本構造の入力に利用した要素名を入力するとタグの候補が一覧表示される機能もEmmetのひとつです。
Emmetを使えば、HTMLの基本構造も簡単に入力できます。

HTMLの基本構造の出し方

「!」（エクスクラメーション）を入力してから、tabキー、またはenter（return）キーを押す。

この方法でHTMLの基本構造を出すと、最低限必要とされる基本構造のタグのセットに、<meta name="viewport" content="width=device-width, initial-scale=1.0">というレスポンシブデザインのコーディングのときに必要となるmetaタグと、htmlタグにlang="en"が追加されます。
- こちらのmetaタグは現段階では必要ありませんので、手動で消去してしまって構いません。
- また、lang="en"部分は、日本語ページを制作する場合は、lang="ja"に書き換えておくとよいでしょう。

【1-3】ブラウザプレビューをしよう

完成したHTMLをブラウザで確認してみましょう。

ブラウザにHTMLのコードを読み込ませて表示の確認を行うことを、ブラウザプレビューといいます。
ブラウザプレビューの方法は何通りもありますが、ここでは、どのような作業環境でも実行可能な 1. 手動でプレビューを行う方法と、2. VS Codeの拡張機能「Live Server」を利用したプレビュー方法の2通りの方法を紹介します。
以下の方法でブラウザプレビューを行い、自分で作成したHTMLファイルが問題なくブラウザで表示されるかを確認してください。

1. 手動でプレビューを行う方法

手動でプレビューを行う

こちらがもっともシンプルなブラウザプレビューの方法です。

手動プレビューの手順

ブラウザウインドウを1枚開く。
HTMLのファイルアイコンをブラウザウインドウ内にドラッグ&ドロップする。
ブラウザウインドウにHTMLのレンダリング結果が表示される。

コンテンツを修正してからブラウザ表示を更新しよう

ブラウザ表示を更新する

VS Code 自動保存の設定方法

Webページ制作は、HTMLやCSSのコードを追加・修正する度に、その都度、何度も何度もブラウザでの表示確認を行い、表示の崩れているところがないか、考えたとおりに表示されているかなどを確認しながら作業を進めていきます。
以下の動画「ブラウザ表示を更新する」では、bodyタグ内に記載された「HTMLの基本構造」というテキストを、「HTMLの基本構造を学びました。」という文章に書き換え、その修正内容をブラウザ表示に反映させるまでの過程を確認することができます。

コンテンツを修正してからブラウザ表示を更新する手順

HTMLの内容を修正する。
HTMLファイルの内容を上書き保存する。
ブラウザの更新ボタンをクリックする。

上書き保存の方法
ファイルの上書き保存はショートカットキーを使うと便利です。

OSの種類	上書き保存のショートカット
Mac	⌘+S
Windows	Ctrl+S

ブラウザ更新（リロード）の方法
ブラウザの更新ボタンをクリックする以外に、ショートカットキーも覚えておきましょう。

OSの種類	ブラウザ更新のショートカット
Mac	⌘+R
Windows	Ctrl+R または F5

自動保存の設定方法

また、VS Codeの「設定」から、Auto Saveの設定をafterDelayにしておくと、上記のショートカットキーを使用しなくても、ファイルの内容が変更された際に自動保存されます。
上書き保存を忘れるミスを防止できますので、設定しておくと良いでしょう。

2. VS Codeの拡張機能「Live Server」を利用したライブプレビューの方法

拡張機能 Live Serverのインストールから初回プレビューまで

拡張機能 Live Serverによるライブプレビュー

次に解説するのは、VS Codeの拡張機能「Live Server」を利用したライブプレビューの方法です。

拡張機能 Live Serverによる初回プレビューまでの手順

Live Serverをインストールする。
HTMLなどのWebページのファイル一式を格納したフォルダを、VS Codeの作業ウインドウにドラッグ&ドロップする。
フォルダ内のファイルがエクスプローラー（左側のサイドバー）に表示されるので、ファイル名をクリックまたはドラッグ&ドロップでHTMLファイルを開く。
ウインドウ右下の表示「Go Live」をクリックすると、ブラウザが起動し、HTMLファイルがプレビューされる。

注意事項

初回のプレビュー後は、コードの追加・修正と上書き保存を行う度に自動でブラウザが更新され、常に最新の状態でブラウザ確認ができるようになります。
- これをライブプレビューといいます。
自動保存の設定と組み合わせて使うと、コード入力からプレビューまでの作業を効率化できます。

これで「HTML/CSS入門編 1章 HTML文書を作成しよう」の解説を終わります。
次の章に進みましょう。