CSSプロパティのvisibilityを使うことで、要素を非表示にすることができます。

非表示にできるプロパティには、displayやopacityなどがありますね。

何が違うのか、どう使い分けるのか分からない、という方も多いのではないでしょうか。

今回は、CSSプロパティのvisibilityの使い方をマスターしたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのvisibilityについて基本から応用までの使い方がわかるようになりますよ。

ぜひ最後まで読んでくださいね！

visibilityとは？どんなプロパティ？

visibilityは、要素の表示・非表示を指定するプロパティです。

具体的には、以下のように記述します。

<div>visibilityは要素の表示・非表示を設定できます。</div>
<div class="sample">この要素は表示されません。</div>
<div>非表示にしてもレイアウトは変わりません。</div>

CSSで一部の要素にvisibilityを指定します。

.sample {
  visibility: hidden;
}

2つ目の要素のみが非表示になっていますね。

非表示になるだけで、後ろの要素が詰めて表示されるわけではありません。

レイアウトはそのままで、非表示にした要素の部分がぽっかりと空いた状態になります。

要素を削除して、後ろの要素を詰めたい場合には「display:none」を使います。

両者の違いは、後の項目でも詳しく解説しますね。

visibilityで指定できる値は以下の3つです。

それぞれの値について、詳しく見ていきましょう。

visible

visibleは初期値で、要素が表示されている状態です。

visibilityを指定していなければ、この値が適用されます。

hidden

hiddenは、要素を非表示にします。

前述した通り、レイアウトは影響を受けず、非表示になった要素のサイズの空白ができます。

非表示なった要素は、タブキーを操作したときなどにもフォーカスされることはありません。

フォーカスが当たらないだけでなく、視覚的支援を行うスクリーンリーダーにも認識されなくなります。

collapse

collapseは、table要素の行や列、セルなどを非表示にします。

こちらも非表示になった要素分の空白が残りますが、行を非表示にした場合には、下の行が詰められて表示されます。

具体的にコードを書いていきます。

<table>
  <tr>
    <td>セル1-1</td>
    <td class="collapse">セル1-2</td>
    <td>セル1-3</td>
    <td>セル1-4</td>
  </tr>
  <tr class="collapse">
    <td>セル2-1</td>
    <td>セル2-2</td>
    <td>セル2-3</td>
    <td>セル2-4</td>
  </tr>
  <tr>
    <td>セル3-1</td>
    <td class="collapse">セル3-2</td>
    <td class="collapse">セル3-3</td>
    <td>セル3-4</td>
  </tr>
</table>

CSSは以下のように記述します。

table, td {
  border: 1px solid #333;
}
.collapse {
  visibility: collapse;
}

2行目のtr要素と「セル1-2」「セル3-2」「セル3-3」を非表示に設定しました。

2行目は非表示になり、空白が詰められて表示されますね。

他の3つのセルがあった部分は空白のまま残っています。

他の要素では、hiddenと同じ挙動になります。

visibilityと他のプロパティ

要素を非表示にできると聞いて、他のプロパティを使う方法を思い出した方も多いのではないでしょうか。

要素を非表示にできるプロパティには、以下の2つがあります。

それぞれ「opacity:0」「display:none」とすることで、要素が非表示になります。

visibilityと動作が似ていて、混同しやすいですよね。

ここでは、この2つとvisibilityの違いを解説していきます。

「opacity:0」と「visibility:hidden」の違い

opacityは、要素の不透明度を指定するプロパティです。

opacity:1が基準となり、完全に不透明の状態です。

この数値を下げていくことで徐々に透明度が増していき、0で完全に透明になります。

透明にしていたものをマウスホバーなどのアクションで表示させたり、背景画像を透過して表示させたいときなどに使用します。

visibility:hiddenとの違いは、opacityの場合はただ透明になるだけなので、a要素やinput要素の場合にはタブフォーカスが当たり、リンクをクリックすればページ移動をします。

要素は消えていないため、スクリーンリーダにも認識され読み上げられます。

visibility:hiddenは、アクセシビリティツリーから削除されている点が優れていますね。

両者の違いを実際に確認してみましょう。

<p>「visibility:visible」⇒<a href="#">リンク</a></p>
<p>「visibility:hidden」⇒<a href="#" class="hidden">リンク</a></p>
<p>「opacity:0」⇒<a href="#" class="opacity1">リンク</a></p>
<p>「opacity:0.5」⇒<a href="#" class="opacity2">リンク</a></p>

.hidden {
  visibility: hidden;
}
.opacity1 {
  opacity:0;
}
.opacity2 {
  opacity:0.5;
}

1行目は何も指定していないため、通常に表示されています。

2行目と3行目が非表示になっていますね。ただし、opacity:0の方はフォーカスが当たるようになっています。

マウスホバーした場合にもカーソルの形が変わるため、リンクがそこにあることがわかりますね。

比較するために半分透過したものを最後に置いています。

「display:none」と「visibility:hidden」の違い

displayは、要素の表示方法を設定するプロパティです。

ブロック要素またはインライン要素として扱いたいときに利用されます。

他にも、子要素の並びにフレックスボックスを適用するなど、子要素の表示指定に使われることがあります。

display:noneと指定することで、要素自体を削除します。

レイアウトから削除され、続く要素が詰められて表示されます。

こちらも実際にコードを書いて確認してみましょう。

<p>この要素は通常通り表示されます</p>
<p class="hidden">この要素は表示されません</p>
<p class="not-display">この要素は表示されません</p>
<p>「display:none」の場合、要素は詰めて表示されます</p>

.hidden {
  visibility: hidden;
}
.not-display {
  display: none
}

2行目と3行目が非表示になっていますね。

ただし、1行目と4行目の間には、1行分しか空白がありません。

覚えておくべきvisibilityの特徴

visibilityの基本的な使い方と指定できる値について分かりましたね。

さらに応用として、覚えておいた方が良いvisibilityの特徴を2つ紹介します。

子孫要素がvisibleだった場合

親要素に「visibility:hidden」を指定していても、その子孫の要素にvisibleを指定すれば、子孫の要素は表示されます。

<div class="parent">
  親要素にはhiddenを指定しています
  <div class="child">
    親要素が非表示（hidden）であっても、子孫要素がvisibleに設定されていれば表示されます
    <div class="grandchild">
      孫要素にvisibleを指定すると、この要素のみ表示されます
    </div>
  </div>
</div>

上記コードの親要素をhiddenで非表示にし、子要素にvisibleを指定します。

.parent {
  visibility: hidden;
}
.child {
  visibility: visible;
}

親要素の文章は非表示になり、その下の子要素と孫要素の文章が表示されましたね。

CSSセレクタをchildからgrandchildにすると、孫要素の文章のみになります。

色々と試してみてくださいね。

アニメーション可能なプロパティ

visibilityはCSSアニメーションに対応しているプロパティです。

CSSアニメーションには、transitionプロパティを使う方法とキーフレームを使う方法があります。

原則アニメーションに対応するプロパティは数値変化するもののみです。

例えば、横幅のwidthプロパティを変化させたい場合にも、数値変化には対応できますが、「10px ~ auto」というような変化には利用できません。

visibilityは、この原則とは異なり、数値変化しないもののアニメーションに対応しているプロパティなのです。

表示・非表示のアニメーションには、先ほどのopacityを使うことが一般的ですが、表示されていないときにもフォーカスを合わせることができてしまう、スクリーンリーダーがコンテンツを読み上げてしまうなど、気になる点があります。

この2つを組み合わせると、非表示のときには要素が無いものとして扱うことができるようになります。

実際にコードを書いてみます。

<input type="checkbox" id="check"><label for="check">チェックする</label>
<a href="#" class="sample">CLICK</a>

.sample {
  display: block;
  width: 150px;
  height: 30px;
  background: #ff7f50;
  border-radius: 7px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}
input:checked ~ .sample {
  visibility: visible;
  opacity: 1;
}

チェックボックスを作り、チェックを入れた時にリンクのボタンが現れるように実装しました。

リンクボタンが非表示のときには、フォーカスが当たらずカーソルの表示が変わることもありません。

表示されたときに、リンクボタンとして機能するようになりますね。

display:noneを使った方法では、一瞬で表示されてしまうため、このような動作はできません。

また、上記コードのvisibility部分を削除した場合も試してみてください。

完全に透明のときにも、リンクボタンは存在しているため、マウスホバーするとカーソルの表示が変わることが確認できます。

JavaScriptを使った表示・非表示の切り替え

JavaScriptを使えば、ボタンクリックなどのユーザーの操作で、要素の表示・非表示を切り替えることができるようになります。

前述のように、input要素やマウスホバーを使って設定する場合でも似たような動作は可能ですが、JavaScriptを使えば、さらに複雑な設定が可能です。

ここでは、実戦で使えるサンプルコードをいくつか紹介します。

ボタンクリックで表示・非表示を切り替える

visibilityを使って、ボタンクリックで要素の表示・非表示を切り替えるサンプルを作成します。

ここでは、button要素を使います。

button要素はinput要素で作るボタンよりもデザインのしやすさなどの利点があります。

<div id="example">この要素の表示・非表示を切り替えます</div>
<button type="button" class="button" onclick="clickBtn()">表示/非表示</button>

.button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #008b8b;
  color: #fff;
  padding: 5px 15px;
}
#example {
  width: 200px;
  padding: 5px 15px;
  border: solid 2px #ccc;
  border-radius: 5px;
}

CSSは分かりやすいように見栄えを指定しています。

ここにJavaScriptを実装します。別ファイルで作成するか、scliptタグを用いて、HTMLに直接書き込んでください。

document.getElementById("example").style.visibility ="hidden";
function clickBtn(){
    const example = document.getElementById("example");
    if(example.style.visibility=="visible"){
        example.style.visibility ="hidden";
    }else{
        example.style.visibility ="visible";
    }
}

1行目の「document.getElementById」でID値が「example」の要素を取得し、スタイルのvisibilityにhiddenを指定しています。

