HTML5

グローバル属性

hidden

→● mdn

要素を隠す。

解説

真偽属性。

要素で指定される場合、それは、要素がまだないこと、またはもはやページの現在の状態には直接関係がない、または、ユーザーが直接アクセスするのとは対照的に、ページの他の部分で再利用するコンテンツを宣言するために使用されていることを示す。レンダリングされない。この要件は、スタイル レイヤーを通して間接的に実装されてもよい。たとえば、HTML＋CSS ユーザー エージェントは、レンダリングの節で提案される規則を使用してこの要件を実装することができる。

hidden 属性は、別のプレゼンテーションに合法的に示すことができた内容を隠すために使用されてはならない。たとえば、タブ付きインターフェイスは単にオーバーフロー プレゼンテーションの一種であるため、タブ付きダイアログでパネルを隠すために hidden を使用することは誤りである。─ それはスクロールバーをもつ 1 つの大きなページ内のすべてのフォーム制御を示すのと同様である。ちょうど 1 つのプレゼンテーションからコンテンツを非表示にするためにこの属性を使用することも同様に誤りである。─ 何かが hidden とマークされる場合、それは、たとえばスクリーン リーダーなどを含む、すべてのプレゼンテーションから隠されている。

自身が hidden でない要素は、hidden である要素へハイパーリンクされてはならない。自身が hidden でない LABEL および OUTPUT 要素の for 属性も同様に、hidden である要素を参照してはならない。どちらの場合も、このような参照はユーザーの混乱を引き起こすだろう。

しかし、要素およびスクリプトは、他のコンテキストで hidden である要素を参照してもよい。

例

<H1>The Example Game</H1>
<SECTION id="login">
 <H2>Login</H2>
 <FORM>
  ...
  <!-- calls login() once the user's credentials have been checked -->
 </FORM>
 <SCRIPT>
  function login() {
    // switch screens
    document.getElementById('login').hidden = true;
    document.getElementById('game').hidden = false;
  }
 </SCRIPT>
</SECTION>
<SECTION id="game" hidden>
 ...
</SECTION>

開始<SPAN hidden style=border:1px solid red;>テスト</SPAN>終了

テスト