HTML：Webページの「骨格」
Webサイトやブログを始めたい方、Web制作の世界へようこそ！ HTML（HyperText Markup Language）は、Webページを作るための最も基本的な言語です。このHTML入門記事で、Webページの「骨格」を作る方法をマスターしましょう。
1. HTMLとは？（役割と基本構造）
HTMLは、Webページに表示されるテキスト、画像、リンクなどの情報を構造化するための言語です。
例えるなら、**建物の「骨組み」**のようなもの。
HTMLがWebページの土台を作り、CSS（装飾）やJavaScript（動き）がその上に肉付けしていくイメージです。
🔹 HTMLの基本構造
すべてのHTMLファイルは、以下の基本形から始まります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにページのタイトル</title>
</head>
<body>
<h1>ここにページのメインコンテンツ</h1>
<p>ここに段落のテキスト</p>
</body>
</html>
| タグ | 役割 |
<!DOCTYPE html> | これはHTML5で書かれた文書であることを宣言します。 |
<html> | HTML文書のすべてを囲む最も大きなタグです。 |
<head> | ページの設定情報（タイトル、文字コードなど）を記述します。ブラウザには表示されません。 |
<body> | ページに表示されるすべての内容（テキスト、画像、リンクなど）を記述します。 |
Google スプレッドシートにエクスポート
2. 要素とタグの基本ルール
HTMLは**「要素（Element）」の集まりで構成されています。要素は、「タグ（Tag）」**を使って記述します。
🔹 基本の記述形式
ほとんどの要素は、以下の形式で記述します。
<開始タグ>コンテンツ</終了タグ>
- 開始タグ：
<p> - 終了タグ：
</p>(スラッシュ/が付きます) - コンテンツ：タグで囲まれた部分。
- 要素：開始タグ、コンテンツ、終了タグを合わせた全体。
例外：空要素 画像を表示する<img>や改行の<br>など、コンテンツを持たない要素（空要素）は、終了タグがありません。 例: <img src="image.jpg">
🔹 属性（Attribute）
タグに追加情報を与えるのが「属性」です。属性は開始タグの中に記述します。
<タグ名 属性名=”属性値”>コンテンツ</タグ名>
例: <a>タグにリンク先という情報（href属性）を与える
HTML
<a href="https://www.google.com/">Googleへ</a>
3. よく使う主要なタグ
Webページを作る上で、特によく使うタグを覚えましょう。
1. 見出しと段落
| タグ | 役割 | 例 |
<h1>〜<h6> | 見出し（h1が最も大きく、h6が最も小さい） | <h1>メインタイトル</h1> |
<p> | 段落（パラグラフ）を作成する | <p>文章をここに書きます。</p> |
<br> | 強制的な改行（空要素） | テキスト<br>次の行へ |
Google スプレッドシートにエクスポート
2. 画像とリンク
| タグ | 役割 | 属性例 |
<img> | 画像を表示する（空要素） | src (ファイルパス), alt (代替テキスト) |
<a> | 他のページへ移動するリンクを作成する | href (リンク先のURL) |
Google スプレッドシートにエクスポート
記述例:
HTML
<img src="flower.jpg" alt="美しい花の画像">
<a href="https://www.google.com/">Googleで検索する</a>
3. リスト
情報を整理するのに便利なリストです。
<ul>(Unordered List): 順序のないリスト（黒丸などの記号）<ol>(Ordered List): 順序のあるリスト（数字など）<li>(List Item): リストの各項目
記述例:
HTML
<ul>
<li>リンゴ</li>
<li>バナナ</li>
</ul>
4. 実際に書いてみよう！
テキストエディタ（メモ帳、VS Codeなど）で新しいファイルを開き、以下のコードを書いてみましょう。
- ファイル名を「
index.html」として保存します。 - 保存したファイルをダブルクリックすると、ブラウザで表示されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の初めてのWebページ</title>
</head>
<body>
<h1>HTML入門へようこそ！</h1>
<p>
これは私が初めて作成したWebページです。<br>
HTMLタグを使って、文章を構造化しています。
</p>
<h2>次にやること</h2>
<ul>
<li>CSSを学ぶ</li>
<li>JavaScriptを学ぶ</li>
<li>素敵なサイトを作る！</li>
</ul>
<p>
Web制作の学習は、<a href="https://www.w3schools.com/" target="_blank">w3schools</a>などのサイトが役立ちます。
</p>
</body>
</html>
まとめ
HTMLは、Webページ制作の出発点です。まずはこれらの基本タグを使って、Webページの**「骨格」を作ることに慣れていきましょう。次のステップは、見た目を整えるCSS**の学習です！
ポイント
タグとは、なんであろうか。
<>で囲まれたものである。
<a href=”https://www.oto.com“> otoサイトへ飛ぶ<a>
のように使う。
https://www.oto.com は指定アドレス
相対アドレスと絶対アドレス
- 相対アドレス
./fashion.html
のように使う - 絶対アドレス
https://www.oto.com
のように使う