メモ帳で簡単なホームぺージを作る方法

この記事では、Windowsの「メモ帳」アプリを使って、簡単なテキストベースのホームページを作る方法を解説します。なお、ホームぺージはHTMLという言語を用いて記述します。

パート 1 の 4:

HTMLドキュメントを作成する

1
「スタート」
を開く　画面の左下にあるWindowsのロゴをクリックすると、「スタート」メニューがポップアップ表示されます。
2
「メモ帳」を検索する　メモ帳と入力すると、「スタート」メニューの上部付近に検索結果の一覧が表示されます。
3
メモ帳をクリックする　検索結果の一覧の一番上にある青いメモ帳のアイコンのことです。このアイコンをクリックすると、「メモ帳」ウィンドウが表示されます。
4
ファイルをクリックする　「メモ帳」ウィンドウの左上にあります。これをクリックすると、ドロップダウンメニューが表示されます。
5
名前を付けて保存...を選択する　ドロップダウンメニューの中にあります。これを選択すると、「名前を付けて保存」ウィンドウが表示されます。
6
「ファイルの種類」のドロップダウンボックスをクリックする　ウィンドウの下部付近にあるオプションのことで、「テキスト文書（*.txt）」という表示になっているはずです。これをクリックすると、ドロップダウンメニューが表示されます。
7
すべてのファイルを選択する　ドロップダウンメニューの中にあります。これを選択すると、ファイルをHTMLドキュメントとして保存できるようになります。
8
ファイルの保存場所を選択する　ウィンドウの左サイドバーからドキュメントを保存したいフォルダの名前をクリックして選択します。
- 例えば、ドキュメントをデスクトップに保存したい場合は、左サイドバーを上にスクロールして、そこからデスクトップをクリックして選択しましょう。
9
ファイル名と「html」のファイル拡張子を入力する　「ファイル名」のテキストボックスをクリックしたら、ファイルに付けたい名前を入力して、その後ろに.htmlというファイル拡張子を付けます。
- 例えば、ホームページのファイルに「hello」という名前を付けたい場合は、hello.htmlと入力しましょう。
10
保存をクリックする　現在のドキュメントをHTML形式に変換します。これで、ホームページの初期設定に進むことができるようになります。
- 「メモ帳」をうっかり閉じてしまったり、あとでドキュメントに戻らなければならない場合は、HTMLファイルを右クリックして、ドロップダウンメニューから編集を選択しましょう。
広告

パート 2 の 4:

ホームページを設定する

1
ホームページの言語タグを挿入する　「メモ帳」にまず挿入しなければならないのは、このドキュメントがHTML形式で記述されているということを宣言するタグです。「メモ帳」には以下のように入力します。
```
<!DOCTYPE html>
<html>
```
2
「head」タグを挿入する　このタグを使ってページタイトルの先頭と末尾を指定しましょう。ページタイトルは次のステップでつけることになります。とりあえずは、「<html>」タグの後に<head>と入力して↵ Enterを2回押し、スペースを空けたら、</head>と入力しましょう。
3
ホームページにページタイトルをつける　ページタイトルは、「<title></title>」タグの間に記述して「head」タグの行間に挿入し、ブラウザタブに表示させるホームページの名前を指定します。例えば、ホームページに「わたしのホームページ」というページタイトルをつけるには、以下のように入力します。
```
<title>わたしのホームページ</title>
```
4
「body」タグを挿入する　ホームページのコードは、すべてこの「body」タグの間に記述し、「</title>」タグの下に挿入します。
```
<body>

</body>
```
5
HTMLタグを閉じる　ドキュメントには、最後にページの末尾を指定するHTMLの終了タグ（閉じタグ）を挿入します。HTMLタグを閉じるときは、「</body>」タグの下に</html>と入力しましょう。
6
ここまでのHTMLドキュメントを確認する　ここまでのHTMLドキュメントは以下のようになります。
```
<!DOCTYPE html>
<html>

<head>
<title>わたしのホームページ</title>
</head>

<body>

</body>

</html>
```
7
ドキュメントを保存する　Ctrl+Sを押して、ドキュメントを保存しましょう。これで、段落や見出しなどのページ要素をドキュメントに挿入できるようになります。

広告

パート 3 の 4:

ページ要素を追加する

1
ホームページの要素がすべて「body」タグの間に挿入されていることを確認する　見出しや段落などの要素は、「<body>」タグと「</body>」タグの間に記述しなければなりません。
2
ホームページの大見出しを挿入する　「body」タグの間に<h1></h1>」と入力してから、「<h1></h1>」タグの間に挿入したいホームページの大見出しを入力しましょう。例えば、「ようこそ！」という見出しのページを作るには、以下のように入力します。
```
<h1>ようこそ！</h1>
```
- 小見出しを作るときは、「<h2></h2>」から「<h6></h6>」までのタグを使いましょう。
3
ページに段落テキストを挿入する　「<p></p>」という段落タグを入力してから、タグの間に段落として挿入したいテキストを入力しましょう。最終的には以下のようになります。
```
<p>これがわたしのホームページです。学級委員長選挙では、ぜひ私に投票してください！</p>
```
4
強制的に段を改める　段落または見出しの間に余白を入れたい場合は、その行の終了タグの後に<br>という改行タグを入力しましょう。例えば、段落の後に改行を入れるには、以下のように入力します。
```
<p>これがわたしのホームページです。学級委員長選挙では、ぜひ私に投票してください！</p><br>
<p>わたしはジャガイモも好物です。</p>
```
- 1つ目の改行タグの後に「<br>」タグをもう1つ挿入して、さらに改行すれば、段落と段落の間に余白を入れることができます。
5
テキストに書式を設定する　段落タグの間であれば、どのような単語や文、文章にも太字や斜体、下線、上付き、下付きなどの書式を設定することができます。
```
<b>太字</b>
<i>斜体</i>
<u>下線</u>
<sup>上付き</sup>
<sub>下付き</sub>
```
6
ホームページの見た目を確認する　ホームページの要素はさまざまですが、ドキュメントはだいたい以下のようになるはずです。
```
<!DOCTYPE html>
<html>

<head>
<title>わたしのホームページ</title>
</head>

<body>

<h1>ようこそ！</h1>
<p>これがわたしのホームページです。 気に入ってくれたら嬉しいです！</p>
<p><b>ここでは強調するために太字を使っています。</b></p>
<p><i>斜体だとおかしくなるかもしれません。</i></p>

</body>
</html>
```
広告

パート 4 の 4:

ホームページをテストする

1
ドキュメントを保存する　Ctrl+Sを押して、ドキュメントを保存しましょう。これで、HTMLドキュメントを開いたときに、最新版のホームページが表示されるようになります。
2
HTMLドキュメントを右クリックする　ドロップダウンメニューが表示されます。
3
プログラムから開くを選択する　ドロップダウンメニューの中にあります。これを選択すると、ポップアウトメニューが表示されます。
4
任意のブラウザを選択する　HTMLドキュメントはどのブラウザでも開くことができるので、ポップアウトメニューから好きなブラウザをクリックして選択しましょう。これで、選択したブラウザからHTMLドキュメントを開くことができます。
5
ホームページを確認する　書式がよさそうであれば、「メモ帳」を閉じてしまいましょう。
- HTMLドキュメントの編集を続けたい場合は、「メモ帳」に戻って必要な編集を行い、変更はこまめに保存するようにしましょう。
広告