HTMLのbutton要素にはonclick属性を指定し、クリックすることでイベントが発生するようにしています。

function clickBtn(){ ~ }の中身が実行されるイベント内容です。

クリックした際に、要素のvisibilityがvisibleの場合はhiddenに、それ以外ではvisibleになるように設定しています。

この実装により、ボタンをクリックするたびに表示・非表示が切り替わります。

クリックで開くアコーディオン

クリックで開くアコーディオンを作成します。

開いたアコーディオンには3つの項目があり、それぞれ別々にアニメーションします。

<button>クリックで開く</button>
<div id="mymenu" class="show">
<ul>
  <li>
    <p>アコーディオンを作成します</p>
  </li>
  <li>
    <p>3つの項目に分かれています</p>
    <p>高さが異なる場合にも対応します</p>
  </li>
  <li>
    <p>最後の項目です</p>
  </li>
</ul>
</div>

button {
  appearance: none;
  border: 0;
}
button {
  display: block;
  width: 280px;
  height: 50px;
  cursor: pointer;
  background: #3eb370;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
}
ul {
  padding:0;
  margin:0;
  list-style-type: none;
}
li,p {
  margin:0;
}
ul > li {
  width: 280px;
  border: 0;
  padding: 0;
  background-color: #eee;
  text-align: center;
  transition: 0.3s;
}
ul.open > li {
  padding: 13px 0;
  border-top: solid 1px #fff;
}
ul > li > p {
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
ul.open > li > p {
  line-height: 1.5;
  opacity: 1;
  visibility: visible;
}

JavaScriptは以下のように記述します。

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('ul').classList.toggle('open');    
});

先ほどの例とは異なり、CSSにvisibility:hiddenを指定しています。

閉じている場合と開いている場合の要素のスタイルを指定しておき、クリックしたときにアニメーションが実行されるようにします。

document.querySelectorは、一致するCSSセレクタの要素を取得します。

classList.toggleは、クラス名を切り替えるメソッドです。

上記コードでは、button要素がクリックされたときに、ul要素のクラス名が「open」に切り替わりますね。

クリックした要素が消える

番号がついた要素を複数作成し、要素をクリックすると消えるようなサンプルを作成します。

<div class="sample">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

.sample {
  display: flex;
  border-radius: 5px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #4169e1;
  border-radius: 50%;
  color: #fff;
  line-height: 50px;
  text-align: center;
}

JavaScriptは以下のように記述します。

const item = document.getElementsByClassName('item');
for (let i = 0; i < item.length; i++) {
    item[i].addEventListener('click', () => {
        item[i].style.visibility ="hidden";
    }, false);
}

1行目の「document.getElementsByClassName(‘item’)」では、クラス名が「item」の要素をすべて取得します。

取得した要素は、item[2]というように番号を指定して取り出すことができます。

addEventListenerは、イベント処理を指定できるメソッドです。

要素.addEventListener( ‘イベントの種類’, 関数, false )

上記のようにイベントの種類を決め、それが行われたときにどのような処理を行うのか関数を指定します。

サンプルコードではクリック時の処理を指定していますね。クリックしたときにvisibilityがhiddenになるように実装しています。

for文を用いることで、すべてのitemに対してこのイベント処理を定義しています。

スクロールでフェードイン

ページのスクロールで途中からふわっと現れる処理を作成します。

<p>スクロールすると、要素がフェードインします</p>
<div id="fadein"></div>

#fadein {
  width: 300px;
  height: 300px;
  margin: 100vh auto;
  background: #7fffd4;
  transform: translateX(50px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
#fadein.active {
  transform: translateX(0px);
  opacity: 1;
  visibility: visible;
}

JavaScriptは以下のように記述します。

var elem = document.getElementById('fadein');
window.addEventListener('scroll', () => {
    const scroll = window.pageYOffset || document.documentElement.scrollTop;
    const rect = elem.getBoundingClientRect().top;    
    const offset = rect + scroll;
if (scroll > offset - window.innerHeight + 200) {
     elem.classList.add('active');
    }
});

window.addEventListenerを使って、スクロールした際のイベント処理を定義しています。

window.pageYOffsetは垂直方向のスクロール距離を取得します。

対応していないブラウザ向けにdocument.documentElement.scrollTopも記述しておくと、値が得られた方を使います。

getBoundingClientRectは、ビューポート（表示画面）の左上からの要素の位置を取得するメソッドです。

elem.getBoundingClientRect().topとすることで、elemの上端の位置を返します。

window.innerHeightは、画面の高さです。

要素が200pxほど見える高さになったときに、フェードインして登場するように設定しています。

まとめ：CSSのvisibilityを使っていこう

今回は、CSSプロパティのvisibilityについて、基本的なことからJavaScriptを使って切り替える方法などの応用まで、詳細に解説してきました。

似た動作をするプロパティとの違いについても紹介しましたね。

普段はあまり使わないかもしれませんが、ここぞというときに力を発揮するプロパティなので、ぜひ活用してみてください。

今回の記事が参考になれば幸いです。