記事タイトル
本文...
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
| この記事の要点 |
|
main 要素とは
HTML5.1 で標準化されたセクション要素。ページの主要コンテンツを意味します。スクリーンリーダー利用者が「本文だけを読みたい」とき、この要素にジャンプできます。
記事タイトル | サイト名
サイト名
含めるべき / 含めないべき
| 要素 | | 理由 |
|---|---|---|
| × | 全ページ共通の要素 |
| × | 全ページ共通 |
| ○ | ページの主役 |
| ○ | 本文の節 |
記事内のヘッダ | ○ | 記事の冒頭部分（タイトル等） |
記事内のフッタ | ○ | 記事の末尾（著者情報等） |
サイドバー | △ | 本文の補足なら含めても OK |
| × | 全ページ共通 |
1 ページに 1 つだけ
HTML5 仕様は「 はページに 1 つだけ」と明記。複数あるとバリデーションエラー、スクリーンリーダーも混乱します:
記事 A 記事 B
記事 A
記事 B
例外: hidden 属性付きなら複数 OK（SPA で画面切替時に使う）。
ホーム
...About
...Contact
...ARIA role との関係
HTML5 の は暗黙の role が main。明示的に書く必要はありません:
...
...
...
...
Skip Link（本文へスキップ）
キーボード / スクリーンリーダー利用者のため、ページ冒頭に「本文へスキップ」リンクを置きます:
本文へスキップ
...
...
HTML5 アウトラインと main
HTML5 のアウトラインアルゴリズム上、 はセクショニング要素ではない（ / / / がセクショニング）。アウトラインに新しい階層は作りません:
サイト名
記事タイトル
セクション 1
SEO 観点
- Google は
を「メインコンテンツの目印」として活用 - 抜粋（meta description 自動生成）に
内が優先される傾向 - サイドバーや広告を本文と区別できる → 検索品質向上
- Reader Mode（Safari / Firefox）が
を起点に本文抽出
CSS で main にスタイル
/* レイアウトの基本 */
main {
max-width: 800px;
margin: 0 auto;
padding: 2em 1em;
line-height: 1.7;
}
/* 2 カラム（main + aside） */
body {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2em;
max-width: 1200px;
margin: 0 auto;
}
aside {
border-left: 1px solid #ccc;
padding-left: 2em;
}
/* スマホで 1 カラムに */
@media (max-width: 768px) {
body {
grid-template-columns: 1fr;
}
aside { border-left: none; border-top: 1px solid #ccc; }
}main 要素を使う前と後
...
...
...
...
JavaScript で main を活用
// 本文抽出
const mainContent = document.querySelector('main');
const text = mainContent.innerText;
console.log('本文文字数:', text.length);
// 読了時間計算
const wordsPerMinute = 400; // 日本語の場合
const minutes = Math.ceil(text.length / wordsPerMinute);
console.log(`読了目安: ${minutes} 分`);
// 印刷時に main だけ表示
function printArticleOnly() {
const original = document.body.innerHTML;
document.body.innerHTML = mainContent.outerHTML;
window.print();
document.body.innerHTML = original;
}
// SPA でルート切替時にフォーカス移動（a11y）
function navigateTo(path) {
history.pushState({}, '', path);
const main = document.querySelector('main');
main.focus(); // スクリーンリーダーが新しいコンテンツを読み始める
}ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome / Edge | 26+（実質ほぼ全バージョン） |
| Firefox | 21+ |
| Safari | 7+ |
| IE 11 | レンダリングは可、CSS スタイル不可。main { display: block } 必要 |
IE11 向けには CSS で display: block を明示するのが安全:
/* IE 11 対応 (HTML5 セマンティック要素を block 化) */
header, footer, main, nav, aside, article, section, figure, figcaption {
display: block;
}FAQ
Q: Q: ランディングページのように主役が複数ある場合は？ Q: SPA で URL 切替ごとに main を入れ替えても良い？ ページの作成
親となるページを選択してください。
子ページはありません を使わずに でも OK？
A: HTML4 / 古いブラウザ向けには OK。HTML5 では の方が短くて意味も明確です。
A: 1 つの の中で や を並べてください。 を複数置くのは仕様違反です。
A: OK。むしろ a11y 上、画面遷移後に にフォーカスを移すのが推奨です。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法｜window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧｜403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧｜500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは｜モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML aside要素 完全ガイド（補足情報 / サイドバー / 引用 / article との違い） 2026-06-11 05:39:14
- CSS transform 完全ガイド（translate / rotate / scale / skew / 3D 変形 + GPU 加速） 2026-06-11 05:39:14
- Oracle 管理ツール完全ガイド（OUI / DBCA / SQL*Plus / OEM / Data Pump / RMAN 役割比較） 2026-06-11 05:39:14
- HTML section要素 完全ガイド（一般的なセクション / 見出し必須 / article との違い） 2026-06-11 05:39:14
- CSS 背景プロパティ完全ガイド（background-color / image / size / gradient 一括指定） 2026-06-11 05:39:14
- CSS フォント関連プロパティ完全ガイド（font-family / size / weight / 一括指定 / Web フォント） 2026-06-11 05:39:14
- HTML li要素 完全ガイド（ul / ol との関係 / value属性 / ネスト / アクセシビリティ） 2026-06-11 05:39:14
- Java 日時 API 完全ガイド（java.time / LocalDate / Instant / Duration / 旧 Date と比較） 2026-06-11 05:39:14
- Vue CLI でプロジェクト作成（npm install / vue create / npm run serve 手順 mac） 2026-06-11 05:39:14
- JAX-RS 完全ガイド（Java EE で REST API 開発 / @Path / @GET / Jersey / RESTEasy） 2026-06-11 05:39:14
- SQL DROP TABLE 完全ガイド（CASCADE CONSTRAINTS / PURGE / 復元 / Oracle・MySQL・PostgreSQL） 2026-06-11 05:35:25
- Linux chown コマンド完全ガイド（再帰 -R / グループ変更 / 数値 UID / 注意点） 2026-06-11 05:35:25
- Docker Desktop for Windows インストール完全ガイド（Hyper-V 有効化 / WSL2 / 動作確認） 2026-06-11 05:35:25
- SQL ALTER TABLE MODIFY / ALTER COLUMN（カラム定義変更を Oracle / MySQL / PostgreSQL 別に解説） 2026-06-11 05:35:25
- SQL ORDER BY 完全ガイド（昇順 / 降順 / 複数カラム / NULL 順序 / インデックス活用） 2026-06-11 05:35:25
コメントを削除してもよろしいでしょうか？
掲示板