HTMLの基礎の基礎01

作成日：2026-04-11

【1】最小構成がこの4行だけです。

• たったこれだけでもちゃんとHPになります。
• まずはこれを実際に無料のサーバーにアップロードして、HPにするまでの手順です。

<html>
<body>

</body>
</html>

【2】上記の4行をテキストエディターを使用して書きます。

• メモ帳 ： Windows付属（無料）
• notepad++ ： https://notepad-plus-plus.org/（無料）（英語）
• mery : https://www.haijin-boys.com/（無料）（日本語）
• terapad : https://tera-net.com/（無料）（日本語）
• サクラエディタ : https://sakura-editor.github.io/（無料）（日本語）

 ※この中の1つだけを使います。

 ※しばらくは「メモ帳」で大丈夫です。

 ※個人的には「mery」がシンプルでわかりやすくてオススメですが、基礎の基礎を学ぶ間は、ぶっちゃけどれでもいいです。

 ※基礎がわかるようになった後は「VisualStudioCode」などのコードエディターを使用したり、お好みでいいのですが、とりあえず基礎の基礎を理解するまでは「テキストエディター」を使用していきます。

【3】1ページ目は必ず「index.html」という名前にします。

1. メモ帳を使う前提で話を進めます。
2. メモ帳を起動します。
3. 上記の4行をマウスでなぞってコピーし、メモ帳へペーストします。
4. 名前を付けて保存→「index.html」という名前にして保存します。
5. 「index.html」という名前にすることはとても重要です。他の名前にしてはダメです。
6. ファイル名が「index」で、ファイルの種類が「.html」です。すべて半角英字で手入力します。
7. PC内に専用のフォルダを作ってすべてそこへ保存すると管理がラクでわかりやすくなります。
8. PC内に保存するためのフォルダ名は半角英数でローマ字か英語にして下さい。重要です。
9. 今回は「HomePage001」という名前のフォルダにしておきます。（お好きな名前でいいんですけどね）

【4】メモ帳にコピペした4行の中に、何かを書き加えます。

• <body>～</body>の間に書き加えます。
• 日本語で大丈夫です。
• ここに書いた言葉だけが実際のHPに表示されます。
• 何かを書いておかないと、上記の4行だけをアップロードしてページを開いてみても真っ白なだけなので。

【5】この時、文章を<p>～</p>で囲む。

• 例えば「こんにちは！これが初めての私の自作ホームページです！」と、<body>～</body>の間に書いたとします。
• この場合「<p>こんにちは！これが初めての私の自作ホームページです！</p>」と書き加えます。
• これが1行になります。

<html>
<body>

<p>こんにちは！これが初めての私の自作ホームページです！</p>

</body>
</html>

【6】2行にするには。

• <p>こんにちは！</p>
• <p>これが初めての私の自作ホームページです！</p>
• と書きます。
• <p>～</p>で囲った文章が1行となります。

<html>
<body>

<p>こんにちは！</p>
<p>これが初めての私の自作ホームページです！</p>

</body>
</html>

※追記や書き換えなどを行ったら必ず「上書き保存」します。（Ctrl+S）

※<p></p>は何回も使うので「ぴー」と打って変換すると<p></p>が出てくるように私は日本語変換ソフト（IME）の辞書へ登録しています。

【7】無料サーバーにアップロードするための準備。

