HTML構造の確認
HTMLは入れ子（ネスト）構造でできています。
要素の中に別の要素を含めることで、階層的に内容を整理します。
例えば、<body> の中に <header> を入れ、さらに <header> の中に <h1> を入れるように、タグは順序よく「開いて」「閉じる」ルールを守って記述します。
具体的には、まず <body> を開け、その中に <header> を入れ、さらに <header> の中に <h1> を入れます。そして、タグは必ず閉じる順番を守り、<h1> を閉じた後に <header> を閉じ、最後に <body> を閉じます。
図のようなタグの開閉順序を覚えてください。
<!doctype html> <!-- この文書がHTML5で書かれていることを宣言します -->
<html lang="ja"> <!-- htmlの始まり HTML文書全体を囲むタグ。lang属性で使用言語（日本語）を指定 -->
<head> <!-- headの始まり ページ情報や設定をまとめる部分。画面には表示されません -->
<meta charset="UTF-8"> <!-- このページの文字コードをUTF-8（日本語対応）に設定。文字化けを防ぐ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホなどの表示に対応するための設定 次の章で出てきます -->
<title>ページタイトル</title> <!-- ブラウザのタブや検索結果に表示されるタイトル -->
</head> <!-- headはここで終わり -->
<body> <!--bodyの始まり 画面に表示される内容はすべてbody内に書きます -->
<header id="id_header"> <!-- headerの始まり ページ上部の構成要素（ロゴ・ナビなど）をまとめる -->
<h1>サイトのタイトル</h1> <!-- h1の開始と終了 ページ内で最も重要な要素（会社名、サイト名、キャンペーンの商品名など） -->
<nav class="name"> <!-- リンクをまとめる要素 -->
<ul class="ul_name">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav> <!-- navはここで終わり -->
</header> <!--headerはここで終わり-->
<main id="id_main"> <!--mainの始まり ページの主な内容をまとめる部分。1ページに1つだけ使用 -->
<section class="name"> <!--sectionの始まり 章やパートなどを分ける要素 -->
<h2 class="h2name">見出し</h2> <!-- h2の開始と終了 h1に関連する主要なセクションやトピック -->
<p class="p_name">ここに本文が入ります。</p>
</section> <!--一つ目のsectionはここで終わり-->
<section class="name"> <!--sectionの始まり 章やパートなどを分ける要素 -->
<h2 class="h2name">見出し</h2> <!-- h2の開始と終了 h1に関連する主要なセクションやトピック -->
<div class="divname">
<h3>見出し</h3> <!-- h3の開始と終了 h2に関連するサブセクション -->
画像やテキストなど、様々な要素
</div>
</section> <!--二つ目のsectionはここで終わり-->
</main> <!--mainはここで終わり-->
<footer id="id_footer"> <!-- footerの始まり ページの下部にある情報（著作権・連絡先など）をまとめる -->
<p><small>© 2025 サイト名. All rights reserved.</small></p>
</footer> <!--footerはここで終わり-->
</body> <!--bodyはここで終わり-->
</html> <!--htmlはここで終わり-->ポイント再確認
header / main / aside / footerでページ全体を構成article/ section/ aside/ navasideはページの構成にも意味的な区切りにも両方に使用します）- アクセシビリティに配慮
ページの全体構成
💡 必ず必要な必須要素
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
<html> | エイチティーエムエル | HTMLで書かれた全ての中身を入れる大外のタグ | <html><head></head><body></body></html> |
<head> | ヘッド | ブラウザや検索エンジンに伝えたい情報をまとめて書く場所 ページの設定（文字コードやタイトル、CSSなど） | <head><title>タイトル</title></head> |
<body> | ボディ | ドキュメントの本体部分 表示される中身（テキスト、画像など） | <body>本文</body> |
💡 ページの構造（レイアウト）を作るタグ
| 要素/読み | 説明 |
|---|---|
<header>ヘッダー | 「ページの導入」や「セクションの先頭」 を意味する ページや記事の「はじまり部分」をまとめるタグ 通常ページの一番上に配置し、サイトのタイトルやロゴ、ナビゲーションメニューなどの重要な要素をまとめます。 ※以前はヘッダーにメインビジュアルを配置するのが主流でしたが、現在はタグの意味を重視するようになったため、header外に配置するようになりました。 |
<main>メイン | ページの主要なコンテンツ。 そのページの中心となる情報を入れるタグ ページのテーマに直接関連するテキスト、画像、動画などの要素を効果的に配置してユーザーが目的の情報をスムーズに探せるようにします。 |
<aside>アサイド | 補足的な内容を表すためのタグ。 ページの主な内容に直接関係しないが、全体に関連した情報を表示する 例えば、サイドバーに表示する関連リンクや参考文献、注釈などが該当します。asideを使って訪問者が関連情報や追加情報を簡単に見つけられるようにします。 |
<footer>フッター | ページや記事の締めくくりのタグ ピーライトや連絡先、ナビリンクなどをまとめるエリア 通常ページの一番下に配置し、著作権情報、サイトマップ、連絡先情報、ソーシャルメディアへのリンクなどを記述するために使用します。 |
意味的な区切り
💡 内容の意味的な区切り（セクショニング）
| 要素/読み | 説明 |
|---|---|
<article>アーティクル | ブログ記事、ニュース記事、レビューなど、ひとつで完結する「情報のかたまり」を表すタグ ブログ記事、ニュース記事、フォーラムの投稿、商品ページなど、ページ内の独立したコンテンツを明確に区別し、構造を整理するために使用します。この要素は他のコンテンツと切り離して表示できるため、article内の各コンテンツはそれぞれ独自の文脈を持ち、必要に応じて再利用や配信が可能です。 |
<aside>アサイド | 補足的な内容を表すためのタグ。 ページの主な内容に直接関係しないが、全体に関連した情報を表示する 例えば、サイドバーに表示する関連リンクや参考文献、注釈などが該当します。asideを使って訪問者が関連情報や追加情報を簡単に見つけられるようにします。 |
<section>セクション | ページ内の「話の区切り」や「内容のグループ」、「章やパート」など、意味のあるまとまりを分けるタグ。見出しタグとセットで使用する。 ページ内のまとまったテーマを持つコンテンツを区切るために使用する汎用性が高い要素。具体的な意味を持たない要素なので、h1、h2、h3のような見出しを組み合わせる事で内容を明確にします。 <div>タグもコンテンツをグループ化する要素ですが、主にレイアウト（装飾）目的で使用するのに対し、sectionはコンテンツの構造を明確にするために使用します。 |
<nav>ナブ | ナビゲーション（リンク集）を包むタグ サイト内またはサイト外、あるいはページ内コンテンツへのリンクをまとめて配置し、主要なナビゲーションを提供します。 ※単独のリンクの場合は「リンク集」には該当しないので<nav>は使用しません |
その他の使用タグ
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
<h1> ～ <h6> | エイチワン ～ エイチシックス | 見出し要素。 <h1> はページ内で最も重要な見出しヘディングの中にはインラインレベルしか入れられない | <h1>見出し1</h1> ～ <h6>見出し6</h6> |
<div> | ディブ | 意味を持たない汎用的なタグ CSSの装飾やJavaScript操作、レイアウトの構造化に使用する | <div>内容</div> |
<p> | ピー（パラグラフ） | テキストのまとまりである段落を意味するタグ<p>の中には<strong> や <a> などのインライレベルしか入れられない<img>も意味的にテキストに準じていれば入れることは可能ですが、そうでない場合には<div>や<figure>の方が相応しい | <p>これは段落です</p><p>これは段落のテキストです。小さな<img src="icon.png" alt="アイコン">が中にあります。</p> |
<ul> | ユーエル （アンオーダードリスト） | 順序なしリストを作成するためのタグ。 項目に番号を付けず、箇条書き形式で表示します。 中には必ず <li>タグのみを入れます。他のタグを直接入れないよう注意が必要です。 | <ul><li>項目1</li></ul> |
<ol> | オーエル （オーダードリスト） | 順序付きリストを作成するためのタグ。 各リスト項目に自動で番号が付き、手順やランキングなど順序に意味があるときに使用します。 中には必ず <li>タグのみを入れます。他のタグを直接入れないよう注意が必要です。 | <ol><li>項目1</li></ol> |
<li> | エルアイ リスト （リストアイテム） | リスト内の各項目を表すタグ。<ul>、<ol>、または <menu> （ほぼ使いません）の中でのみ使うことができます。<li> は必ずリストタグ内で使用します。 | <li>項目</li> |
time | タイム | 時間や日付、期間を表現するためのタグ。 日付や時間、期間を意味的にマークアップするために使用します。 ブラウザや検索エンジンが正しく理解できるように、 datetime 属性を使って日付や時間のデータを指定します。datetime 属性は<time> と一緒に使う属性で、日付や時刻をISO 8601形式で指定します。（例：2025-04-25T15:30）<time> は、日付や時間に関する情報が重要であり、それがブラウザやアプリケーションに適切に理解されることが求められるシーンで使用します。 | 1. 日付を表す場合<time datetime="2025-04-25">2025年4月25日</time>2. 時刻を表す場合 <time datetime="2025-04-25T15:30">2025年4月25日 15:30</time>3. 期間を表す場合 <time datetime="2025-04-25T09:00/2025-04-25T17:00">2025年4月25日 9:00 ～ 17:00</time> |
| <table> | テーブル | 表形式でデータを表示するためのタグ。 行（ <tr>）と列（<th>, <td>）を使って情報を整理します。視認性・構造化に優れ、<thead>, <tbody>, <tfoot> などの補助要素と組み合わせるとアクセシビリティが向上します。 | <table><tr><td>内容</td></tr></table> |
| <thead> | ティーヘッド （テーブルヘッド） | 表の上部にある見出しの部分をまとめるタグです。 列のタイトルなどを <tr> で1行に並べて、読みやすく整理できます。アクセシビリティ（読み上げソフト対応）にも役立ちます。 | <table><thead><tr><th>ヘッダー1</th></tr></thead></table> |
| <tbody> | ティーボディー （テーブルボディ） | テーブルの本体部分をまとめるタグです。 実際に表示したいデータ（複数の <tr>）をここに入れます。見出し（<thead>）やフッター（<tfoot>）と分けて使うことで、表の構造が明確になります。 | <table><tbody><tr><td>データ1</td></tr></tbody></table> |
| <tfoot> | ティーフット（テーブルフッター） | 表の下部にあるまとめや補足情報を入れる部分です。 合計・注釈・備考などを記載するのに使います。印刷などでページをまたぐ場合に、フッターを繰り返し表示させることもできます。 | <table><tfoot><tr><td>フッター</td></tr></tfoot></table> |
| <tr> | ティーアール （テーブルロー） | 表の1行を定義するタグです。 この中に <th> または <td> を並べて、横方向のデータを1セットにします。表の各行を構成する基本単位です。 | <table><tr><td>内容</td></tr></table> |
| <th> | ティーエイチ （テーブルヘッダー） | 列や行の見出しとなるセルです。 通常は文字が太字・中央寄せで表示され、何のデータが並んでいるかを示します。意味づけが明確になり、スクリーンリーダー対応にもなります。 | <table><tr><th>見出し</th></tr></table> |
| <td> | ティーディー （テーブルデータ） | 表の中で一般的なデータを表示するセルです。<tr> の中に配置され、テキスト・数値・画像・リンクなど、1つの項目を表します。 | <table><tr><td>データ</td></tr></table> |
| <caption> | キャプション | テーブルの説明文やタイトルを表示するタグです。 テーブルの最初に配置し、何の表かを伝えることで、情報の理解がしやすくなります。視覚的な補足だけでなく、アクセシビリティにも有効です。 | <table><caption>テーブルの説明</caption><thead><tr><th>ヘッダー1</th></tr></thead></table> |
<small> | スモール | 著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 small から x-small のように、一段階小さいフォントでテキストが表示されます。 | <p><small>© 2025 サイト名. All rights reserved.</p></small> |
見出しタグのアウトラインの構造
暗黙的アウトラインは、以下のような階層構造を持ちます
<h1>：ページ全体の最重要な見出し<h2>：<h1>に関連する主要なセクションやトピック。<h3>：<h2>に関連するサブセクション。<h4>：<h3>に関連するさらに細かい内容。<h5>：<h4>の細かい詳細。<h6>：<h5>のさらに細かい内容。
同一の見出しに異なるデザインを適用したい
今回のようにmainエリアとasideエリアでh2があるが異なるデザインにするために階層を変えるのはNG
ではどうやって異なるデザインにするか？
方法1：子孫セレクタを使用する
/* 方法その1： */
<main>
<!--記事３ここから-->
<article id="blog_03">
<h2>コーヒーは“香り”から始まります</h2>
〜〜〜略〜〜〜〜
<aside aria-label="Side-Bar">
<!--当店について-->
<section class="aside_inner">
<div class="side_logo"><img src="images/side_logo.png" width="418" height="472" alt="Cafe recurrentのロゴマーク"/></div>
<h2>当店について</h2>main h2 { /*main要素の中にあるすべてのh2にスタイルを適用*/
margin: 0 0 15px 14px;
padding-bottom: 6px;
}
aside h2 { /*aside要素の中にあるすべてのh2にスタイルを適用*/
margin-top: 15px;
font-size: 24px;
}方法2：全てのh2にclass（またはid）を設定する
/* 方法その2： */
<main>
<article id="blog_03">
<h2 class="blog_title">コーヒーは“香り”から始まります</h2>
〜〜〜略〜〜〜〜
<aside>
<section class="aside_inner">
<div class="side_logo"><img src="images/side_logo.png" width="418" height="472" alt="Cafe recurrentのロゴマーク"/></div>
<h2 class="aside_logo">当店について</h2>.blog_title { /* すべての.blog_titleにスタイルを適用 */
margin: 0 0 15px 14px;
padding-bottom: 6px;
}
.aside_logo { /* すべての.aside_logoにスタイルを適用 */
margin-top: 15px;
font-size: 24px;
}他にもいくつか方法はありますが、classを使う方法が一般的です。
classとid
HTMLで<h2>や<div>、<p>などの要素を複数使う場合、それぞれに異なるスタイルを適用するためには、classやidを使って区別する必要があります。
- class属性
汎用的にスタイル設定のために使用します。同じスタイルを複数の要素に適用したいときにも便利です。１つの要素に半角スペースで区切って複数のclassを設定することもできます。（例：<div class="font-red bg-color item1">） - id属性
#header,#footerなど、ページ内で一度しか使わない場合に使います。１つの要素にidとclassの両方を設定する事もできます。
また、ページ内リンクを設定する場合のジャンプ対象にはidを設定します。ブラウザは、ページ内リンクをクリックすると、「#」の後についている名前を探し、その名前と同じ id がついている要素を見つけて、そこにジャンプする仕組みになっています 。また、目の不自由な方が使うスクリーンリーダーや、キーボード操作だけでサイトを使う方もいます。これらのツールは、ページ内リンクをたどるときに、特別な名前である id を目印にしているのでid属性である必要があります 。一部のブラウザではクラスでもジャンプしますが、現状では必ずidを使用します。
アクセシビリティに配慮
アクセシビリティ（Accessibility）とは、誰もが平等に製品・サービス・情報にアクセスし、利用できるようにすることを指します。
ウェブサイトやアプリなどが、高齢者や障害のある人を含めたすべての人にとって使いやすい設計になっていることが重要です。
アクセシビリティ対応の目的
- 誰もが平等に情報やサービスにアクセスできるようにすることで公平性を確保する
- 以前は努力義務だったが、2024年4月から一般企業のサイトもアクセシビリティ対応が義務づけられた
- すべての人にとって使いやすくする事で、ユーザー体験（UX：ユーザーエクスペリエンス）を向上させ、利用者全体の満足度を上げる。
- 配慮のある設計でブランドイメージの向上を図る
Webアクセシビリティでやるべきこと
- 画像に代替テキスト（alt属性）をつける
- 視覚障害のある人がスクリーンリーダーで内容を理解できるよう、具体的な画像の説明文を入れる
- 十分なコントラスト比を確保する
- テキストと背景の色のコントラストが低いと視覚障害者や高齢者に読みにくいので、通常のテキストでは4.5:1以上にする
🔗Adobe Colorのアクセシビリティツール
- テキストと背景の色のコントラストが低いと視覚障害者や高齢者に読みにくいので、通常のテキストでは4.5:1以上にする
- 見出しタグ（h1～h6）を正しく使う
- 見出しタグは、ページの内容をわかりやすく整理するために使います。見出しによってスクリーンリーダーなどの支援技術がページの構成を理解しやすくなり、ユーザーもどこに何があるか見つけやすくなります。デザインの見た目ではなく、内容の意味や順序に合わせて使うのがポイント
更にもう一歩踏み込むなら
- 色覚障害を持つ方は思ったより多いので、色だけに頼らずに情報を提示することが重要です。例えば、必須項目を赤色で示すのではなく、「必須」とテキストで記載するなど、色以外の方法でも明確に伝えます。また、白、黒、青、紫など、色覚障害でも識別しやすい色を使うよう心がけます。
参考：色弱者の見え方を疑似体験してみよう
参考：Chromatic Vision Simulator aria-label="グローバルナビゲーション"などのARIA属性の活用- マウスが使えない人のために、キーボード（Tabキー）だけで操作できるようにする
- 入力フォームには
<label>タグを使って「名前」の項目なら「名前、テキストボックス」と読ませたり、クリックすると自動的に入力欄にフォーカスが移るようにする - 入力フォームなどのエラーメッセージは何が原因でどうすればいいかの説明を入れてわかりやすく
- 動画や音声には字幕や文字起こしをして聴覚障害の方や音を出せない環境の方にも配慮する