From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/main/index.html | 173 ++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 files/ja/web/html/element/main/index.html (limited to 'files/ja/web/html/element/main') diff --git a/files/ja/web/html/element/main/index.html b/files/ja/web/html/element/main/index.html new file mode 100644 index 0000000000..8c3e730415 --- /dev/null +++ b/files/ja/web/html/element/main/index.html @@ -0,0 +1,173 @@ +--- +title:
+slug: Web/HTML/Element/main +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - main + - 要素 +translation_of: Web/HTML/Element/main +--- +
{{HTMLRef}}
+ +

HTML の <main> 要素は、文書の {{HTMLElement("body")}} の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。

+ +
{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
+ + + +

文書には {{htmlattrxref("hidden")}} 属性が指定されていない <main> 要素を2つ以上置くことはできません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツ
タグの省略不可。開始タグと終了タグの両方が必須。
許可されている親要素フローコンテンツを受け入れる場所、但し階層的に正しい main 要素であること。
許可されている ARIA ロール既定で <main> 要素に main ロールを適用します。また、presentation ロールも許可されます。
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

この要素にはグローバル属性のみがあります。

+ +

使用上の注意

+ +

<main> 要素の内容は、文書で固有のものにしてください。この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。(もちろん、主な内容が検索フォームでない限り)

+ +

<main> は文書のアウトラインに寄与しません。すなわち {{HTMLElement("body")}} や {{HTMLElement("h2")}} などの見出しとは異なり、 <main> はページの構造の {{glossary("DOM")}} の概念に影響を与えません。これは情報を与えるだけです。

+ +

例

+ +
<!-- 他のコンテンツ -->
+
+<main>
+  <h1>Apples</h1>
+  <p>The apple is the pomaceous fruit of the apple tree.</p>
+
+  <article>
+    <h2>Red Delicious</h2>
+    <p>These bright red apples are the most common found in many
+    supermarkets.</p>
+    <p>... </p>
+    <p>... </p>
+  </article>
+
+  <article>
+    <h2>Granny Smith</h2>
+    <p>These juicy, green apples make a great filling for
+    apple pies.</p>
+    <p>... </p>
+    <p>... </p>
+  </article>
+</main>
+
+<!-- 他のコンテンツ -->
+ +

アクセシビリティの考慮事項

+ +

ランドマーク

+ +

<main> 要素は main ランドマークロールのように動作します。ランドマークは、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。 古いブラウザーの互換性の確認ができない限り、 <main> を role="main" の宣言付きで使用するべきです。

+ +

スキップナビゲーション

+ +

スキップナビゲーションは、 "skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。

+ +

{{htmlattrxref("id")}} 属性を追加することで、 <main> 要素がスキップナビゲーションリンクのターゲットになることができます。

+ +
<body>
+  <a href="#main-content">Skip to main content</a>
+
+  <!-- navigation and header content -->
+
+  <main id="main-content">
+    <!-- main page content -->
+  </main>
+</body>
+
+ + + +

リーダーモード

+ +

ブラウザーのリーダーモードでは、コンテンツをリーダーに特化したビューに変換するときに、見出しやコンテンツ区分要素と同様に <main> 要素の存在を探します。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5.1')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの互換性

+ +

<main> は広く対応されています。 Internet Explorer 11 およびそれ以前については、アクセシビリティにするために <main> 要素に ARIA の "main" ロールを追加することが提案されています (JAWS のような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、 role 属性を含めれば <main> 要素の意味論的な意味を理解できるでしょう)。

+ +
<main role="main">
+  ...
+</main>
+
+ + + +

{{Compat("html.elements.main")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf