CSSのvisibilityとopacityの違いを理解して使い分ける方法！初心者でもわかる表示制御

visibilityとopacityの違いを理解して使い分ける方法

先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで要素を見えなくしたいとき、visibilityとopacityどっちを使えばいいですか？」

先生

「それぞれ用途が違います。visibilityは要素を非表示にしますが、場所は残ります。opacityは透明にしますが、要素自体は存在していてクリックなども可能です。」

生徒

「じゃあ、どんなときに使い分ければいいんですか？」

先生

「ユーザーに見せたくないけどスペースは残したい場合はvisibility、完全に透明にしてもクリックなど操作は残したい場合はopacityを使います。」

1. visibilityとは何か？

CSSのvisibilityプロパティは、要素を見えなくしたり表示させたりするためのプロパティです。値は主にvisible（表示）とhidden（非表示）があります。visibility: hiddenにすると、要素は画面上に見えませんが、要素の領域は残るため、他の要素のレイアウトは変わりません。

2. opacityとは何か？

opacityは要素の透明度を制御するプロパティです。値は0から1の間で指定します。0は完全に透明、1は完全に不透明です。opacityを0にしても要素は存在しており、クリックやスクロールなどの操作は可能です。

3. visibilityとopacityの違いを分かりやすく理解する

簡単な例えでいうと、visibilityは壁の向こうにある窓のカーテンを閉めるイメージです。窓の位置は変わらず、カーテンで見えなくなるだけです。一方、opacityは窓ガラスを透明から半透明にするようなイメージです。透明でも窓自体は存在します。

4. visibilityとopacityの基本的な使い方


<style>
    .box-visibility {
        width: 150px;
        height: 150px;
        background-color: #0d6efd;
        color: white;
        text-align: center;
        line-height: 150px;
        visibility: hidden;
        margin-bottom: 20px;
    }
    .box-opacity {
        width: 150px;
        height: 150px;
        background-color: #198754;
        color: white;
        text-align: center;
        line-height: 150px;
        opacity: 0.3;
    }
</style>

<div class="box-visibility">visibility: hidden</div>
<div class="box-opacity">opacity: 0.3</div>

ブラウザ表示

上のボックスは画面に見えませんがスペースは残ります。下のボックスは半透明ですが操作可能です。

5. visibilityとopacityの使い分けのポイント

レイアウトに影響させたくない非表示の場合はvisibility: hiddenを使用
フェードイン・フェードアウトなど視覚効果を作りたい場合はopacityを使用
opacityは値を0〜1で調整可能で、アニメーション効果と相性が良い
visibility: hiddenは操作もできなくなるので注意

6. 応用の例：フェードインアニメーション

opacityを使うことで、要素を徐々に表示させるフェードイン効果が簡単に作れます。visibilityと組み合わせると、最初は見えない状態から滑らかに表示させるUIも可能です。


<style>
    .fade-box {
        width: 150px;
        height: 150px;
        background-color: #dc3545;
        color: white;
        text-align: center;
        line-height: 150px;
        opacity: 0;
        transition: opacity 2s;
    }
    .fade-box.show {
        opacity: 1;
    }
</style>

<div class="fade-box" id="fadeBox">フェードイン</div>

<script>
    setTimeout(() => {
        document.getElementById('fadeBox').classList.add('show');
    }, 1000);
</script>

ブラウザ表示

1秒後にopacityが0から1に変化し、要素がフェードインします。