<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML学習用サンプルページ</title>
<meta name="description" content="HTMLの基本タグを学ぶためのサンプルページです。">
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>HTML学習用サンプルページ</h1>
<p>このページを写経しながら、HTMLの基本タグに慣れていきましょう。</p>
</header>
<!-- ナビゲーション -->
<nav>
<a href="#about">このページについて</a>
<a href="#list">リストの例</a>
<a href="#table">表の例</a>
<a href="#form">フォームの例</a>
</nav>
<!-- メインコンテンツ -->
<main>
<!-- セクション、このページについて -->
<section id="about">
<div class="hero">
<h2>このページについて</h2>
<p>このサンプルページは、<strong>HTMLの基本的な構造</strong>と<strong>よく使うタグ</strong>をまとめたものです。</p>
<p>以下の要素が含まれています。</p>
<ul>
<li>見出しタグ（<code>h1</code>～<code>h3</code>）</li>
<li>段落（<code>p</code>）</li>
<li>リンク（<code>a</code>）</li>
<li>リスト（<code>ul</code>）,（<code>ol</code>）</li>
<li>表（<code>table</code>）</li>
<li>フォーム（<code>form</code>）</li>
</ul>
<p class="note">写経するときは、インデント（字下げ）やスペース、改行の位置にも気を配ると、読みやすいコードを書く練習になります。</p>
</div>
</section>
</section>
<!-- セクション2:リストの例 -->
<section id="list">
<h2>リストの例</h2>
<h3>順不同リスト（ul）</h3>
<p>Webページの基本ステップ：</p>
<ul>
<li>ファイルを作成する（例：<code>index.html</code>）</li>
<li><code>html</code>、<code>head</code>、<code>body</code>タグを書く</li>
<li>見出しや文章を追加する</li>
<li>ブラウザで表示を確認する</li>
</ul>
<h3>番号付きリスト（ol）</h3>
<p>HTMLを学ぶときのおすすめ順序：</p>
<ol>
<li>ページの基本構造を理解する</li>
<li>テキストとリンクの書き方を覚える</li>
<li>リスト・表・画像などを使ってみる</li>
<li>フォームやレイアウトに挑戦する</li>
</ol>
</section>
<!-- セクション3:表の例 -->
<section id="table">
<h2>表（table）の例</h2>
<p>HTMLタグのごく一部を表にまとめています。</p>
<table>
<thead>
<tr>
<th>タグ</th>
<th>読み方</th>
<th>役割</th>
</tr>
</thead>
<tbody>
<tr>
<td><h1></td>
<td>エイチ・ワン</td>
<td>ページで一番重要な見出し</td>
</tr>
<tr>
<td><p></td>
<td>ピー</td>
<td>段落（パラグラフ）を表す</td>
</tr>
<tr>
<td><a></td>
<td>アンカー</td>
<td>リンクを作成する</td>
</tr>
<tr>
<td><img></td>
<td>イメージ</td>
<td>画像を表示する</td>
</tr>
</tbody>
</table>
</section>
<!-- セクション4:フォームの例 -->
<section id="form">
<h2>フォームの例</h2>
<p>お問い合わせのフォーム風のサンプルです。</p>
<form action="#" method="post">
<div>
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎"/>
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@example.com"/>
</div>
<div>
<label for="type">お問い合わせ種別</label>
<select id="type" name="type">
<option value="question">質問</option>
<option value="request">要望</option>
<option value="other">その他</option>
</select>
</div>
<div>
<label for="message">お問い合わせ内容</label>
<textarea name="message" id="message" rows="5" placeholder="ご自由にお書きください"></textarea>
</div>
<input type="submit" value="送信する"/>
</form>
</section>
</main>
<!-- フッター -->
<footer class="footer">
<p>© 2026 HTML学習サンプル. All rights reserved.</p>
</footer>
</body>
</html>