CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素を非表示にする方法：displayとvisibilityの違いを徹底解説

CSSで要素を非表示にするには、「display: none」または「visibility: hidden」というプロパティを使用します。display: noneは要素をページから完全に取り除くため、レイアウトに影響を与える可能性があります。一方、visibility: hiddenは要素を非表示にしながらも、その要素が占めていたスペースはそのまま維持されます。

Webページ上の特定の要素を隠したい場面はよくあります。例えば、ユーザーがボタンをクリックしたときに初めて表示されるテキストブロックを作りたいケースなどが挙げられます。

CSSで要素を非表示にする方法は、主に次の2つです。

  • display: none プロパティを使う方法
  • visibility: hidden プロパティを使う方法

前者はWebページのレイアウトに影響を与える可能性がありますが、どちらの方法も目的に応じて広く使われています。

CSSで要素を非表示にする：displayプロパティ

displayプロパティは、要素がWebページ上でどのように表示されるかを制御します。HTMLドキュメント内のすべての要素にはdisplayプロパティのデフォルト値が設定されていますが、その値は要素の種類によって異なります。ほとんどの要素では、デフォルト値はblockまたはinlineのいずれかです。

要素をまったく表示したくない場合は、displayプロパティの値をnoneに設定します。

element {
  display: none;
}

displayの値をnoneに設定すると、対象の要素は画面から消えます。つまり、その要素はWebページ上のスペースを一切占有しなくなります。

display: none の使用例

ここでは、地元の料理クラブ向けの「About Us（私たちについて）」ページをデザインしていると仮定しましょう。初期デザインではケーキの画像をページに配置しましたが、クラブ側から「最終デザインが未定のため、画像を非表示にしてほしい」という要望があったとします。

この場合、次のコードで画像を非表示にできます。

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>Superstar Bakers Clubは2014年に設立された、サウスカロライナ州チャールストン周辺の料理好き・お菓子作り好きが集まるコミュニティです。100人以上のメンバーが毎週集まり、アイデアを共有したり新しいレシピを試したりしています。</p>
</div>
<style>
img {
  display: none;
}
</style>

このHTMLコードでは、<div>タグの中に3つの要素を定義しています。<h1>要素は「About Us」という見出しを表示し、<img>要素は高さ200px・幅200pxのケーキ画像を生成し、<p>要素にはクラブの簡単な紹介文が含まれています。

CSSコードでは、「img」セレクターを使ってページ上のすべての画像タグを選択しています。このルールにより、すべての<img>タグのdisplayプロパティがnoneに設定され、結果として画像が非表示になります。

画像は非表示になっていますが、Webページ上には依然として存在しています。再び表示したい場合は、「display: none;」の記述を削除するか、別のdisplayスタイル（blockやinlineなど）を指定すればOKです。

なお、このルールはインラインのHTML属性として定義することも可能です。

<img style="display: none;" src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />

インラインHTMLやCSSプロパティについて詳しく知りたい方は、インラインCSSガイドもあわせてご覧ください。

CSSで要素を非表示にする：visibilityプロパティ

CSSのvisibilityプロパティは、要素がWebページ上で可視状態かどうかを制御するために使用されます。

デフォルトでは、visibilityプロパティの値はvisibleに設定されています。要素を非表示にしたい場合は、visibilityの値をhiddenに変更します。

element {
  visibility: hidden;
}

先ほどの料理クラブの例に戻りましょう。「About Us」ページのケーキ画像を非表示にしたい場合、次のコードで実現できます。

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>Superstar Bakers Clubは2014年に設立された、サウスカロライナ州チャールストン周辺の料理好き・お菓子作り好きが集まるコミュニティです。100人以上のメンバーが毎週集まり、アイデアを共有したり新しいレシピを試したりしています。</p>
</div>
<style>
img {
  visibility: hidden;
}
</style>

HTMLコードは前の例と同じです。CSSでは、displayプロパティの代わりにvisibilityプロパティを使って要素を非表示にしています。ご覧のとおり、画像はWebページから隠されました。

ただし、画像が消えたことで、見出しと段落の間に画像があったはずの場所へ空白スペースが生じています。これが「visibility: hidden;」スタイルの特徴です。元の要素のスペースはWebページによって保持されたままですが、要素自体は非表示になります。

CSSのvisibilityとdisplayの違い

ここまで紹介した2つの方法は一見同じように見えますが、両者には重要な違いがあります。

display: noneルールは、要素をHTMLドキュメントから取り除きます。非表示にされた要素のコードはソース上に残っていますが、要素自体は画面に表示されません。

一方、visibility: hiddenルールは要素を非表示にしますが、要素は引き続きWebページ上のスペースを占有します。要素を隠しつつレイアウトを崩したくない場合は、visibility: hidden;を使用するのが最適です。

プロパティ要素の状態レイアウトへの影響
display: noneドキュメントから完全に除去スペースがなくなり、周囲の要素が詰まる
visibility: hidden非表示だが存在は維持元のスペースはそのまま保持される

まとめ

display: noneルールは、要素をドキュメントから取り除き、画面上からも完全に消します。visibility: hiddenルールは、要素を非表示にしつつ、要素が表示されていたはずのスペースを空いたまま残します。

用途に応じた使い分けが大切です。レイアウトごと詰めたいなら「display: none」、スペースを確保したまま隠したいなら「visibility: hidden」を選びましょう。

CSSについてさらに学びたい方は、ぜひ「CSSの学習ガイド」も参考にしてください。実践的な学習アドバイスや、知識を深めるためのおすすめリソース集を掲載しています。

  1. CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説

    CSSを使えば、Webサイトのナビゲーションに便利な「アイコンバー」を簡単に作成できます。この記事では、Font Awesomeのアイコンを使用した横型・縦型のアイコンバーの作り方を、実際のコード例とともにわかりやすく解説します。 準備：Font Awesomeの読み込み アイコンを表示するために、ここではFont Awesome（4.7.0）を使用します。HTML内で以下のCDNリンクを読み込んでおきましょう。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font

  2. 【CSS入門】絶対単位と相対単位の違いと使い分けを徹底解説

    CSSの絶対単位（Absolute Length Units）とは？ 絶対単位は、単位同士の関係が固定されており、環境に左右されず一定の大きさを表す長さの単位です。印刷用のスタイルシートのように、出力先の物理的なサイズがあらかじめ分かっている場合に活用されます。 主な絶対長さの単位は以下のとおりです。 番号単位と説明 1cmセンチメートル 2mmミリメートル 3inインチ（1in = 96px = 2.54cm） 4px *ピクセル（1px = 1inの1/96）。画面上ではデバイスに依存しないCSSピクセルとして扱われます 5ptポイント（1pt = 1inの1/72）。印刷物でよく