【VSCode】HTMLファイルの作り方を解説！

HTMLファイルとは、HTMLのルールに沿って書かれているテキストファイルの事です。

実際にHTMLファイルを書いて練習してみたいけど、ファイルの作り方が分からない方もいらっしゃると思います。

そこで、今回の記事では、VSCode（テキストエディタ）でHTMLファイルを作成する方法を解説します。

1 VSCodeでのHTMLファイルの作り方
2 ファイルを上書き保存する方法
3 まとめ

VSCodeでのHTMLファイルの作り方

では、早速HTMLファイルの作り方の手順を解説していきます。
※VSCodeは、既にインストール済みの想定での解説です。まだお済みでない方は、こちらよりダウンロードできます。

HTMLファイルの作り方の手順

1.HTMLファイルを格納する為のフォルダを作成
2.VSCodeを開いて、新しいファイルを作成
3.HTMLを記述
4.「〇〇.html」というファイル名で保存

1.HTMLファイルを格納する為のフォルダを作成

まずは、HTMLファイルを格納する為のフォルダを、パソコンのデスクトップ上、または任意の場所に作成します。

Windowsの場合と、Macの場合だと、若干ですが手順が異なります。

Windowsの場合 :右クリック→「新規作成」→「フォルダ」
Macの場合 : 右クリック→「新規フォルダ」

そうすると、名前がついていない新規のフォルダが作成されます。そのフォルダ上で右クリックを押すと、「名前の変更」という項目がありますので、ここをクリックすれば、任意の名前を付けることがきます。名前には、「website」「originalsite」等、サイト関連のフォルダだと認識しやすいフォルダ名にすることをおすすめします。

ここで作成したフォルダは、WEBサイトを作成していく上で、必要なファイル（CSSファイルや画像フォルダ等）をひとまとめにする為に作成しています。

2.VSCodeを開いて、新しいファイルを作成

次に、VSCodeを開いて新しいファイルを作成します。ファイルメニューの中の「新しいテキストファイル」をクリックしてください。

すると、エディタが開き、編集可能な状態となります。

3.HTMLを記述

続いて、HTMLを記述しますので、下記サンプルをコピーして貼り付けてください。こちらのサンプルコードは、HTMLを書く際の雛形ですが、意味がわからなくても大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトルが入ります</title>
</head>
<body>

<!-- この部分に内容を記述します。 -->
  
</body>
</html>

意味がわかっていないと、呪文のような不思議な文字列が並んでいるように見えるかもしれませんが、1つ1つの意味や記述ルールが分かれば、大した事はありませんので心配しなくて大丈夫です。

4.「〇〇.html」というファイル名で保存

サンプルの貼り付けが終わりましたら、手順1で作成したフォルダの中に、「〇〇.html」というファイル名で保存します。

ファイルメニューの中の「保存」をクリックすると、どこに保存するかの確認画面が表示されます。
※ショートカットキーでも可能です。Windowsの場合だと「Ctrl + Shift + S」、Macの場合だと「Shift + Cmd + S」です。

これで、HTMLファイルの作成完了です。

ファイル名のルールについて

1点注意しなければならないのが、HTMLのファイル名は、どんなものでも良いわけではないということです。

ファイル名ルール

・正しい拡張子をつけること
・日本語を使わない
・使えない記号を使用しない
・空白はNG
・ホームページは「index.html」に

正しい拡張子をつけること

必ず「〇〇.html」としなければなりません。

この「.（ドット）」よりも右側の文字列がそのファイルの種類を表している、拡張子と呼ばれる部分です。「.html」以外にも「.css」「.jpg」「.png」等の文字列を見たことがあるかもしれませんが、この文字列の部分が、コンピュータにファイルの種類を伝えています。

拡張子は、コンピュータがファイルの種類を判別する為の大切な情報になるので、間違えると、正しく認識できず、ファイルが開けなくなる可能性があります。

日本語を使わない

ファイル名に日本語をつける事は非推奨です。というのも、WEBサイトを公開する際、ファイルの置き場所となるWEBサーバーが半角英数字以外に対応していないのが理由となります。

基本的に、ファイル名は半角英数字でつける癖をつけておいた方が良いでしょう。

使えない記号を使用しない

ファイル名には使えない記号もありますので注意してください。

「:（コロン）」「;（セミコロン）」「*（アスタリスク）」「?（クエスチョンマーク）」「<（小なり記号）」「>（大なり記号）」などなど。

ファイル名に使える記号は、「-（ハイフン）」と「_（アンダーバー）」以外使わないよう意識してください。

空白はNG

ファイル名の中に、空白を入れる事はできません。

ホームページは「index.html」に

WEBサイトにアクセスして、一番はじめに表示されるページは、「index.html」という名前で保存するのが基本となります。

ファイル名が「index.html」だと、URLを省略することが可能です。

例えば、「https://〇〇/index.html」「https://〇〇/」でも、同じページが表示されます。

ファイルを上書き保存する方法

ファイルを編集して、上書き保存をしたい場合の手順も、基本的には同じです。

ファイルメニューの中の「保存」をクリックすれば、上書き保存ができます。
※ショートカットキーでも可能で、Windowsの場合だと「Ctrl + Shift + S」、Macの場合だと「Shift + Cmd + S」です。

まとめ

今回は、VSCodeでの、HTMLファイルの作り方を解説しました。

手順はとても簡単だったと思いますが、ファイル名をつける際のルールに関してはご注意いただければと思います。