files/ja/web/html/element/footer/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

---
title: <footer>
slug: Web/HTML/Element/footer
tags:
  - Element
  - HTML
  - HTML sections
  - Reference
translation_of: Web/HTML/Element/footer
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;footer&gt;</code> 要素</strong>は、直近の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>または<a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_root">区分化ルート</a>要素のフッターを表します。フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含めます。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。但し、他の <code>&lt;footer&gt;</code> や {{HTMLElement("header")}} の子孫がないもの。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、 {{HTMLElement("address")}}, {{HTMLElement("header")}}, 他の <code>&lt;footer&gt;</code> の子孫要素として配置してはならない。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a>、ただし <a href="/ja/docs/Web/HTML/Element/article">article</a>, <a href="/ja/docs/Web/HTML/Element/aside">aside</a>, <a href="/ja/docs/Web/HTML/Element/main">main</a>, <a href="/ja/docs/Web/HTML/Element/nav">nav</a>, <a href="/ja/docs/Web/HTML/Element/section">section</a> のいずれかの要素、または <code>role=<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a> がある要素の子である場合は<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

<ul>
 <li>セクションの著作者や編集者の連絡先情報は、多くの場合 <code>&lt;footer&gt;</code> 要素内に {{HTMLElement("address")}} 要素として配置します。</li>
 <li><code>&lt;footer&gt;</code> 要素は区分コンテンツではありません。つまり、この要素が新たな<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">アウトライン</a>を生成することはありません。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html notranslate">&lt;footer&gt;
  Some copyright info or perhaps some author
  info for an &amp;lt;article&amp;gt;?
&lt;/footer&gt;
</pre>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p>Safari 13 のリリース以前は、 <code>contentinfo</code> の<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">ランドマークロール</a>が <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> によって適切に公開されていませんでした。古い Safari ブラウザーに対応する必要がある場合は、 <code>role="contentinfo"</code> を <code>footer</code> 要素に追加して、ランドマークが適切に表示されるようにしてください。</p>

<ul>
 <li>関連記事: <a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#the-footer-element', '&lt;footer&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.footer")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
 <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li>
 <li class="last"><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: Contentinfo ロール</a></li>
</ul>