mainにコンテンツを配置し、mainを1つだけにする
主要なコンテンツ領域を1つだけ定義します。
「mainにコンテンツを配置し、mainを1つだけにする」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
main Is the Headline Act
Every page has one star: its unique content. The main element is where that content lives, separate from headers and footers.
One main, Always
A page should have exactly one main landmark. Two mains confuse users, who expect a single primary destination.
What Belongs Inside
Put the page's core content in main: the article, the form, the dashboard. The thing the user actually came for.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>What Stays Outside
Repeated stuff like the site logo, global nav, and footer links live outside main, since they are not unique to this page.
The Skip-Link Target
A skip link points to main so keyboard users can jump straight to content, past the repeated header on every page.
<a href="#main">Skip to content</a>
<main id="main">...</main>Make main Focusable
Add tabindex of -1 to main so a skip link can move focus into it without making it tabbable on its own.
<main id="main" tabindex="-1">
...
</main>Two mains, Hidden Rule
If you ever need a second main, all but one must be hidden from view. Only a single visible main is allowed at a time.
Do Not Nest main
The main element cannot live inside article, aside, nav, header, or footer. It sits at the top level of your page body.
The role main Fallback
For very old browsers you can add role of main as a backup, but the native main element is the right modern choice.
<main role="main">...</main>Why One main Helps
With a single main, screen reader users press one key and land exactly on the content, every page, every time. 🎯
A Clean Page Shape
Header, then nav, then one main, then footer. That predictable shape is what makes a page easy to scan by ear.
Quick Check
How many visible main landmarks should a single page expose?
Recap: One Clear main
You learned to put unique content in a single main, keep repeated parts outside, and use it as the skip-link target. 🙌
よくある質問
「mainにコンテンツを配置し、mainを1つだけにする」レッスンは無料ですか？
はい。「mainにコンテンツを配置し、mainを1つだけにする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「mainにコンテンツを配置し、mainを1つだけにする」で何を学びますか？
主要なコンテンツ領域を1つだけ定義します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「mainにコンテンツを配置し、mainを1つだけにする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- header、nav、main、footer：4つの主要要素
- mainにコンテンツを配置し、mainを1つだけにする
- aria-labelで複数の領域に名前を付ける
- ランドマークナビゲーション：ユーザーが移動する方法