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

CSSのvisibilityプロパティを使って要素を非表示にする方法

Webページ上の要素を画面から隠したい場合、CSSの visibility プロパティに hidden を指定します。この方法を使うと、要素は見えなくなりますが、レイアウト上のスペースはそのまま保持されるのが特徴です。

基本的な使い方

以下のように、非表示にしたい要素に対して visibility: hidden; を設定するだけでOKです。

<html>
  <head>
  </head>
  <body>
    <p>
      この段落は表示されます。
    </p>
    <p style="visibility:hidden;">
      この段落は表示されません。
    </p>
  </body>
</html>

このコードを実行すると、1つ目の段落は通常どおり表示されますが、2つ目の段落は visibility: hidden; が適用されているため画面には表示されません。

visibility: hidden と display: none の違い

要素を非表示にする方法としては display: none; もよく使われますが、両者には重要な違いがあります。

  • visibility: hidden; … 要素は見えなくなりますが、元の領域（スペース）は確保されたままになります。
  • display: none; … 要素が完全に削除されたように扱われ、スペースごと消えます。

レイアウトを崩したくない場合は visibility: hidden; を、要素自体を存在させたくない場合は display: none; を使うとよいでしょう。

  1. CSSでcontenteditable要素の境界線（枠線）を削除する方法

    HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。コード例<!DOCTYPE html> <html> <head> <st

  2. CSSでスクロールバーを非表示にする方法をわかりやすく解説

    CSSでスクロールバーを非表示にする基本の方法Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。実装例<!DOCTYPE html> <html> <head> <style> body { height: 150vh; width: 200vw; overflow: hidden;