第1回 HTML体験：メモ帳で自己紹介ページを作ろう

2026年7月16日

広告

今日の目的

今日の目的は、難しいWebページを作ることではありません。

今日の目的は、次の1つです。

自分で書いたHTMLファイルを、ブラウザで表示してみること

HTMLは、Webページを作るための基本になるものです。

今回は、Visual Studio Codeは使いません。
Visual Studioも使いません。

使うのは、Windowsに最初から入っている メモ帳 と ブラウザ だけです。

まずは、

文字を書いたファイルが、ブラウザでWebページとして表示される

ということを体験してみましょう。

今日作るもの

今日は、簡単な自己紹介ページを作ります。

完成すると、ブラウザに次のような内容が表示されます。

自己紹介

こんにちは。
今日はHTMLを体験しています。

見た目はシンプルですが、これも立派なHTMLファイルです。

今日大切なのは、きれいなデザインにすることではありません。

HTMLファイルを作ると、ブラウザで表示できる

この感覚をつかむことが大切です。

手順1：保存用フォルダーを作る

まず、HTMLファイルを保存する場所を作ります。

これまでUnityでは、ドキュメントフォルダー内に MyUnityProjects を作りました。

HTMLでも同じように、専用のフォルダーを作ります。

今回は、次のような構成にします。

ドキュメント
└─ MyHTMLProjects
   └─ ProfilePage
      └─ profile.html

まず、エクスプローラーを開きます。

左側から ドキュメント を選びます。

その中に、次のフォルダーを作ります。

MyHTMLProjects

次に、MyHTMLProjects の中に、さらに次のフォルダーを作ります。

ProfilePage

今日作るHTMLファイルは、この ProfilePage フォルダーの中に保存します。

手順2：ファイル名拡張子を表示する

HTML体験でよくある失敗が、ファイル名です。

本当は、

profile.html

として保存したいのに、メモ帳で保存すると、

profile.html.txt

になってしまうことがあります。

これでは、HTMLファイルではなく、ただのテキストファイルとして扱われてしまうことがあります。

そのため、最初に ファイル名拡張子 を表示しておきます。

Windows 11の場合は、エクスプローラー上部から次のように操作します。

表示 → 表示 → ファイル名拡張子

ここにチェックを入れておきます。

これで、ファイル名の最後にある .html や .txt が見えるようになります。

手順3：メモ帳を開く

次に、メモ帳を開きます。

Windowsの検索欄に、

メモ帳

と入力して、メモ帳を起動します。

今回は、Visual Studioを使う必要はありません。

HTMLは、最初は普通のテキストとして書くことができます。

つまり、メモ帳だけでもHTML体験はできます。

手順4：HTMLを書いてみる

メモ帳に、次の内容を入力します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自己紹介ページ</title>
</head>
<body>
    <h1>自己紹介</h1>

    <p>こんにちは。</p>
    <p>今日はHTMLを体験しています。</p>
</body>
</html>

最初からすべてを理解する必要はありません。

まずは、入力して、保存して、ブラウザで表示することを目標にします。

手順5：HTMLファイルとして保存する

入力できたら、ファイルを保存します。

保存先は、先ほど作ったフォルダーです。

ドキュメント
→ MyHTMLProjects
  → ProfilePage

ファイル名は、次のようにします。

profile.html

メモ帳で保存するときは、次の点に注意します。

ファイル名：profile.html
ファイルの種類：すべてのファイル
文字コード：UTF-8

特に大切なのは、

ファイルの種類：すべてのファイル

です。

ここを変えないと、profile.html.txt になってしまうことがあります。

手順6：ブラウザで開いてみる

保存できたら、ProfilePage フォルダーを開きます。

その中にある、

profile.html

をダブルクリックします。

すると、ブラウザが開きます。

画面に、

自己紹介

こんにちは。
今日はHTMLを体験しています。

と表示されれば成功です。

手順7：少し修正してみる

HTMLファイルは、一度作って終わりではありません。

メモ帳で内容を少し変えて、もう一度保存してみましょう。

たとえば、次の1行を追加します。

<p>少しずつパソコンに慣れていきたいです。</p>

追加する場所は、</body> より上です。

たとえば、次のようになります。

<body>
    <h1>自己紹介</h1>

    <p>こんにちは。</p>
    <p>今日はHTMLを体験しています。</p>
    <p>少しずつパソコンに慣れていきたいです。</p>
</body>

追加できたら、メモ帳で保存します。

そのあと、ブラウザに戻って更新します。

ブラウザの更新は、通常 F5 キーでできます。

追加した文章が表示されれば成功です。

今日の大切な流れ

