こんにちは！駆け出しエンジニアのまるです👓🦍
前回は「HTMLってなに？」についてお話しました。
今回は、実際にHTMLタグを使ったコード例を見ながら、基本的なタグの役割をやさしく解説していきます！
「見出し」「段落」「リンク」「リスト」「表」など、Webページを作るときに欠かせない要素が一気にわかりますよ ✨
HTML文書の基本構造（おさらい）
まずは前回も触れた、HTMLの基本構造を軽くおさらいしておきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ゼロからはじめるプログラミング入門ログ</title>
</head>
<body>
<!-- 本文はここに書く -->
</body>
</html>
<!DOCTYPE html> は「これはHTMLですよ」と伝える宣言。
その中に <html> タグで全体を包み込み、さらに <head>（画面に表示されない情報）と <body>（実際に表示される部分）に分けて書いていきます。
ここまではおさらいなので、詳しくは前回の記事「HTMLってなに？」を参考にしてください。
それでは今回の本題「HTMLタグの使い方」に入っていきましょう。
見出しタグ（ <h1> ~ <h6> )
HTMLには文章の階層を表す「見出しタグ」があります。
記事タイトルは h1、その中の大きな区切りは h2、さらに細かい区切りは h3…というように使い分けると、文章の流れが整理され、検索エンジン（SEO）にも有利になります。
まるで「本の章立て」のように、見出しをつけていくイメージです。
(html)
<h1>これはh1の見出しです</h1>
<h2>これはh2の見出しです</h2>
<h3>これはh3の見出しです</h3>
<h4>これはh4の見出しです</h4>
<h5>これはh5の見出しです</h5>
<h6>これはh6の見出しです</h6>
表示結果👇
実際には「h1が一番大きく、h2、h3…と小さくなる」ことがひと目でわかります。
段落タグ（<p>）
文章をひとまとまりにするときは <p> タグを使います。
（html）
<p>これは段落です。ここに文章を書いていきます。</p>
表示結果👇
ただ改行するだけでは段落とはみなされません。必ず <p> で囲むことで、きちんとした文章のまとまりとして認識されます。
ブログや記事を書くときは「ひとつの話題がひと段落」と意識すると自然に使いこなせますよ。
画像タグ（<img>）
画像を表示したいときは <img> タグを使います。
（html）
<img src="images/gorilla.png" alt="腕立て伏せ">
表示結果👇
実際に画像が表示されます。
✅ 相対パスと絶対パスについて
画像の場所を指定する方法には「相対パス」と「絶対パス」の2種類があります。
1. 相対パス
今いるHTMLファイルから見た「相対的な位置関係」で画像を指定する方法です。
例：
<img src="images/gorilla.png" alt="腕立て伏せ">
この場合は、HTMLファイルと同じ階層にある「images」というフォルダの中の gorilla.png を探しに行きます。
👉 Web制作では相対パスを使うことが多いです。フォルダ構造を整理すれば、どこにファイルがあるかすぐに分かります。
2. 絶対パス
インターネット上の「住所（URL）」をそのまま書く方法です。
例：
<img src="https://maru-diary.com/images/gorilla.png" alt="腕立て伏せ">
👉 サーバーにアップロードされている画像を直接呼び出したいときに便利です。
ただしファイルの場所が変わるとリンク切れしやすいので、普段の制作では相対パスを使う方が安心です。
リンクタグ（<a>）
Webといえば「リンク」ですよね。リンクは <a> タグで作ります。
（html）
<p>駆け出しエンジニア「まる」のブログは<a href="https://maru-diary.com/">こちら</a>から！</p>
表示結果👇
クリックできる部分（「こちら」）を <a> タグで囲み、href にリンク先を指定します。
リンクを貼ることで他のページへつながり、インターネットらしい「情報の橋渡し」ができるようになります。
リスト（<ul>と <ol>）
箇条書きを作るときに使うのがリストタグです。
- 順番がないリスト（黒丸で表示される） → <ul>
- 順番があるリスト（数字で表示される） → <ol>
それぞれの項目は <li> タグで書きます。
（html）
<ul>
<li>腕立て伏せ</li>
<li>腹筋</li>
<li>スクワット</li>
<li>懸垂</li>
</ul>
<ol>
<li>足幅は肩幅より少し広め</li>
<li>つま先は少し外側に向ける</li>
<li>つま先と膝の向きがぶれないようにしゃがむ</li>
<li>太ももと床が平行になったら立ち上がる</li>
</ol>
表示結果👇
トレーニングのメニューをリスト化するように、情報を整理するのに便利なタグです。
表（<table>）
データを整理して見やすくするのに便利なのが <table> タグです。
（html）
<table>
<tr>
<th>種目名</th>
<th>回数</th>
</tr>
<tr>
<td>腕立て伏せ</td>
<td>20回</td>
</tr>
<tr>
<td>腹筋</td>
<td>30回</td>
</tr>
</table>
<table>
<tr>
<th colspan="2">トレーニング記録</th>
</tr>
<tr>
<td>腕立て伏せ</td>
<td>20回</td>
</tr>
<tr>
<td>腹筋</td>
<td>30回</td>
</tr>
</table>
表示結果👇
- <table> … 表全体を囲む
- <tr> … 行を作る（row）
- <th> … 見出しセル（太字で中央寄せ）
- <td> … 普通のセル（データ部分）
また、colspan=”2″ を使えばセルを結合することもできます。
例えば「トレーニング記録」と大きくまとめるようなときに便利です。
コメント（<!– –>）
最後にちょっとした小技。HTMLにはコメントを書く方法があります。
（html）
<!-- これはメモです。ブラウザには表示されません -->
コードの中にメモを残しておくと、自分や他の人が後から見たときに理解しやすくなります。実際の画面には表示されないので安心です。
まとめ
今回は「見出し・段落・画像・リンク・リスト・表・コメント」といった、基本中の基本のタグを紹介しました。
どれもWebページを作るうえで必ず出てくる要素ばかりです。
まずはこの辺りのタグを「使える」ようになることが第一歩。慣れてきたら「デザインを整えるCSS」や「動きをつけるJavaScript」に進んでいくと理解が一気に深まります。
タグは魔法の言葉みたいなもの！
ひとつ覚えるたびに、ページにできることが増えていくんだ！
そして次回は、Webページに欠かせない”フォーム”の作り方を紹介するよ！お問い合わせページやログイン画面を作る時に役立つから、楽しみにしててね！
コメント