1. FC2ホームページ（無料）を使います。簡単でわかりやすいからです。
2. FC2IDにアカウントを新規登録します。（この中の1つに無料のホームページサービスがあります）
3. 「新規登録」をクリックし、メールアドレスを登録します。
4. 届いたメール内のURLリンクをクリックし、登録手続きをします。
5. パスワードの生成は16ケタにしておきます。多い方が安全です。
6. 登録したメールアドレスやパスワードなどを、ちゃんと紙のノートを用意して手書きで書き残しておきます。いざという時安心です。
7. 秘密の質問と答えを登録します。
8. 質問はどれでも構いません。
9. 記入する答えはバカ正直な内容にせず、例えば「異世界転生人ここに参上」とかそういう「他人に類推されない答え」にして下さい。
10. 正直に「鈴木」とか「佐藤」とか「東京」とか書いてしまうと、簡単に類推できてしまって乗っ取られてしまう可能性もあります。
11. これらのすべてを紙のノートに手書きで残して下さい。PCが壊れても、登録した情報をすべて書き残した手書きのノートがあれば大丈夫ですから。重要なことです。
12. 「PC関連のことなんだからPC内に残しておけばいいじゃん」と思うかもしれませんが、それが一番やってはダメなことなんです。
13. 重要なことなので覚えておいて下さい。「PCは突然壊れます」「デジタルデータは一瞬で消えます」「紙（のノート）に書いてあればPCよりもずっとずっと長く保存が可能」なのです。

【8】登録完了のメールが届いたら。

• 「プロファイル変更」からニックネームを変更しておきます。
• まだFC2IDに新規登録が完了しただけです。ここからFC2のサービスの1つであるホームページサービスを追加します。

• 画面左上の「FC2IDホーム」をクリックします。
• 画面右下にある「ホームページ」を「サービス追加」します。


• 無料プランや有料プランが表示されます。「一般・無料」このプランで登録します。

【9】FC2ホームページの設定。

• 「希望アカウント名」を入力します。
• シンプルな一般名称ほどすでに使用されているので、特徴があるけどわかりやすい独自の名前を付けて下さい。
• これがこのホームページのURLアドレスになります。


• 「ホームページのカテゴリー」を選択します。
• 「ホームページのタイトル」を入力します。


• 「ホームページの詳細」を入力します。
• 「利用規約に同意する」「登録する」
• 「ホームページを作成する」

【10】ファイルをアップロードする前に。

• 画面左上の、ホームページ管理「ファイルマネージャー」をクリック。
• すでに「.htaccess」と「index.html」というファイルが2つ入っています。


• これらはFC2側が事前に用意してくれているファイルです。
• このindex.htmlの中に書かれてるHTMLがどんなページを表示してくれているのか確認してみましょう。

• 画面上にある「自分のホームページを見る」をクリックすると確認できます。
• かなり改造して使えそうなHPですね。

• このあらかじめ用意されていたindex.htmlを右クリックして、名前を変更して保存しておきましょう。
• 「old_index.html」とかでいいでしょう。


• HTMLを今よりもほんの少し理解できるようになったら、これを改造してページを作ってみるのもいいです。

【11】ファイルをアップロード！あなたが書いたHTMLがホームページに！

• 先ほどテキストエディターで作ったご自身の「index.html」をドラッグして、ファイルマネージャーの中へドロップします。
• アップロードされます。


• 画面上の「自分のホームページを見る」をクリックしてみて下さい。
• 1行か2行、先ほどあなたが書いた挨拶が表示されているでしょうか？

• もしまだ「準備中」などのFC2のページが表示されているようなら、ブラウザのそのページを再読み込みしてみて下さい。
• うまく表示されたでしょうか？


• そのページをブラウザの「ブックマーク」に追加しておきましょう。
• それがあなたが自分で書いて作ったホームページです。


• これで基礎中の基礎「HTMLを書いて、サーバーを借りて、データをアップロードして、ホームページを作る」一連の流れができました。

【とりあえず今回はここまでです】

「最小限のhtmlを自分で書いて、無料のサーバーにアップロードして、本物のホームページを作成する。」

ホームページを作るための基礎中の基礎である、この一連の流れを解説しました。

まだ「理想の本格的なホームページ」にはなっていないとは思いますが、最小限のHTMLを自分で書いて、本物のホームページ作成までが、予想よりも簡単にできてしまったのではないでしょうか。

HTMLの基本が「挟む」ということがわかればOKです。

挟んで挟んで挟んで挟む。

箱の中に箱の中にまた箱。

マトリョーシカ状態。

HTMLはこれの繰り返し構造になります。

次回は基礎として最低限必要な「改行」「URLリンクの貼り方」「画像の貼り方」を解説したいと思います。