blob: 40eaf7b79ca20133c7eb4594e2207adcdb6a433a (
plain)
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
|
---
title: hidden
slug: Web/HTML/Global_attributes/hidden
tags:
- HTML
- Reference
- hidden
- グローバル属性
translation_of: Web/HTML/Global_attributes/hidden
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、要素はまだ、あるいはもはや<em>関連性</em>がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。</span>ブラウザーは、 <code>hidden</code> 属性を設定している要素を表示しません。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p><code>hidden</code> 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えば読み上げアプリを含むすべての表現方法から隠されます。</p>
<p>隠された要素は隠されていない要素からリンクするべきではありません。隠された要素の子孫である要素はまだアクティブであり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信できることを意味します。しかし、要素とスクリプトは、他の文脈で隠された要素を参照することがあります。</p>
<p>例えば、 <code>href</code> 属性を使用して <code>hidden</code> 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。</p>
<p>しかし、 ARIA の <code>aria-describedby</code> 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。</p>
<p>同様に、 canvas 要素に <code>hidden</code> 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。</p>
<div class="note">
<p><strong>注:</strong> <code>hidden</code> 属性を持つ要素について、 CSS の {{cssxref("display")}} プロパティの値を変更すると、挙動を上書きします。例えば <code>display: flex</code> を設定した要素は、 <code>hidden</code> 属性が存在しても表示されます。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>CSS による <code>hidden</code> 属性のデフォルトレンダリング方法の案を定義</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName('HTML WHATWG')}} のスナップショットであり、この属性を初めて定義しました。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.global_attributes.hidden")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li>
<li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute"><code>aria-hidden</code> 属性</a></li>
</ul>
|
