リスト構造
情報を整理整頓して表示するために、HTMLでは3種類のリスト要素が提供されています。
順不同リスト (Unordered List)
特定の順序が重要ではない項目のグループ化に使用します。ul要素の中にli要素を配置して定義します。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>注意点:
ulタグの直下にはliタグ以外を配置できません。liタグの中には、テキストだけでなく他のHTML要素（画像、リンク、別のリストなど）を含めることが可能です。
整序リスト (Ordered List)
手順やランキングなど、順序が意味を持つ情報を配置します。ol要素とli要素を組み合わせます。
<ol>
<li>コードを記述する</li>
<li>コンパイルを行う</li>
<li>テストを実行する</li>
</ol>定義リスト (Definition List)
用語とその説明をセットで表示する際に使用します。dl（定義リスト全体）の中に、dt（用語）とdd（説明）を配置します。
<dl>
<dt>HTML</dt>
<dd>Webページの構造を記述するためのマークアップ言語です。</dd>
<dt>CSS</dt>
<dd>Webページのデザインやレイアウトを指定するための言語です。</dd>
</dl>テーブル (表組み)
表形式のデータを作成するには、table要素の中に行を表すtr、見出しセルのth、データセルのtdをネストさせます。
| タグ名 | 役割 |
|---|---|
| table | テーブル全体の定義 |
| tr | 行の定義 |
| th | ヘッダーセル（太字・中央揃えがデフォルト） |
| td | データセル |
テーブルの基本構造と枠線
デフォルトでは枠線が表示されないため、border属性を指定して確認します。
<table border="1">
<tr>
<th>製品名</th>
<th>カテゴリ</th>
<th>在庫状況</th>
</tr>
<tr>
<td>ノートPC</td>
<td>電子機器</td>
<td>あり</td>
</tr>
</table>セマンティックなテーブル構造
テーブルをヘッダー、ボディ、フッターの3つのブロックに分割することで、構造を明確にし、アクセシビリティや印刷時の制御を向上させます。
| タグ名 | 意味 |
|---|---|
| thead | テーブルのヘッダー部分 |
| tbody | テーブルの主要データ部分 |
| tfoot | テーブルのフッター（合計値など） |
セルの結合
隣接するセルを結合して、関連する情報を一つのセルとして表示できます。
- 結合の方向（行方向か列方向）を決定します。
- 残すセル（最上または最左）に属性を追加します。
rowspan: 縦方向（行）に結合する数を指定します。colspan: 横方向（列）に結合する数を指定します。
- 結合される他のセルタグを削除します。
<table border="1">
<tr>
<th>部署</th>
<th>名前</th>
<th>役割</th>
</tr>
<!-- 行の結合例 -->
<tr>
<td rowspan="2">開発部</td>
<td>田中</td>
<td>フロントエンド</td>
</tr>
<tr>
<!-- 上の行で結合済みのため td は不要 -->
<td>佐藤</td>
<td>バックエンド</td>
</tr>
<!-- 列の結合例 -->
<tr>
<td>人事部</td>
<td colspan="2">鈴木 (部長)</td>
</tr>
</table>フォーム
ユーザーからの入力を受け付けるためのインターフェースを提供します。ログイン画面や検索機能、会員登録などで利用されます。
inputタグの種類
inputタグのtype属性を変更することで、様々な入力形式を実現できます。
| type属性値 | 機能説明 |
|---|---|
| text | 1行のテキスト入力 |
| password | 文字が隠されるパスワード入力 |
| radio | 選択肢の中から1つだけを選択（ラジオボタン） |
| checkbox | 複数選択が可能（チェックボックス） |
| file | ファイルのアップロード |
<label>
氏名：<input type="text" placeholder="例：山田 太郎" />
</label>プレースホルダー
入力欄に薄い色で表示されるヒントテキストです。placeholder属性で指定します。ユーザーが入力を開始すると消えます。
ラジオボタン (Radio Button)
複数の選択肢から1つだけを選択させます。同じグループにするには、すべてのボタンに同じname属性値を設定する必要があります。
| 属性名 | 役割 |
|---|---|
| name | グループ化の識別子。同名が同一グループとみなされる。 |
| checked | 初期状態で選択されている項目に指定する。 |
<input type="radio" name="role" id="admin">
<label for="admin">管理者</label>
<input type="radio" name="role" id="user" checked>
<label for="user">一般ユーザー</label>ファイルアップロード
multiple属性を追加することで、複数のファイルを同時に選択可能になります。
<input type="file" multiple>チェックボックス (Checkbox)
複数の項目を選択可能にします。checked属性で初期選択状態を設定できます。
<input type="checkbox" checked> 利用規約に同意するドロップダウンリスト (Select)
selectタグで全体を、optionタグで選択肢を定義します。selected属性で初期値を指定します。
<label>
都道府県：
<select>
<option>東京</option>
<option>大阪</option>
<option selected>北海道</option>
</select>
</label>テキストエリア (Textarea)
複数行のテキスト入力が必要な場合に使用します。textareaタグは開始タグと終了タグの間にデフォルトのテキストを記述します。
<label>
お問い合わせ内容：
<textarea rows="5" cols="40">ここにご記入ください</textarea>
</label>ラベル (Label)
フォーム部品とその説明文を紐付けることで、ユーザビリティを向上させます（ラベルテキストをクリックしても入力欄がフォーカスされます）。
- 方法1:
labelタグのfor属性と、入力欄のid属性を一致させる。 - 方法2:
labelタグで入力欄とテキストを両方囲む。
ボタン (Button)
buttonタグを使用します。type属性によって挙動が変化します。
| type属性値 | 動作 |
|---|---|
| submit | フォームのデータを送信する（デフォルト） |
| reset | 入力内容をリセットする |
| button | 汎用的なボタン（JavaScriptなどと連携） |
<form>
<!-- 入力フォーム -->
<button type="submit">送信</button>
<button type="reset">リセット</button>
</form>レイアウト用タグ
ページの構造を構築したり、コンテンツをグループ化したりする際に使用されます。
- div (Division): ブロックレベル要素。前後に改行が入り、横幅いっぱいの領域を確保します。大きなコンテナやセクションの区切りに使用します。
- span: インラインレベル要素。改行が入らず、テキストの一部などの装飾や範囲指定に使用します。
<!-- ブロック要素の例 -->
<div style="background-color: #f0f0f0;">このボックスは幅いっぱいに広がります</div>
<!-- インライン要素の例 -->
<p>
ここは<span style="color: red;">強調</span>されたテキストです。
</p>文字実体参照
HTMLにおいて特殊な意味を持つ文字（<, >など）や、キーボードから入力しにくい文字を表示するために使用される記述方法です。
| 表示結果 | 説明 | 実体参照 |
|---|---|---|
| 空白（ノーブレークスペース） | |
|
| < | 小なり記号 | < |
| > | 大なり記号 | > |
<p>
HTMLタグを記述するには、<div> のように実体参照を使用します。
また、連続した空白 を作成する際にも利用されます。
</p>