メモ帳で作成する結論と準備
メモ帳を使ったHTMLの作成は、ファイル名をindex.htmlにし、保存時の文字コードをUTF-8にそろえ、ブラウザで開いて表示を確認する流れになります。その流れを押さえると、専用エディタを入れなくても、見出し、段落、リンク、画像、簡単な装飾まで扱えます。
そのため、最初に迷いやすい点は書く内容そのものより、.txtのまま保存してしまうこと、拡張子が見えない設定のまま作業すること、全角記号を混ぜてしまうことです。これらを避ければ、メモ帳で作成したファイルでもブラウザは文書として読み取れますし、ここがポイントです。
- HTML Living Standard
- Windows 11 標準メモ帳
- Google Chrome 126 / Microsoft Edge 126 / Firefox 127
公式仕様の詳細は、WHATWG HTML Living Standardで確認できます。要素や属性の実用的な参照には、MDNのHTMLドキュメントが使いやすく、ブラウザ間の対応状況も確認できます。
- メモ帳でファイルを作成するときの保存形式と拡張子の考え方
- 最小構成の文書をブラウザで開くまでの流れ
- 文字化け、改行、画像パスなど初心者がつまずきやすい原因
- CSSやJavaScriptを分けて管理するための基本
- 公開前に確認したいチェック項目
メモ帳で扱う基本構造
これから作成する文書は、<!doctype html>、<html>、<head>、<body>で骨組みを作ります。この骨組みがあると、ブラウザはページのタイトル、文字コード、本文の範囲を判断しやすくなります。
その中でも<meta charset="UTF-8">は、文字化けを防ぐために早い段階で入れておきたい記述です。Windowsのメモ帳は保存時に文字コードを選べるため、文書内の宣言と保存形式をそろえると安定するのが基本です。
💡 Tips: 拡張子が表示されない環境では、エクスプローラーの表示設定で「ファイル名拡張子」を有効にします。index.html.txtになっていると、ブラウザではなくテキストファイルとして扱われる場合があります。
具体的には、<title>にページ名を書き、本文側では<h1>と<p>を組み合わせますが、これは押さえたい点です。タイトルはブラウザのタブに出る名前であり、見出しはページ内の主題として読まれます。
一方、見た目の調整まで同じファイルに詰め込むと、後から修正する範囲が分かりにくくなります。そのため、小さな練習では<style>を使い、慣れてきたらstyle.cssへ分ける運用が扱いやすいです。
作成前に決めるファイル名と保存形式
メモ帳で作成する前に、保存先のフォルダを決めておくと、画像やCSSの参照が整理しやすくなるのが目安です。たとえばsiteフォルダを作り、その中にindex.html、style.css、imagesフォルダを置く形です。
このとき、ファイル名には半角英数字とハイフンを使うと、Web上に置いたときのトラブルを減らせます。日本語名でもローカルでは開けますが、URLやサーバー設定によって扱いが変わる可能性があります。
ただし、練習用の最初のファイルならindex.htmlだけで十分です。多くのWebサーバーではindex.htmlが標準の入口として扱われるため、後から公開を考える場合にもそのまま使いやすくなるのがポイントです。
方法1：最小構成のファイルを作る
最小構成では、ページの骨組みと本文だけを書きます。メモ帳で作成した内容をindex.htmlとして保存し、ブラウザへドラッグすれば、ローカル環境で表示を確認できます。
その表示が崩れる場合は、全角の＜や＞が混ざっていないか確認するのが一般的です。タグは半角の<と>で囲む必要があり、全角記号は本文の文字として扱われます。
具体的には、見出しを<h1>、説明文を<p>、リンクを<a>で表します。構造が単純なほど原因を切り分けやすいため、初回は装飾を後回しにするほうが理解しやすいです。
方法2：見出しと段落で読みやすく組む
見出しは文書の区切りを示し、段落は内容のまとまりを表するのが現実的です。<h1>をページ全体の主題に使い、下位の話題には<h2>や<h3>を使うと、読み手にも検索エンジンにも構造が伝わりやすくなります。
このとき、文字を大きくしたいだけで見出しを使うと、文書構造が不自然になります。見た目の大きさはfont-sizeやfont-weightで調整し、見出し要素は内容の階層に合わせるのが基本になると整理できます。
同様に、改行したいだけなら<br>を多用せず、段落を分けるほうが読みやすくなります。文章の意味が変わるところで<p>を分けると、CSSで余白を調整しやすくなります。
方法3：リンクと画像を追加する
リンクは<a>にhref属性を付けて書きますし、これが一つの目安です。内部ページへ移動する場合は相対パス、外部サイトへ移動する場合はhttps://から始まる絶対URLを使います。
そのリンク設計を練習するなら、アンカーの考え方を扱ったHTMLでアンカーリンクを活用する方法10選も参考になります。ページ内移動や別ページ移動の違いを押さえると、メモ帳で作成した小さなサイトにも自然に応用できると理解できます。
画像は<img>にsrcとaltを組み合わせます。srcは画像ファイルの場所を示し、altは画像が表示されない場合や支援技術で読まれる代替テキストになります。
ただし、画像ファイルを別フォルダに入れると、src="images/photo.jpg"のようにパスが変わりますが、覚えておくと役立つでしょう。画像名の大文字と小文字もサーバー上では区別される場合があるため、Photo.JPGとphoto.jpgを混同しないようにします。
方法4：CSSを加えて見た目を整える
見た目を整えるときは、style属性に直接書くより、<style>または外部のstyle.cssに分けるほうが管理しやすくなります。色はcolor、背景はbackground-color、文字サイズはfont-sizeで制御すると覚えるとよいでしょう。
これらの調整に慣れると、余白の扱いも見えてきます。要素の外側はmargin、内側はpadding、枠線はborderで整え、横幅はwidthやmax-widthで決めます。
一方、CSSだけでスライドのような表示を作る場合は、構造と装飾の分離がより大切になると考えられます。視覚表現の練習には、HTMLとCSSで手軽に作るスライドショーコピペ12選のようなパターンを読むと、クラス名とスタイルの関係を追いやすくなります。
このとき、displayをblock、inline、flexで切り替えると、要素の並び方が変わります。gapを使うと並んだ要素の間隔を整えられ、align-itemsやjustify-contentで配置も調整できると言えるでしょう。
方法5：JavaScriptを読み込む
動きを付けたい場合は、<script>でJavaScriptを読み込みます。小さな処理なら文書の末尾に直接書けますが、処理が増えるならmain.jsへ分けると修正範囲が分かりやすくなります。
その際、ボタン操作にはaddEventListenerを使い、対象要素の取得にはquerySelectorを使う書き方が一般的です。表示テキストを変えるならtextContent、クラスを切り替えるならclassListが候補になるのが基本です。
具体的な部品を作成する流れは、カレンダーのような小さなアプリにもつながります。日付の更新や画面の再描画に興味がある場合は、HTMLとJSを使ってカレンダーを作成・更新する方法10選が次の練習になります。
document.writeを使う例がありますが、通常のページ制作で常用する書き方ではありません。既存の文書を上書きする危険があるため、要素の更新にはtextContentやappendを使うほうが現行の実装に合いるのが目安です。早見表で確認する作成時の要点
メモ帳で作成するときは、書き方そのものだけでなく、保存名、文字コード、フォルダ構成、確認方法を同時に見る必要があります。下の早見表は、作業中に迷いやすい項目をまとめたものです。
| 項目 | 使う記述 | 役割 | 確認点 | つまずきやすい例 |
|---|---|---|---|---|
| 文書型 | <!doctype html> | 標準モードで解釈させます | 先頭に置きます | 空行や文字を前に入れる |
| ルート | <html lang="ja"> | 文書全体を包みます | langを入れます | 閉じタグを忘れます |
| 設定領域 | <head> | タイトルや文字コードを入れます | 本文を書かないようにします | 見出しを入れてしまいます |
| 本文領域 | <body> | 画面に出る内容を置きます | 見出しや段落を入れます | head内に本文を書く |
| 文字コード | <meta charset="UTF-8"> | 文字化けを防ぎます | 保存形式と合わせます | Shift_JISと混在します |
| タイトル | <title> | タブ名を決めます | 内容を短く表します | 空欄のまま保存します |
| 主見出し | <h1> | ページの主題を示します | 基本はページ内で絞ります | 装飾目的で乱用します |
| 小見出し | <h2> | 話題を区切ります | 階層を飛ばしすぎません | 順序だけで選びます |
| 段落 | <p> | 文章のまとまりを作ります | 意味で分けます | <br>だけで整えます |
| リンク | <a href="..."> | 別ページへ移動します | URLを正確に書きます | 引用符を閉じ忘れます |
| 画像 | <img src="..." alt="..."> | 画像と代替テキストを置きます | パスと説明を確認します | altが空のままです |
| リスト | <ul> | 順序なしの項目を表します | <li>を中に入れます | 直接テキストを入れます |
| 番号付き | <ol> | 順序のある項目を表します | 手順や順位で使います | 番号を手入力します |
| 強調 | <strong> | 意味の強い語を示します | 乱用を避けます | 太字目的だけで使います |
| 改行 | <br> | 行を途中で変えます | 住所などに限定します | 余白調整に使います |
| CSS読込 | <link rel="stylesheet"> | 外部CSSを読みます | hrefを確認します | ファイル名を間違えます |
| スクリプト | <script src="main.js"> | JSを読み込みます | 位置と読み込み順を見ます | 閉じタグを省略します |
| 色 | color | 文字色を変えます | 読みやすさを確認します | 背景と同化します |
| 背景 | background-color | 背景色を整えます | コントラストを見ます | 濃すぎる色を使います |
| 余白外側 | margin | 要素間の距離を作ります | 上下左右を分けます | 内側余白と混同します |
| 余白内側 | padding | 枠内の余裕を作ります | 背景色との関係を見ます | 外の距離を期待します |
| 枠線 | border | 領域を区切ります | 太さと色を整えます | 余白なしで詰まります |
| 横幅 | max-width | 読み幅を制御します | 広い画面で見ます | 固定幅だけにします |
| 配置 | display | 並び方を変えます | flexなどを選びます | 既定値を知らずに崩します |
| 間隔 | gap | 並んだ要素の距離を作ります | 親要素で使います | 対応する表示形式でない |
| 入力欄 | <input> | 短い入力を受けます | typeを選びます | ラベルを付けません |
| 送信 | <button> | 操作の起点になります | 文言を明確にします | リンクと役割が混ざります |
| フォーム | <form> | 入力内容をまとめます | actionを確認します | 処理先が空です |
| 取得 | querySelector | 要素を選びます | セレクタを正確に書きます | #や.を忘れます |
| イベント | addEventListener | 操作時の処理を登録します | イベント名を見ます | 関数を即時実行します |
メモ帳で作成するときの保存手順
メモ帳で作成した内容を保存するときは、保存ダイアログの「ファイルの種類」を「すべてのファイル」に変更します。ここを変えないと、入力した名前の後ろに.txtが付く場合があります。
そのうえで、ファイル名をindex.htmlにし、文字コードをUTF-8にして保存するのがポイントです。保存後にエクスプローラーで拡張子まで見える状態にすると、.htmlとして保存できたか確認できます。
ただし、Windowsの設定によっては既知の拡張子が隠れるため、見た目だけでは判断しにくい場合があります。プロパティを開いてファイルの種類を確認すると、テキスト文書かHTML文書かを切り分けられますし、ここを基本と考えるとよいでしょう。
ブラウザで開く方法は、ファイルをダブルクリックするか、ChromeやEdgeの画面へドラッグするだけです。修正後は保存してからブラウザを再読み込みすると、変更した内容が反映されます。
file:///から始まるURLで開かれます。サーバー上のhttps://とは扱いが異なるため、フォーム送信や外部ファイルの読み込みでは挙動が変わる場合があるのが一般的です。文字化けと表示崩れを防ぐ考え方
文字化けは、文書内のcharsetと保存時の文字コードが合っていないときに起きやすくなります。UTF-8で保存し、<meta charset="UTF-8">を入れる組み合わせにそろえると、原因を絞り込めます。
これに対して、表示崩れはタグの閉じ忘れや入れ子のずれで発生するのが現実的です。<ul>の中には<li>を置き、<a>の中に必要なリンク文字を入れるなど、要素ごとの役割を守る必要があります。
一般に、ブラウザは多少の書き間違いを補正して表示します。しかし補正された表示は意図どおりとは限らないため、最初のうちは小さく保存して小さく確認する進め方が向いていると整理できます。
この構造を深く理解したい場合は、HTMLとツリー構造をマスターする！初心者からプロまでわかる7つの完全ガイドが役立ちます。親要素と子要素の関係を把握できると、閉じタグの位置も追いやすくなります。
フォーム作成へ広げるときの注意点
入力フォームを作成するときは、<form>、<label>、<input>、<textarea>、<button>を組み合わせますし、ここがポイントです。見た目だけでなく、どのラベルがどの入力欄に対応するかを明確にすることが大切になります。
その対応は、for属性とid属性を同じ値にすることで表せます。支援技術でも読み取りやすくなり、クリックやタップで入力欄へ移動しやすくなると理解できます。
ただし、メモ帳だけで作成したローカルファイルは、送信先のサーバー処理を持ちません。問い合わせフォームとして公開するには、送信先のプログラム、メール送信処理、迷惑送信対策、プライバシー表示も別途必要です。
フォームの組み方を広げるなら、HTMLで問い合わせフォームを作成する方法5選！で、入力欄や送信ボタンの配置を確認できます。小さなフォームから始めると、属性の意味を整理しやすくなります。
公開前に確認したい項目
作成したページを公開前に見るときは、ブラウザでの見た目だけで判断しないほうが安定すると覚えるとよいでしょう。ファイル名、リンク先、画像パス、文字コード、代替テキスト、スマートフォン幅での読みやすさを順に確認します。
この確認では、hrefとsrcの違いを押さえると迷いにくくなります。リンク先はhref、画像やスクリプトの読み込み先はsrcであり、同じURLに見えても属性の役割が異なると考えられます。
一方、CSSの確認では、余白や文字サイズだけでなく、行間のline-heightも見ます。文章が詰まって見えるときは、font-sizeを大きくするより先にline-heightを調整すると読みやすくなる場合があります。
アクセシビリティの面では、画像のalt、フォームのlabel、リンク文字の分かりやすさを確認すると言えるでしょう。「こちら」のようなリンク文字だけでは移動先が伝わりにくいため、リンク先の内容が分かる文言にします。
作業を続けやすいフォルダ構成
メモ帳で作成したページが増えてきたら、フォルダ構成を早めに整えると保守しやすくなります。入口となるindex.html、装飾用のcssフォルダ、画像用のimagesフォルダ、動作用のjsフォルダを分ける形が一般的です。
その構成では、CSSの読み込みがhref="css/style.css"になり、JavaScriptの読み込みがsrc="js/main.js"になるのが基本です。ファイルを移動した場合は、読み込み先のパスも一緒に変える必要があります。
逆に、練習用のファイルを大量に同じ場所へ置くと、どれが完成版か分からなくなります。日付や用途を含めたフォルダ名に分けると、作成したページを後から見返しやすくなるのが目安です。
基本的に、ファイル名は小文字でそろえ、空白の代わりにハイフンを使うと扱いやすくなります。about-page.htmlやcontact.htmlのような名前なら、URLにしたときにも読み取りやすいです。
メモ帳から次の制作環境へ進む目安
メモ帳は余計な補助が少ないため、タグや属性を手で書く練習に向いています。一方、ファイル数が増えたり、入力ミスを早く見つけたくなったりしたら、コードエディタを使うほうが作業しやすくなるのがポイントです。
その目安は、<link>や<script>で外部ファイルを読み込み始めた頃です。補完、色分け、検索置換、括弧の対応表示がある環境では、閉じタグや引用符の抜けに気づきやすくなります。
とはいえ、最初から多機能な環境に頼る必要はありません。メモ帳で作成した小さなページをブラウザで開き、修正して再読み込みする流れを理解してから移行すると、エディタの補助が何をしているのかも把握しやすくなります。
これらを踏まえると、最初の目的は完璧なデザインではなく、文書構造、保存形式、表示確認の関係を理解することになるのが一般的です。基礎が固まると、CSS、JavaScript、フォーム、公開設定へ自然につなげられます。
関連記事
- 『HTMLでアンカーリンクを活用する方法10選
- HTMLとJSを使ってカレンダーを作成・更新する方法10選
- HTMLとCSSで手軽に作るスライドショーコピペ12選
- HTMLとツリー構造をマスターする！初心者からプロまでわかる7つの完全ガイド
- HTMLで問い合わせフォームを作成する方法5選！
※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。
