【目次】
- 1-1_Web制作の旅へ！アイデアをカタチにする最初のステップ
- 1-2_Webの仕組み：コードとブラウザの協働作業
- 1-3_Web制作の最強コンビ：HTMLとCSSの役割分担
- 2-1_HTMLの基本構文
- 2-2_テキスト情報を構造化する
- 2-3_画像とリンクの扱い
- 2-4_Web構造を明確にするセマンティックタグ
- 3-1_CSSの基本構造と適用方法
- 3-2_空間を制御する：ボックスモデルの理解
- 3-3_現代のレイアウト技術：Flexboxの基礎
- 4-1_必須スキル：レスポンシブデザイン
- 4-2_次の扉：動きを学ぶJavaScriptへのロードマップ
- 5-1_HTMLセマンティックタグ チートシート
- 5-2-1_Flexbox 基本プロパティ チートシート
- 5-2-2_Flexbox 実務テクニック チートシート
- 5-3-1_Grid 基本プロパティ チートシート
- 5-3-2_Grid 実務テクニック チートシート
- 5-4_CSS リセット & 標準化スニペット集
- 6-1_Box Model Visualizer
5-1_HTMLセマンティックタグ チートシート
セマンティック（意味論的な）タグは、コンテンツの意味をブラウザや検索エンジンに正確に伝えるために使用します。これにより、Webサイトのアクセシビリティ（A11Y）とSEOが大幅に向上します。
| カテゴリ | タグ | 役割と用途 | 代替タグ（非推奨） |
|---|---|---|---|
| 全体構造 | <main> | ドキュメントの主要かつユニークなコンテンツを囲みます。ページごとに一つだけ使用し、ナビゲーションやフッターは含めません。 | <div> |
<header> | セクションまたはドキュメントの導入部を定義します。サイト名、ロゴ、ナビゲーション、キャッチコピーなどを格納します。 | <div> | |
<footer> | セクションまたはドキュメントの末尾を定義します。著作権情報、連絡先、関連リンクなどを格納します。 | <div> | |
<nav> | 主要な**ナビゲーションリンク（目次、グローバルメニューなど）**の集合体を定義します。 | <div> | |
<article> | 自己完結したコンテンツを定義します。ブログ記事、ニュース記事、フォーラムの投稿など、独立して配信・再利用できるものです。 | <div> | |
<section> | 一般的なコンテンツの区切りを定義します。<h2>〜<h6>で見出しを付けるべき意味的なグループ化に使用します。 | <div> | |
<aside> | 主要コンテンツとは間接的に関連するコンテンツを定義します。サイドバー、広告、補足情報など。 | <div> | |
| グループ化 | <hgroup> | 複数の見出し（<h1>〜<h6>）やスローガンを論理的にグループ化します。主にSEOとアウトラインの調整に使用されます。 | <div> |
<address> | 最も近い<article>または<body>の連絡先情報（著者、管理者など）を定義します。 | <p> | |
<figure> | 自己完結したメディアコンテンツ（画像、図表、ビデオなど）を定義します。 | <div> | |
<figcaption> | <figure>要素のキャプションや説明文を定義します。 | <p> | |
| テキスト | <mark> | 特定の文脈で関連性が高い、またはハイライトすべきテキストを定義します（検索結果のキーワードハイライトなど）。 | <span> + CSS |
<time> | 機械可読な日付または時刻を定義します。SEOやカレンダー機能との連携に役立ちます。 | <span> | |
<cite> | 作品のタイトル（書籍、映画、論文など）を定義します。引用元を示す<blockquote>タグ内のフッターと混同しないように注意が必要です。 | <i> |
よくある間違いと正しい使い分け
| シーン | 間違いやすい例 (非推奨) | 正しいセマンティックな例 (推奨) |
|---|---|---|
| サイトの最上部 | <div id="header"> | <header> |
| ブログ記事 | <div class="post"> | <article> |
| サイドバー | <div class="sidebar"> | <aside> |
| 著作権情報 | <p class="copyright"> | <footer> |
| メインナビ | <div class="menu"><ul>...</ul></div> | <nav><ul>...</ul></nav> |
ポイント:
セマンティクス ≠ スタイル: セマンティックタグは見た目ではなく、意味を定義します。スタイル（色やサイズ）は必ずCSSで制御しましょう。
<section>と<div>の使い分け: <section>は必ず見出し（<h2>など）を持つべき意味的なコンテンツのグループであるのに対し、<div>は単なるレイアウトのためのコンテナとして使用されます。
Kindle本のご案内
Webサイト制作に関する書籍を執筆しました。
Kindleストアにてご購入いただけます。
