最速でマスター！CSSでテキストを非表示にする3分間チュートリアル

2024-04-02

CSSでテキストを非表示にする方法

display: none; は、要素を完全に非表示にする最も一般的な方法です。このプロパティを指定すると、要素は画面に表示されなくなり、スクリーンリーダーでも読み上げられません。

.text {
  display: none;
}

visibility: hidden; は、要素を非表示にしますが、画面上のスペースは確保されます。つまり、要素は目に見えませんが、スクリーンリーダーでは読み上げることができます。

.text {
  visibility: hidden;
}

opacity: 0; は、要素の透明度を0にして、テキストを透けて見えなくします。ただし、要素自体は画面に残っているため、スクリーンリーダーでも読み上げることができます。

.text {
  opacity: 0;
}

text-indent: -9999px; は、テキストを左に大きくずらすことで、画面外に隠す方法です。この方法は、古いブラウザでも動作しますが、一部のブラウザでは意図したとおりに動作しない場合があります。

.text {
  text-indent: -9999px;
}

position: absolute; と left: -9999px; を組み合わせることで、テキストを画面左端の外側に配置して、非表示にすることができます。この方法は、要素の幅が可変の場合に有効です。

.text {
  position: absolute;
  left: -9999px;
}

overflow: hidden; と white-space: nowrap; を組み合わせることで、テキストの長さを制限して、画面外に隠すことができます。この方法は、長いテキストを省略したい場合に有効です。

.text {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

content: ""; は、疑似要素::beforeや::afterを使って、空のテキストノードを生成する方法です。この方法は、要素内に何も表示せずに、スタイルのみを適用したい場合に有効です。

.text::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

CSSでテキストを非表示にする方法はいくつかあり、それぞれ異なる特徴があります。目的に応じて適切な方法を選択することが重要です。

補足

上記の方法は、HTML要素だけでなく、SVG要素にも適用できます。
JavaScriptと組み合わせることで、条件によってテキストを表示/非表示を切り替えることもできます。

<div class="container">
  <h1>タイトル</h1>
  <p>これはテキストです。いろいろな方法で非表示にしてみます。</p>

  <h2>1. `display: none;`</h2>
  <p class="text1">このテキストは `display: none;` で非表示になります。</p>

  <h2>2. `visibility: hidden;`</h2>
  <p class="text2">このテキストは `visibility: hidden;` で非表示になります。</p>

  <h2>3. `opacity: 0;`</h2>
  <p class="text3">このテキストは `opacity: 0;` で非表示になります。</p>

  <h2>4. `text-indent: -9999px;`</h2>
  <p class="text4">このテキストは `text-indent: -9999px;` で非表示になります。</p>

  <h2>5. `position: absolute;` と `left: -9999px;`</h2>
  <p class="text5">このテキストは `position: absolute;` と `left: -9999px;` で非表示になります。</p>

  <h2>6. `overflow: hidden;` と `white-space: nowrap;`</h2>
  <p class="text6">
    このテキストは `overflow: hidden;` と `white-space: nowrap;` で非表示になります。
    これは長いテキストを省略したい場合に有効です。
  </p>

  <h2>7. `content: "";`</h2>
  <p class="text7">
    このテキストは `content: "";` で非表示になります。
    これは要素内に何も表示せずに、スタイルのみを適用したい場合に有効です。
  </p>
</div>

.text1 {
  display: none;
}

.text2 {
  visibility: hidden;
}

.text3 {
  opacity: 0;
}

.text4 {
  text-indent: -9999px;
}

.text5 {
  position: absolute;
  left: -9999px;
}

.text6 {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

.text7::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}