HTML5のhidden属性は内容が現在の状態に関係するかで使う

公開日：2014年11月1日執筆：佐藤

HTML5のhidden属性は、その要素がページの現在の状態にまだ関係しない、または、もう関係しない場合に使います。見た目を一時的に消したいという理由だけでは決めません。内容を利用者へ示す状態かどうかを先に決め、その状態をHTMLへ表す属性です。

hiddenは真偽属性なので、属性があれば非表示の状態です。hidden="false"と書いても表示には戻りません。表示するときは属性そのものを外します。

hidden属性は現在の状態に関係しない内容へ付ける

hidden属性は、すべてのHTML要素へ指定できます。指定した要素は、ページの現在の状態にまだ直接関係しない、すでに関係しなくなった、または別の部分から再利用するために置かれた内容を表します。利用者へ直接見せる状態ではないため、user agentはその要素を表示しません。

たとえば、入力内容を送信する前の確認メッセージは、入力中の状態にはまだ関係しません。最初はhiddenを付け、確認できる状態になったときに外す、という使い方ができます。

<section id="confirmation" hidden>
  <h2>入力内容の確認</h2>
  <p>内容を確認してから送信してください。</p>
</section>

この例が示すのは、確認画面の設計方法ではなく、現在の状態と要素の関係です。送信前でも読者へ伝える必要がある注意事項は、hiddenの中へ移してはいけません。

hiddenは真偽属性です。次の三つは、いずれも属性が存在するため非表示の状態を表します。

<section hidden>...</section>
<section hidden="hidden">...</section>
<section hidden="false">...</section>

falseという文字列で表示へ戻すことはできません。HTMLを変更するならhidden属性を削除し、JavaScriptから変更するならhiddenプロパティへfalseを代入します。

var confirmation = document.getElementById('confirmation');

confirmation.hidden = false;

反対に、現在の状態へ関係しなくなった要素を隠す場合は、confirmation.hidden = true;とします。属性の文字列を組み立てるより、表示する状態と非表示にする状態を真偽値で分ける方が意図を確認しやすくなります。

CSSのdisplayプロパティでnoneを指定しても、要素の箱は作られません。ただし、CSSは表示方法を指定する仕組みです。hiddenは、内容が現在の状態に関係するかをHTMLで示します。

画面幅によってナビゲーションを畳む、印刷時だけ操作ボタンを出さない、といった表示方法の違いにはCSSを使います。内容そのものが現在の状態に関係しない場合にhiddenを使います。この二つを「画面から消える」という結果だけで選ばないでください。

hiddenの表示はCSSを通して実装される場合があり、強いdisplay指定で打ち消すこともできます。たとえば、すべてのsectionへdisplay: blockを指定するCSSがhiddenの表示まで変えていないか、実際のページで確認します。

表示されているリンクから、hiddenを付けた要素へ移動させてはいけません。リンクを選んでも移動先が見えず、利用者は結果を確認できないからです。表示中のlabelやoutputから、hiddenな要素を参照する場合も同じ問題が起きます。

確認画面へのリンクや入力欄を用意するなら、移動先や対象を表示する状態と、操作できる状態を一緒に切り替えます。要素だけを隠し、そこへ向かう操作を残さないようにします。

まず、ページに必要な状態を紙に書き出します。入力前、入力中、確認可能、送信済みのように分け、それぞれで直接関係する内容を決めます。次に、関係しない状態だけへhiddenを付けます。

実装後は、初期表示、JavaScriptによる切替、戻る操作、CSSを読み込めない場合、印刷表示を確認します。対象browserでhiddenの動作を確認できない場合は、対応を推測せず、必要な代替処理を決めます。

制作を委託しても、どの状態で何を見せるかは発注側が持つべき情報です。HTML、CSS、JavaScriptだけでなく、状態一覧と切替条件も受け取ってください。内容や申込手順が変わったとき、隠れたままになった案内を自分で見つけられます。

Logo

戻る