HTMLってなに？
- Webページの骨組みを作る言語（見出し・段落・画像・リンクなどの構造）。
- 見た目はCSS、動きはJSが担当。HTMLは“意味と構造”。
まずは雛形（コピペOK）
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>はじめてのHTML</title> <meta name="description" content="このページの説明文" /> </head> <body> <h1>こんにちは！</h1> <p>これは最小構成のHTML5ページです。</p> </body> </html>
よく使う要素（超基本）
- 見出し：
<h1>～<h6>（ページに基本はh1は1つ） - 段落：
<p> - リンク：
<a href="https://example.com">リンク</a> - 画像：
<img src="img.png" alt="画像の説明">（alt必須） - リスト：
<ul><li>…</li></ul>/<ol>…</ol> - 強調：
<strong>（重要） /<em>（強調） - 区切り：
<br>（改行は最小限）、<hr>（区切り線） - まとまり：
<div>（汎用ブロック）、<span>（汎用インライン）
セマンティック要素（構造をわかりやすく）
header（ヘッダー）nav（ナビ）main（主内容は1ページ1つ）section（章）article（単体で完結する記事）aside（補足）footer（フッター）
属性のキホン
id（一意な識別子）／class（グループ化）href（リンク先）／src（画像・スクリプト元）alt（画像代替文）／title（補足ヒント）target="_blank"はrel="noopener noreferrer"とセットで
フォーム最小例
<form action="/search" method="get"> <label for="q">検索：</label> <input id="q" name="q" type="search" required> <button type="submit">送信</button> </form>
テーブル最小例（表）
<table>
<thead><tr><th>商品</th><th>価格</th></tr></thead>
<tbody>
<tr><td>りんご</td><td>120</td></tr>
<tr><td>みかん</td><td>100</td></tr>
</tbody>
</table>
CSS / JS の読み込み
<link rel="stylesheet" href="styles.css"> <script src="app.js" defer></script>
deferはHTML解析後に実行（推奨）。
ちょっとだけ“実践的”なサンプル
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ミニサイト</title>
<style>
body { font-family: system-ui, sans-serif; line-height: 1.7; margin: 0; }
header, footer { padding: 16px; background: #f5f5f5; }
nav a { margin-right: 12px; }
main { max-width: 920px; margin: 24px auto; padding: 0 16px; }
img { max-width: 100%; height: auto; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
</style>
</head>
<body>
<header>
<h1>ミニサイト</h1>
<nav>
<a href="#about">概要</a>
<a href="#gallery">ギャラリー</a>
<a href="#contact">お問い合わせ</a>
</nav>
</header>
<main id="content">
<section id="about">
<h2>概要</h2>
<p>これはHTMLの基本で作ったミニページです。</p>
</section>
<section id="gallery">
<h2>ギャラリー</h2>
<div class="card">
<img src="sample.jpg" alt="サンプル画像">
<p>レスポンシブに画像が縮みます。</p>
</div>
<ul>
<li>箇条書き１</li>
<li>箇条書き２</li>
</ul>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<form>
<label for="name">お名前</label><br>
<input id="name" name="name" required><br><br>
<label for="msg">メッセージ</label><br>
<textarea id="msg" name="msg" rows="4"></textarea><br><br>
<button type="submit">送信</button>
</form>
</section>
</main>
<footer>
<small>© 2025 MiniSite</small>
</footer>
<script>
// ごく簡単なJS：ナビをクリックしたらスムーズスクロール
document.querySelectorAll('nav a').forEach(a => {
a.addEventListener('click', e => {
const id = a.getAttribute('href');
if (id.startsWith('#')) {
e.preventDefault();
document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>
初心者がつまずきやすいポイント
- 文字化け→
<meta charset="utf-8">を必ず入れる。 - スマホで拡大縮小が変→
<meta name="viewport" …>を入れる。 - 画像が大きすぎる→CSSで
img { max-width: 100%; height: auto; } - 見出し乱用→
h1はページの主題に1回、階層は順序を守る。 - altなし→スクリーンリーダー/SEO的にマイナス。必ず書く。
もっと深掘り（フォームのバリデーション、SEO、アクセシビリティ、Flex/Gridレイアウト、コンポーネント化など）もまとめられます。どこから強化したい？（例：フォームをしっかり、レイアウトを学ぶ、CSS設計、JS連携 など）
