From 7e5e591d64fd358c99a2a0ac18209472af20e9fe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Apr 2021 23:57:45 +0900 Subject: Web/HTML/Element/section を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/13 時点の英語版に同期 --- files/ja/web/html/element/section/index.html | 122 +++++++++++++++++++-------- 1 file changed, 88 insertions(+), 34 deletions(-) (limited to 'files') diff --git a/files/ja/web/html/element/section/index.html b/files/ja/web/html/element/section/index.html index 6c8e43f38f..2ad3782145 100644 --- a/files/ja/web/html/element/section/index.html +++ b/files/ja/web/html/element/section/index.html @@ -2,39 +2,34 @@ title: '
: 汎用セクション要素' slug: Web/HTML/Element/section tags: + - Element - HTML - - HTML セクション - - 'HTML:フローコンテンツ' - - 'HTML:区分コンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML sections + - HTML:フローコンテンツ + - HTML:区分コンテンツ + - HTML:知覚可能コンテンツ - Reference - - ウェブ - - 要素 + - Section + - Web translation_of: Web/HTML/Element/section ---
{{HTMLRef}}
-

HTML の <section> 要素は、 HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。

+

HTML の <section> 要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}
-

例えば、ナビゲーションメニューは {{htmlelement("nav")}} 要素で表しますが、検索結果の一覧や地図の表示やコントロールには具体的な要素がないので、 <section> の中に入れることができます。

- -
-

メモ: 要素の内容が個別の記事をまとめたものであれば、 {{HTMLElement("article")}} 要素がより適しているかもしれません。

-
- - - + + - + @@ -42,11 +37,15 @@ translation_of: Web/HTML/Element/section - + + + + + - + @@ -55,36 +54,90 @@ translation_of: Web/HTML/Element/section
コンテンツカテゴリフローコンテンツ, 区分コンテンツ, 知覚可能コンテンツコンテンツカテゴリーフローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツフローコンテンツ
タグの省略
許可されている親要素フローコンテンツを受け入れるすべての要素。ただし、 <section> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。フローコンテンツを受け入れるすべての要素。ただし、 <section> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。
暗黙の ARIA ロール要素にアクセシブル名がある場合はregion、それ以外の場合は対応するロールなし
許可されている ARIA ロール{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}
DOM インターフェイス
-

属性

+

属性

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

-

使用上の注意

+

使用上の注意

+ +

前述のように、 <section> は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは {{htmlelement("nav")}} 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <section> の中に入れることができます。

+ +

また、次のようなことも考慮してください。

-

例

+

繰り返しになりますが、それぞれの <section> はできるだけ、特に見出し +({{HTMLElement('h1')}}-{{HTMLElement('h6')}} 要素) を <section> の子要素に含めて識別できるようにするべきです。見出しのない <section> の例については以下を参照してください。

+ +

例

+ +

単純な使い方の例

-

導入前

+

導入前

<div>
-  <h1>Heading</h1>
-  <p>Bunch of awesome content</p>
+  <h2>見出し</h2>
+  <p>素晴らしいコンテンツの数々</p>
 </div>
-

導入後

+

導入後

+ +
<section>
+  <h2>見出し</h2>
+  <p>素晴らしいコンテンツの数々</p>
+</section>
+
+ +

見出しのないセクションの使用

+ +

<section> が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特に画面リーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。

+ +

しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに <nav> 要素で囲まれている場合、 <section> の中に前へ/次へのメニューを入れることも考えられます。

<section>
-  <h1>Heading</h1>
-  <p>Bunch of awesome content</p>
+  <a href="#">前の記事</a>
+  <a href="#">次の記事</a>
 </section>
-

仕様書

+

また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。

+ +
<section>
+  <button class="reply">返信</button>
+  <button class="reply-all">全員に返信</button>
+  <button class="fwd">転送</button>
+  <button class="del">削除</button>
+</section>
+
+ +

見出しのないセクションは、文書のアウトラインには表示されません。このような HTML ブロックを文書のアウトラインの中に強制的に入れたいが、視覚的な出力には何の影響も与えたくない場合は、非表示にした見出しを入れることができます。

+ +
<section>
+  <h2 class="hidden">コントロール</h2>
+  <button class="reply">返信</button>
+  <button class="reply-all">全員に返信</button>
+  <button class="fwd">転送</button>
+  <button class="del">削除</button>
+</section>
+
+ +

支援技術や画面リーダーに適した CSS を使って非表示にするには、次のようにします。

+ +
.hidden {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+ +

コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。

+ +

仕様書

@@ -113,16 +166,17 @@ translation_of: Web/HTML/Element/section
-

ブラウザーの互換性

+

ブラウザーの互換性

- +

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

-

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf