Webサイトの「骨組み」を作ろう！初心者でも今日からわかるHTML入門

2025-11-24

記事サムネイル。「Webサイトの骨組みを作ろう！やさしいHTML入門」というタイトルと、家の骨組みやタグのサンドイッチのイラスト

これからWeb制作を始めようとしている皆さん、こんにちは。インターネットの世界へようこそ。

皆さんが普段何気なく見ているWebサイトやブログは、一体どのようにして作られているのでしょうか。「なんだか難しそうなプログラムの知識が必要なのでは？」と不安に思われているかもしれませんね。

でも、安心してください。Webページの基本は、実はとてもシンプルです。その土台となるのが、今回ご紹介する「HTML」です。HTMLは、決して難しいプログラミング言語ではありません。むしろ、コンピュータに対して「ここに文字を表示してね」「ここに画像を置いてね」と伝えるための、簡単な「指示書」のようなものです。

この記事では、専門用語をできるだけ使わず、日常の例え話を使ってHTMLの仕組みを優しく解説していきます。読み終える頃には、「なんだ、自分にもできそう！」と思っていただけるはずです。さあ、一緒にWebページ作りの扉を開けてみましょう。

読みたい場所にジャンプ

HTMLはWebサイトの「骨組み」

では、HTMLとは一体何なのでしょうか。一言で表すと、Webページの「骨組み」を作るための言葉です。

家を建てる時のことを想像してみてください。まずは柱や梁を組み立てて、家の構造を作りますよね。その後に、壁紙を貼ったり、家具を置いたりして綺麗に飾り付けていきます。

Webサイト作りもこれと同じです。HTMLは、この「最初の骨組み」を作る役割を担っています。「ここに大きな見出しを置く」「ここからここまでが文章の段落」「ここに画像を配置する」といった、ページの大まかな構造を決めるのがHTMLの仕事です。

ちなみに、壁紙を貼ったり色を塗ったりして見た目を整える（装飾する）役割は、「CSS（シーエスエス）」という別の言葉が担当します。HTMLで骨組みを作り、CSSで飾り付ける。この二つがセットになって、皆さんが普段見ている素敵なWebページができあがります。

HTMLは正式名称を「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」と言います。少し長い名前ですが、重要なのは真ん中の「Markup（マークアップ）」という言葉です。これは「目印を付ける」「しるしを付ける」という意味です。

私たちが普段読んでいる文章は、ただ文字が並んでいるだけでは、どこが重要な見出しで、どこが普通の段落なのか、コンピュータには分かりません。そこで、「ここが見出しですよ」「ここが段落ですよ」と、コンピュータにも分かるように「しるし」を付けてあげる必要があります。この「しるし付け」の作業こそが、HTMLの本質です。

難しく考える必要はありません。教科書の大事な部分に蛍光ペンで線を引いたり、書類の重要な箇所に付箋を貼ったりするのと同じ感覚です。コンピュータにWebページの内容を正しく伝えるために、文章にこっそりとメモ書きを添えてあげる、そんなイメージを持っていただければ大丈夫です。

木造住宅の骨組みと完成した家のイラストの比較。HTMLがWebサイトの骨組みであることを表す図

ページとページを繋ぐ「魔法の扉」

さて、HTMLの正式名称「Hyper Text Markup Language」の後半部分、「Markup（目印）」についてはお話ししました。では、前半の「Hyper Text（ハイパーテキスト）」にはどんな意味があるのでしょうか。

直訳すると「超越したテキスト」や「すごいテキスト」という意味になりますが、難しく考える必要はありません。これは、Webサイトの最大の特徴である「リンク」のことを指しています。皆さんも、青色の文字をクリックして、別のページに移動した経験が何度もあるはずです。本や新聞のような普通の文章（テキスト）は、読んで終わりです。しかし、Webの文章はクリック一つで世界中の別の情報へとジャンプすることができます。ただの文字が、別の場所へ繋がる扉になる。普通のテキストを超越した機能を持っているから、「ハイパーテキスト」なのです。

このリンクを作る時も、やはりタグを使います。Anchor（アンカー：船の錨）の頭文字をとって <a> というタグを使います。「ここをクリックしてね」という文字を <a> タグで挟み、「どこに飛ぶか」という情報を書き加えるだけで、あなたのWebページから世界中のあらゆるサイトへ道を繋げることができるのです。

「タグ」でテキストをサンドイッチしよう

では、具体的にどのようにして「しるし」を付けるのでしょうか。HTMLでは、「タグ」と呼ばれる特別な記号を使います。

タグは、< と > という記号で囲まれた、短い英単語のようなものです。例えば、見出しを表すタグは <h1>、段落を表すタグは <p> といった具合です。

