HTMLファイルの作成方法とブラウザでの確認方法

HTMLとは？

HTMLは「Hypertext Markup Language」の略で、ホームページやブログなどのウェブページを作成するために使うマークアップ言語の一種です。

マークアップ言語には、他にもXMLやSVGなどもあります。

このページでは、HTMLの基本的な書き方や使い方について紹介しています。

HTMLはCSS（Cascading Style Sheet）と組み合わせて使うことが多いので、CSSについては別ページで紹介します。

HTMLはタグを組み合わせて使います。

色んなタグがあり、それぞれの使い方が掲載されているインターネット上のリファレンスサイトや書籍もあるので、どのタグがどんな使い方ができるか調べてみるといいでしょう。

HTMLファイルを作成・表示させるために必要なソフト

HTMLファイルを作成するためにはテキストエディタ（メモ帳、TeraPadなど）が必要です。

テキストエディタはWindows11に始めからインストールされており、かつ無料で利用できる「メモ帳」があります。

他にもネットからダウンロードとインストールをして利用できる「TeraPad」や「サクラエディタ」などもあります。

無料で利用できるものが多いですが、中には有料のものもあります。

学習目的であれば基本的には無料のもので差支えありません。

当サイトにおいても上記で挙げた「メモ帳」を利用して解説します。

「文字入力ならWordでもできるんじゃないか？」と思ったかもしれません。

確かにWordでも作成できますが、HTMLファイルの内容に余分なコードや情報が付け加えられる場合があり、HTMLのコードの書き方は正しくても上手く設定が反映されなくなってしまう場合があるのでおススメしません。

さらに、その作成したHTMLファイルを今あなたが閲覧しているようなWebページの形で表示させるためには「ブラウザ（インターネットの様々なページを見るためのソフト）」が必要です。

具体的には、現在あなたがこのページを見るために使っているソフト（Google ChromeやMicrosoft Edgeなど）です。

HTMLファイルの具体的な作成手順

ここからはHTMLファイルの具体的な作成方法について紹介します。

テキストエディタは、Windows11をインストールした時から一緒にインストールされている「メモ帳」を使います。

他のテキストエディタ（TeraPadやサクラエディタなど）を使いたい方は、そちらを使ってください。

まず、「メモ帳」を開く方法から説明します。

ウィンドウズボタン（パソコンの画面下の四角形が４個くっついているボタン）をクリック。

表示された画面の上にある「アプリ、設定、ドキュメントの検索」という部分に「メモ帳」と入力。

「もっとも一致する検索結果」の中の「メモ帳」をクリック。

あるいは右の「開く、管理者として実行・・・」といった一覧の中から「管理者として実行」をクリック。

「このアプリがデバイスに変更を加えることを許可しますか？」という画面が表示されるので、「はい」をクリック。

メモ帳が表示されました。

次に、下記の「<!doctype html>」から「</html>」までを入力します。

余分な空白が含まれていると表示がおかしくなる場合があるので、余分な空白は含めずにお願いします。

各行の意味はこちらのページで説明しています。

また、「<」「>」「"」「!」「（空白スペース）」「/」「-（ハイフン）」などの記号や数字は全て半角で入力してください。
これらを全角で入力すると上手く表示されないことがあります。

<!doctype html>の「<!doctype」と「html>」の間、<html lang="ja">の「<html」と「lang="ja"」の間、<meta charset="utf-8">の「<meta」と「charset="utf-8">」の間はそれぞれ半角スペースを1個入力してください。
半角スペースは半角入力の状態で「変換」ボタンと「無変換」ボタンの間にある、文字が何も書かれていない横長のボタンです。

<!doctype html>
<head>
<html lang="ja">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<p>Hello,World</p>
</body>
</html>

入力したら、メモ帳の画面の左上の「ファイル」をクリック。

名前を付けて保存をクリック。

画面が表示されますので、下の「エンコード」の部分が「UTF-8」になっているかを確認してください。

