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

CSSのdisplay:noneで要素を非表示にする方法

CSSで要素を画面上から完全に取り除きたい場合は、displayプロパティにnoneを指定します。この値が設定された要素はブラウザ上に一切表示されず、レイアウト上のスペースも占有しません。

例1：p要素を非表示にする

以下の例では、p.demoクラスにdisplay: none;を適用しています。その結果、「9AM」というテキストはページ上に表示されません。一方、span.demo1にはdisplay: inline;を指定しているため、オレンジ色の背景を持つインライン要素として通常どおり表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    background-color: orange;
    color: white;
}
p.demo {
    display: none;
}
span.demo1 {
    display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>

出力結果

「9AM」の部分が非表示になり、周囲のテキストだけが表示されます。display: none;が適用された要素は存在しなかったものとして扱われるため、前後のコンテンツが自然につながって表示される点に注目してください。

例2：span要素を非表示にする

次の例では、すべてのspan要素に対してdisplay: none;を一括で指定しています。そのため、「XYZ College」というテキストは表示されず、「ABC College」の部分だけが読者に見えることになります。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    display: none;
}
.demo2 {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

出力結果

「XYZ College」が非表示になり、「Examination Center near ABC College」という形でテキストが表示されます。また、.demo2クラスには二重線の赤い下線（text-decoration-style: double;とtext-decoration-color: red;）が適用されていることも確認できます。

補足：visibility:hiddenとの違い

display: none;と似た効果を持つプロパティにvisibility: hidden;がありますが、両者には重要な違いがあります。

  • display: none; … 要素を完全に削除し、占めていたスペースも詰められる。
  • visibility: hidden; … 要素は見えなくなるが、元のスペースはそのまま保持される。

レイアウトを崩したくない場合はvisibility: hidden;、要素ごと完全に取り除きたい場合はdisplay: none;を使うと、目的に応じた適切な非表示処理が実現できます。

  1. 【CSS】display:inline-blockの使い方をサンプルコード付きで解説

    display:inline-blockとは？CSSの display プロパティに inline-block を指定すると、要素は「コンテンツ本来の幅」と「明示的に指定された幅」のうち、大きい方に合わせて描画されます。また、親要素の幅を使い切るまでは改行（折り返し）が強制されないため、複数の要素を自然に横並びで配置できます。inline-block は、インライン要素のように横方向へ流れるような配置をしながら、ブロックレベル要素と同様に width・height・margin・padding を自由に設定できる、両者の特徴を兼ね備えた表示形式です。ナビゲーションメニュー、ボタン群、カード型レ

  2. CSSの最新アップデート：displayプロパティの2値構文（外部値と内部値）

    CSSのdisplayプロパティには、新しく「2値構文」が導入されました。この構文を使うことで、要素の表示タイプ（外部値と内部値）を明示的に指定できるようになり、要素のフローレイアウトをより柔軟に制御できるようになります。従来のdisplayプロパティは単一のキーワード（例：block、inline-blockなど）で指定していましたが、2値構文では「要素がどのように振る舞うか（外部値）」と「中身がどのようにレイアウトされるか（内部値）」を個別に組み合わせて指定できます。構文CSSのdisplayプロパティの基本構文は以下のとおりです。Selector {    displ