使い方はとても簡単です。しるしを付けたい文章を、このタグで「サンドイッチ」のように挟むだけです。

例えば、「こんにちは」という文字を、ページの大きな見出しにしたいとします。その場合、以下のように書きます。

<h1>こんにちは</h1>

これだけです。最初の <h1> を「開始タグ」、後ろの </h1> を「終了タグ」と呼びます。終了タグには、終わりの合図として /（スラッシュ）が入っているのが特徴です。

このサンドイッチ構造によって、コンピュータは「なるほど、<h1>から</h1>までの間に書かれている『こんにちは』という文字は、大きな見出しとして表示すればいいんだな」と理解してくれます。

もし、ただの文章の段落として表示したい場合は、段落を意味する <p> タグを使って、

<p>今日は良い天気ですね。</p>

と書きます。するとコンピュータは「これは普通の文章の塊（段落）だな」と判断します。

このように、表示したい内容に合わせて適切なタグで挟んでいく作業が、HTMLを書くということです。タグの種類はたくさんありますが、最初から全部覚える必要はありません。よく使う基本的なものはほんの一部です。

まるで、整理整頓のために収納ボックスにラベルシールを貼っていくような感覚に似ています。「ここには靴下」「ここにはハンカチ」とラベルを貼るように、「ここは見出し」「ここは段落」とテキストにタグでラベルを貼っていくのです。そうすれば、コンピュータという整理下手な管理人さんでも、どこに何があるかすぐに分かって、正しく表示してくれるようになります。

食パンの形をしたh1タグで「こんにちは」という文字を挟んでいる、HTMLタグのサンドイッチのイラスト

Webページの「基本の型」を知ろう

タグの使い方には慣れてきましたか？最後に、HTMLファイルを作るために必ず必要となる「基本の型」をご紹介します。実は、いきなり <h1> や <p> を書くだけでは、正しいWebページとして認識してもらえません。人間にも頭と体があるように、HTMLファイルにも決まった構造があります。

HTMLファイルは、大きく分けて次の3つの要素で構成されています。

HTMLの基本構造の図解。headタグを「脳みそ・設定情報」、bodyタグを「体・表示内容」と例えて解説している図

htmlタグ
- 全体を <html> と </html> で囲みます。「ここからここまでがHTMLのコードですよ」と宣言する、一番外側の枠です。
head（ヘッド）タグ
- <html> の中に書きます。ここには、ページのタイトルや、検索エンジンに向けた設定情報などを書きます。この <head> の中に書いた内容は、ブラウザの画面（白いキャンバス部分）には直接表示されません。いわば、ページの設定を行う「脳みそ」のような場所です。
body（ボディ）タグ
- ここが主役です。<body> の中に書いた <h1> や <p> などの内容が、実際にブラウザの画面に表示されます。皆さんが普段見ているWebページのほとんどは、この <body> の中身です。

まとめると、以下のような形になります。

<html>
  <head>
    </head>
  <body>
    <h1>こんにちは</h1>
    <p>これが私の作ったWebページです。</p>
  </body>
</html>

自分のパソコンで表示してみよう

このコードを、実際に動かしてみましょう。特別なソフトは必要ありません。Windowsの「メモ帳」やMacの「テキストエディット」を開いてみてください。

上記のコードをコピーして、メモ帳に貼り付けます。
ファイルを保存する時に、名前を「index.html」にします。ポイントは、ファイル名の最後（拡張子）を「.txt」ではなく「.html」にすることです。
保存したファイルを、普段使っているGoogle Chromeなどのブラウザにドラッグ＆ドロップします。

いかがでしょうか。真っ白な画面に、あなたが書いた「こんにちは」という文字が表示されたはずです。これが、Webサイト作りの第一歩です。インターネット上の煌びやかなサイトも、基本はこの「htmlファイル」と「ブラウザ」の関係で動いているのです。

まとめ：HTMLは怖くない！まずは触ってみよう

いかがでしたでしょうか。HTMLが、決して謎の暗号ではなく、コンピュータへの親切な「指示書」であることがお分かりいただけたかと思います。

HTMLは、Webサイトの骨組みを作るための最も基礎的な技術です。「タグで挟む」というシンプルなルールさえ覚えてしまえば、誰でもWebページを作り始めることができます。

最初は難しく感じるかもしれませんが、自転車の練習と同じで、実際に手を動かしてみると案外すぐに慣れてしまうものです。まずは「見出しタグ」と「段落タグ」だけでも構いません。メモ帳などのテキストエディタを開いて、自分だけのWebページの骨組みを書いてみませんか？その小さな一歩が、あなたのWeb制作の世界を大きく広げてくれるはずです。