「名前を付けて保存」画面の左側にデスクトップ、ダウンロード、ドキュメント・・・といった感じで一覧がありますので、その中から「デスクトップ」をクリック。
（他の保存場所がいい方は任意の場所を選択してください）

そうすると、「Sample.html」というHTMLファイルがデスクトップに作成されました。

なっていなければ、クリックして「エンコード:」の横の項目をクリックし、選択肢が表示されるので「UTF-8」をクリック。
（UTF-8(BOM付き)ではありません。）

画面下の「ファイル名(N):」の部分に、「Sample.html」と入力して「保存」をクリック。
「.（ドット）」は半角で入力してください。
半角入力の状態で「.、>、る、。」のボタンを押すと入力できます。

※注意点※
・「Sample.html.text」といった感じで表示されている場合は、それを「BackSpace」や「Delete」ボタンで消してから入力してください

・私は「Sample.html」という名前にしましたが、他の名前がいい方は任意の名前を入力してください

・名前を入力する時も、前後に余分や空白や文字を入力しないように注意して下さい

・任意の名前にした方はファイル名を「任意の名前.html」という表記にして下さい。

htmlファイルなので、「.html」の部分を消したり、別の名前にすると上手く表示されなくなります。

作ったHTMLファイルの開き方、ブラウザでの確認方法

続いて、作成したHTMLファイルを開く方法についてみていきましょう。

デスクトップ画面（色んなソフトやファイルのアイコンがたくさんある画面）を表示させます。
（今見ているブラウザの右上の「-」のようなボタンを押し、画面を最小化して、他のウィンドウを開いている場合は、同じ方法で最小化すると表示されるはずです。）

その中に先ほど作成した「Sample.html」の上にマウスカーソルを載せて、右クリック。

表示された一覧の中から「プログラムから開く」という項目の上にカーソルを載せると、右に「Google Chrome」「Microsoft Edge」・・・といった感じで一覧が表示されます。

その中から「Google Chrome」をクリック。
（私は「Google Chrome」を選択しましたが、「Microsoft Edge」などの他のブラウザがいいという方は任意のブラウザを選択してください。）

そうすると、Google Chromeの画面が表示されて画面左上に「タイトル」、その少し下に「Hello,World」と表示されていると思います。

この２つが表示されていれば、メモ帳に入力した内容が正しく書けているということです。

表示されていない場合は、再度、メモ帳を開いて誤字脱字や余分な空白が含まれていないか確認してください。

正しく表示されていれば、Google Chromeとメモ帳の画面のそれぞれ右上にあるバツボタン（ウィンドウを閉じるボタン）をクリックして閉じます。

以上がHTMLファイル作成の一連の流れです。

HTMLファイルの削除方法

先ほど作成したようなHTMLファイルを削除する方法について紹介します。

これ以降の内容は作成したHTMLファイルを引き続き使いますので、削除しなくても特に差支えのない方は削除しなくて構いません。

デスクトップ画面に作成した「Sample.html」のファイルのアイコンの上で右クリック。

表示された項目の下の方に「削除」があるのでそれをクリック。

これで削除できました。

しかし、この方法ではまだ「ゴミ箱」という場所に残っています。

そこで、ゴミ箱の中からも完全に削除したい場合についても紹介します。

デスクトップ画面の右下に「ごみ箱」というアイコンがあると思います。

そのアイコンの上でダブルクリック。
（ダブルクリックというのは「マウス」の左ボタンを「カチカチッ」と素早く２回押すことです。）

ゴミ箱の画面が表示されます。

その中に先ほど削除した「Sample.html」があるので、そのアイコン上で右クリック。

表示された項目の下から２番目に「削除(D)」という項目があるのでそれをクリック。

「ファイルの削除」という画面が表示され、「このファイルを完全に削除しますか？」と表示されます。

ここで、「はい」を押すと「ごみ箱」から削除されもされますが、一度削除したファイルは基本的に復元できないのでご注意ください。

削除しても構わない場合は「はい」をクリック。

これで「Sample.html」をゴミ箱から削除できました。