HTMLの学習では、次の流れがとても大切です。

HTMLを書く
↓
保存する
↓
ブラウザで開く
↓
修正する
↓
保存する
↓
ブラウザを更新する

この繰り返しが、Webページ作成の基本になります。

HTMLの大まかな形

今回書いたHTMLは、大きく見ると次のような形になっています。

<html>
<head>
    画面には直接表示されない情報
</head>
<body>
    ブラウザに表示される内容
</body>
</html>

head は、ページの設定を書く場所です。

たとえば、ページのタイトルや文字コードなどを書きます。

body は、実際にブラウザ画面に表示される内容を書く場所です。

今回ブラウザに表示されるのは、主にこの部分です。

<h1>自己紹介</h1>

<p>こんにちは。</p>
<p>今日はHTMLを体験しています。</p>

タグとは何か

HTMLでは、タグを使って文章に意味を付けます。

たとえば、次のHTMLを見てください。

<h1>自己紹介</h1>

これは、「自己紹介」という文字を大きな見出しとして表示する、という意味です。

次のHTMLは、文章の段落を表します。

<p>こんにちは。</p>

p は paragraph、つまり段落という意味です。

HTMLでは、多くの場合、開始タグと終了タグで文字を囲みます。

<p>こんにちは。</p>

この場合、

<p>

が開始タグです。

</p>

が終了タグです。

この2つで囲まれた文字が、1つの段落として扱われます。

もう少し内容を増やしてみる

時間に余裕があれば、自己紹介ページに項目を追加してみましょう。

<p> の下に、次の内容を追加します。

<h2>好きなもの</h2>
<p>好きな食べ物はカレーです。</p>

<h2>今勉強していること</h2>
<p>ITの基本を勉強しています。</p>

<h2>できるようになりたいこと</h2>
<ul>
    <li>パソコンに慣れる</li>
    <li>プログラムを書けるようになる</li>
    <li>Webページを作れるようになる</li>
</ul>

h2 は、h1 より少し小さい見出しです。

ul は、箇条書き全体を表します。

li は、箇条書きの1つ1つの項目です。

このように、HTMLでは文章の役割に合わせてタグを使い分けます。

完成例

最終的には、次のようなHTMLになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自己紹介ページ</title>
</head>
<body>
    <h1>自己紹介</h1>

    <p>こんにちは。</p>
    <p>今日はHTMLを体験しています。</p>
    <p>少しずつパソコンに慣れていきたいです。</p>

    <h2>好きなもの</h2>
    <p>好きな食べ物はカレーです。</p>

    <h2>今勉強していること</h2>
    <p>ITの基本を勉強しています。</p>

    <h2>できるようになりたいこと</h2>
    <ul>
        <li>パソコンに慣れる</li>
        <li>プログラムを書けるようになる</li>
        <li>Webページを作れるようになる</li>
    </ul>
</body>
</html>

この内容を profile.html として保存し、ブラウザで開くと、自己紹介ページとして表示されます。

よくある失敗

失敗1：profile.html.txt になっている

メモ帳で保存するときに、ファイル名が次のようになってしまうことがあります。

profile.html.txt

この場合は、HTMLファイルとしてうまく開けないことがあります。

保存するときは、次のようにします。

ファイルの種類：すべてのファイル
ファイル名：profile.html

失敗2：修正したのにブラウザに反映されない

HTMLを修正したあと、保存していない可能性があります。

次の順番を確認しましょう。

メモ帳で修正する
↓
保存する
↓
ブラウザを更新する

保存してから、ブラウザを更新します。

失敗3：文字が変に表示される

文字が変に表示される場合は、保存時の文字コードを確認します。

今回は、

UTF-8

で保存します。

また、HTMLの中に次の1行があることも確認します。

<meta charset="UTF-8">

今日のまとめ

今回は、メモ帳を使ってHTMLファイルを作成し、ブラウザで表示しました。

今日覚えておきたいポイントは、次の5つです。

HTMLは、Webページの内容を書くためのもの
HTMLファイルは、ブラウザで表示できる
メモ帳でもHTMLを書くことができる
ファイル名の .html には意味がある
修正したら保存し、ブラウザを更新して確認する

HTMLのタグをすべて覚える必要はありません。

まずは、

書く
保存する
ブラウザで見る
修正する
保存する
更新する

この流れに慣れることが大切です。

Webページは、最初はこのような小さなHTMLファイルから始まります。

今日の体験を通して、普段ブラウザで見ているページも、裏側ではHTMLなどの仕組みで作られていることを少しずつイメージできるようになりましょう。

訪問数 34 回, 今日の訪問数 34回

広告

C#

Posted by hidepon