HTML要素 ・ ページ構造
<main>
ページの主要な内容
そのページ固有の主要な内容を囲む要素です。ヘッダーやフッターなど、各ページ共通の部分は含めません。
01
サンプルコード
HTML
1<header>Cafe Mimosa</header>
2<main>
3 <h1>メニュー</h1>
4 <p>季節のケーキと自家焙煎のコーヒー。</p>
5</main>
6<footer>© Cafe Mimosa</footer>
CSS
1body {
2 padding: 0;
3}
4header, footer {
5 padding: 12px 20px;
6 background: #7d5411;
7 color: #fff;
8}
9main {
10 padding: 12px 20px;
11}
12main {
13 background: #fbf6ee;
14}
15h1 {
16 font-size: 22px;
17 margin: 0 0 8px;
18}
02
実行結果
ブラウザでの表示
03
解説
main は、そのページの本題となる内容を示します。サイトのロゴやナビゲーション、フッターのように、どのページにも共通する部分は main の外に書きます。
読み上げソフトには「メインコンテンツへ移動」する機能があり、main があると利用者はナビゲーションを飛ばして本文から読み始められます。
main は1ページに1つだけ表示します。article や aside の中には入れられません。
04
応用例・注意点
ページの基本構造
| 要素 | 説明 |
|---|---|
header | サイトのヘッダー |
nav | グローバルナビゲーション |
main | ページ固有の主要な内容 |
aside | サイドバーなどの補足 |
footer | サイトのフッター |
本文へのスキップリンク
キーボード利用者のために、main へ直接移動するリンクを先頭に置きます。
HTML
1<a href="#content" class="skip">本文へスキップ</a>
2<header>…</header>
3<main id="content">…</main>
注意点
- 01main を複数表示しないでください（hidden で切り替える場合を除く）。
- 02main は header・footer・article・aside・nav の中に入れられません。