メモ帳でHTMLファイルを作成する方法とコメントタグの書き方を解説

公開：2024年9月10日更新：2025年11月10日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLを学び始めた方の多くが、「メモ帳でHTMLファイルを作成できるのか」「HTMLコード内にメモやコメントを残す方法はあるのか」といった疑問を持ちます。実は、WindowsやMacに標準搭載されているメモ帳などを使えば、特別なソフトをインストールしなくてもHTMLファイルを作成できます。

さらに、HTMLには「コメントタグ」という機能があり、コード内に自由にメモを残せます。このコメントはブラウザに表示されないため、制作者だけが確認できるメモとして活用できるでしょう。

この記事では、メモ帳でHTMLファイルを作成する具体的な手順、HTMLのコメントタグでメモを書く方法などについて、初心者向けに詳しく解説していきます。

メモ帳でHTMLファイルを作成する方法
メモ帳を開いて基本タグを入力する
HTMLファイルとして保存する
ブラウザで表示を確認する
HTMLのコメントタグでメモを書く方法
1行コメントを書く
複数行コメントを書く
コメント内にタグを含める

メモ帳でHTMLファイルを作成する方法

メモ帳でHTMLファイルを作成する方法は非常に簡単です。HTMLを入力しファイル保存、そのファイルをブラウザで確認、という3工程しかありません。特別なソフトは不要で、Windowsに標準搭載されているメモ帳だけで完結するため、初心者でも気軽に始められるでしょう。

各手順について、簡単に解説していきます。

メモ帳を開いて基本タグを入力する

Windowsの場合、スタートメニューから「メモ帳」を検索して起動し、HTMLの基本構造となるタグを入力します。HTMLファイルには必ず記述すべき基本タグがあり、これらを正しく記述することによって、ブラウザが正常にページを表示できるようになります。

基本的なHTMLの構造は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTMLページ</title>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これはメモ帳で作成したHTMLページです。</p>
</body>
</html>

上記のコードでは、<!DOCTYPE html>でHTML5のドキュメントであることを宣言し、<html lang="ja">で日本語ページであることを指定しています。<head>タグ内にはページの設定情報を記述し、<body>タグ内には実際にブラウザに表示される内容を記述します。この基本構造を理解すれば、どのようなHTMLページでも作成できるようになるでしょう。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

HTMLファイルとして保存する

メモ帳でHTMLコードを入力したら、「ファイル」メニューから「名前を付けて保存」を選択し、拡張子を.htmlにして保存します。この際、ファイル名は半角英数字で入力し、日本語は使用しないことが推奨されます。

保存する際の設定は、以下の通りです。

ファイル名: index.htmlなど（半角英数字のみ）
ファイルの種類: すべてのファイル
文字コード: UTF-8

「ファイルの種類」を「すべてのファイル」に変更しないと、.html.txtという拡張子で保存されてしまい、ブラウザでHTMLとして認識されません。また、文字コードをUTF-8にすることで、日本語が正しく表示されるようになるため、この設定は必ず確認してください。

ブラウザで表示を確認する

保存したHTMLファイルをダブルクリックすると、既定のブラウザで自動的にページが開きます。Google ChromeやMicrosoft Edge、Firefoxなどのブラウザで、先ほど記述した内容が正しく表示されているか確認しましょう。

ブラウザで確認する際のポイントは、以下の通りです。

見出しや段落が正しく表示されているか
日本語が文字化けしていないか
タイトルバーにページタイトルが表示されているか

もし表示に問題がある場合は、メモ帳でHTMLファイルを開き直し、タグの閉じ忘れや文字コードの設定を再確認してください。ファイルを編集して上書き保存した後、ブラウザの更新ボタン（F5キー）を押せば、変更内容がすぐに反映されます。

HTMLのコメントタグでメモを書く方法

HTMLのコメントタグは、という形式で記述し、ブラウザには表示されないメモやコメントをコード内に残せます。制作過程での覚書や他の開発者への説明、一時的にコードを無効化する際などに活用でき、保守性の高いコードを書くために欠かせない機能です。

HTMLでコメントを書く方法として、以下の3つが挙げられます。

1行コメントを書く
複数行コメントを書く
コメント内にタグを含める

それぞれの方法は、用途や記述量に応じて使い分けることができ、コードの可読性を大幅に向上させます。コメントを適切に活用することで、後から見直したときに内容を理解しやすくなり、チーム開発においても重要な役割を果たすでしょう。

それでは各方法について、詳しく解説していきます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

1行コメントを書く

1行コメントは、の間に短いメモを記述する方法で、HTMLコードの特定の部分に簡潔な説明を付けたい場合に使用します。この形式は、コードの途中に挿入しても読みやすさを損なわないため、頻繁に活用されます。

1行コメントの記述例は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コメントの例</title>
</head>
<body>
  <!-- ここはヘッダー部分です -->
  <h1>ページタイトル</h1>
  
  <!-- メインコンテンツの開始 -->
  <p>本文がここに入ります。</p>
</body>
</html>

上記のコードでは、ヘッダー部分とメインコンテンツの区切りにコメントを挿入しています。このように、コードの構造を明確にするための短いメモを残すことで、後から見直したときに各セクションの役割をすぐに理解できるでしょう。

複数行コメントを書く

複数行コメントは、改行を含む長いメモや説明を記述する際に使用し、の間であれば何行でも記述できます。詳細な作業メモや複雑なコードの説明、著作権表示などに適しており、可読性を保ちながら詳細な情報を残せます。

複数行コメントの記述例は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数行コメントの例</title>
</head>
<body>
  <!-- 
    このセクションについて:
    - 作成日: 2025年1月1日
    - 担当者: 山田太郎
    - 修正履歴: 2025年1月15日にレイアウト変更
  -->
  <h1>お知らせ</h1>
  <p>最新情報をお届けします。</p>
</body>
</html>

上記のコードでは、セクションの作成情報や修正履歴を複数行のコメントとして記述しています。このように、プロジェクトの管理情報や詳細な説明が必要な場合は、複数行コメントを活用することで、情報を整理して残せるようになります。

コメント内にタグを含める

コメントタグの中にHTMLタグを記述することで、一時的にそのタグを無効化できます。この機能は、デバッグ作業やレイアウトの調整時に特定の要素を表示したくない場合に便利で、コードを削除せずに保持できるため、後から簡単に復元できます。

コメント内にタグを含める記述例は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タグを含むコメントの例</title>
</head>
<body>
  <h1>ページタイトル</h1>
  
  <!-- 
  <p>この段落は一時的に非表示にしています。</p>
  <img src="image.jpg" alt="テスト画像">
  -->
  
  <p>こちらの段落は表示されます。</p>
</body>
</html>

上記のコードでは、段落タグと画像タグをコメントアウトしているため、ブラウザでは表示されません。この方法を使えば、コードを完全に削除せずに一時的に無効化できるため、テスト作業や段階的な開発において非常に有用です。コメントを外せば、すぐに元の状態に戻せるでしょう。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。