hidden属性
hiddenブール属性で要素の表示と非表示を切り替えます。
「hidden属性」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
hiddenとは
hidden属性を指定すると、要素が非表示になり、アクセシビリティツリーから削除されます：
<p hidden>This paragraph is hidden.</p>
<!-- Equivalent to: display: none in CSS -->
<!-- The element is in the DOM but not rendered -->
<!-- Screen readers do not announce hidden elements -->hiddenはブール属性
ブール属性は、指定されている（true）か、指定されていない（false）かのどちらかです。値を指定する必要はありません：
<!-- All of these are equivalent: -->
<div hidden>Content</div>
<div hidden="">Content</div>
<div hidden="hidden">Content</div>
<!-- Remove with JavaScript: -->
element.removeAttribute('hidden');
<!-- Or set: -->
element.setAttribute('hidden', '');hiddenとdisplay:noneとvisibility:hiddenの違い
要素を非表示にする方法は3つあります：
/* hidden attribute = display:none */
/* Element is removed from flow, invisible to AT */
/* visibility: hidden */
/* Element occupies space but is invisible */
/* Still read by some screen readers */
/* opacity: 0 */
/* Element occupies space, invisible, still interactive */
/* Still read by screen readers */
/* Hidden attribute is the simplest for fully hiding content */JavaScriptで表示状態を切り替える
hidden属性を追加または削除して、表示状態を制御します：
const modal = document.getElementById('modal');
// Show:
modal.removeAttribute('hidden');
// or:
modal.hidden = false;
// Hide:
modal.setAttribute('hidden', '');
// or:
modal.hidden = true;
// Toggle:
modal.toggleAttribute('hidden');CSSでhiddenを上書きできる
CSSのdisplayによってhidden属性が上書きされることがあります。注意が必要です：
/* This makes hidden elements visible again: */
[hidden] {
display: block !important;
}
/* Do not do this unless you have a very specific reason */
/* The hidden attribute should be trusted as the source of truth for visibility */hiddenとaria-hiddenの違い
非表示には異なる2つの種類があります：
hidden— 視覚的に非表示になり、アクセシビリティツリーからも削除されますaria-hidden="true"— アクセシビリティツリーからのみ非表示になり、視覚的には描画されます
<!-- hidden: nothing sees it -->
<div hidden>Completely hidden</div>
<!-- aria-hidden: visual users see it, screen readers skip it -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>表示/非表示パターン
hiddenを使った従来の表示/非表示切り替え：
<button
aria-expanded="false"
aria-controls="menu"
id="menu-btn"
>Menu</button>
<ul id="menu" hidden>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
<script>
document.getElementById('menu-btn').addEventListener('click', function() {
const menu = document.getElementById('menu');
const expanded = this.getAttribute('aria-expanded') === 'true';
menu.hidden = expanded;
this.setAttribute('aria-expanded', !expanded);
});
</script>until-found値（新機能）
HTML 5.1以降では、検索可能なまま折りたたんでおけるコンテンツ向けにhidden="until-found"が導入されました：
<details>
<summary>Read More</summary>
<div hidden="until-found" id="more-content">
<p>This content is collapsed but findable by Ctrl+F.</p>
</div>
</details>
<!-- hidden="until-found" hides visually but allows browser Ctrl+F to find and reveal it -->
<!-- Only supported in Chromium-based browsers currently -->スクリーンリーダーでの動作
hidden属性は、支援技術からコンテンツを完全に非表示にします：
- スクリーンリーダーは非表示の要素を読み飛ばします
- Tabキーによるフォーカスは非表示の要素に移動しません
- これは、非表示の間はたどる必要がないモーダル、オフキャンバスメニュー、条件付きパネルに適しています
よくある使用例
hidden属性を使用する場面：
- 開く前のモーダルダイアログ
- タブパネルのコンテンツ（アクティブなタブのパネルを表示し、それ以外を非表示にする）
- ステップ式ウィザード（現在のステップを表示する）
- 段階的開示（クリックして詳細情報を表示する）
- 読み込み状態（読み込みスピナーをコンテンツに置き換える）
非表示状態の保持
localStorageを使用すると、ページを読み込んだ後も表示状態を保持できます：
const panel = document.getElementById('info-panel');
const key = 'info-panel-visible';
// Restore state:
if (localStorage.getItem(key) === 'false') {
panel.hidden = true;
}
// On toggle:
document.getElementById('toggle-btn').addEventListener('click', () => {
panel.hidden = !panel.hidden;
localStorage.setItem(key, !panel.hidden);
});確認問題
hidden属性とaria-hiddenの違いは何ですか？
まとめ：hidden属性
hidden属性の要点：
hidden—display: noneと同等です- ブール属性：指定すると非表示、指定しないと表示されます
- アクセシビリティツリーから削除されます（
visibility: hiddenとは異なります） element.hidden = true/falseで切り替えますaria-hidden="true"は支援技術からのみ非表示にし、視覚的な描画は維持します
よくある質問
「hidden属性」レッスンは無料ですか？
はい。「hidden属性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「hidden属性」で何を学びますか？
hiddenブール属性で要素の表示と非表示を切り替えます。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「hidden属性」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。