0Pricing
CSS Academy · レッスン

VisibilityとDisplay None

visibility: hiddenとdisplay: noneを使い分け、それぞれがレイアウトに与える影響を学びます。

「VisibilityとDisplay None」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

要素を非表示にする3つの方法

CSSには要素を非表示にする一般的な方法が3つあり、それぞれレイアウト、アクセシビリティ、操作性への影響が異なります。

  1. display: none
  2. visibility: hidden
  3. opacity: 0

display: none

要素はレイアウトから完全に削除されます。スペースを占有せず、操作できず、（ほとんどの実装では）スクリーンリーダーにも読み上げられません。要素自体はDOMに残ります。

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

要素は見えなくなりますが、レイアウト上のスペースは占有したままです。クリックできず、スクリーンリーダーにも読み上げられません。レイアウトの変化を起こさずに何かを非表示にしたい場合に適しています。

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

要素は見えなくなりますが、完全に操作可能なままです。スペースを占有し、イベント（クリックやホバー）にも反応します。スクリーンリーダーで読み上げられる場合もあります。

<button class="transparent">Invisible but clickable</button>

visibility: visible による上書き

子要素にvisibility: visibleを設定すると、親要素のvisibility: hiddenを上書きできます。display: noneではこれはできません。子要素も例外なくその影響を受けます。

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

比較表

早見表：

  • display: none：スペースなし、クリック不可、読み上げなし
  • visibility: hidden：スペースあり、クリック不可、読み上げなし
  • opacity: 0：スペースあり、クリック可能、読み上げられる場合あり

visibility をトランジションさせる

displayはトランジションできません。要素をフェードイン・フェードアウトさせるには、visibilityとopacityを組み合わせます。

<div class="dropdown open">Dropdown menu content</div>

SR-only によるアクセシブルな非表示

screen-reader onlyパターンは、コンテンツを視覚的には非表示にしながら、支援技術からはアクセスできる状態にします。

<button>Save <span class="sr-only">your document now</span></button>

hidden 属性と CSS の違い

HTMLのhidden属性は、ブラウザーのユーザーエージェントスタイルシートを通じてdisplay: noneを適用します。アクセシブルで意味のある方法ですが、CSSの詳細度によって上書きできます。

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hiddenは画面外のセクションの描画を省略しながら、アクセシビリティツリーとレイアウトを維持します。長いページに適した、現代的なパフォーマンス向上の手法です。

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

要素を表示したまま操作できない状態にするには、pointer-events: noneを使用します。クリックやホバーは要素を通り抜け、その下にある要素へ渡されます。

<div class="overlay">Clicks pass through this overlay</div>

理解度チェック

要素が占有するレイアウト上のスペースを維持したまま非表示にする方法はどれですか。

まとめ

display: noneは要素をレイアウトから完全に削除します。visibility: hiddenはスペースを維持したまま非表示にします。opacity: 0は非表示にしますが、操作可能な状態を維持します。アクセシブルな非表示には.sr-onlyパターンを使用します。フェードトランジションにはvisibilityとopacityを組み合わせます。

よくある質問

「VisibilityとDisplay None」レッスンは無料ですか？

はい。「VisibilityとDisplay None」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「VisibilityとDisplay None」で何を学びますか？

visibility: hiddenとdisplay: noneを使い分け、それぞれがレイアウトに与える影響を学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「VisibilityとDisplay None」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Block、Inline、Inline-Block
  2. VisibilityとDisplay None
  3. Overflow：Scroll、Clip、Auto
  4. CSS ResetとNormalize
← CSS Academyに戻る