hidden属性

ページに関係ない要素は、非表示にすることもできます。

本ページでは、グローバル属性のhiddenについて説明します。

hidden属性とは

hiddenは、ページの内容に関係ない要素を非表示にする時に使います。

グローバル属性のため、すべてのHTML要素で使えます。

なお、hidden属性を指定していても、CSSのdisplayプロパティの値によっては表示されます。例えば、display:block;など宣言した場合です。

利用例

hiddenの利用例は、以下のとおりです。

【hiddenの利用例】
<button onclick="func1()">休憩</button>
<span hidden id="test">休憩用コラムです。</span>

<script>
function func1() {
  document.getElementById("test").hidden = false;
}
</script>

「休憩用コラムです。」は、最初ブラウザ上で表示されません。「休憩」ボタンをクリックすると、JavaScriptでhidden属性が削除されて、表示されるようになります。

実行例

実行例は、以下のとおりです。

留意点

hidden属性が設定された要素にリンクすることや、一部の環境から見た時だけ非表示にするといった使い方は、推奨されません。

hidden属性は、ページと関係ないコンテンツを非表示にする時に使います。最初は非表示でも、関係することになった時に表示したり、逆に関係しなくなった時に非表示にしたりします。

ページに関係する内容を一時的に非表示にする場合は、CSSのdisplayプロパティなどで行います。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
hidden
【スマートフォン】
項目 Sa An Op Ch Fx Sm
hidden
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。