CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

CSSのvisibility（可視性）プロパティは、ドキュメント内で要素を表示するかどうかを指定するために使用されます。要素自体はレンダリングされますが、visibilityがhiddenに設定されている場合は画面上には表示されません。

なお、visibilityと似た役割を持つdisplay: noneとの大きな違いは、hiddenを指定しても要素の占めるスペースは保持されるという点です。レイアウトを崩さずに要素だけを一時的に隠したい場合に非常に便利です。

visibilityプロパティで使える値

要素の可視性を制御するために指定できる主な値は以下のとおりです。

番号	値と説明
1	visible デフォルト値です。要素とその子要素がすべて表示されます。
2	hidden 要素とその子要素が非表示になります。ただし、要素は引き続きレンダリングされ、ページ上では適切なスペースが確保されたままになります。
3	collapse 表の行（<tr>）、行グループ（<tbody>）、列（<col>）、列グループ（<colgroup>）に対してのみ使用できる値です。行や列を削除したかのように非表示にし、その分のスペースは他のコンテンツに利用されます。表以外の要素に適用した場合は「hidden」と同じ挙動になります。
4	initial 要素の可視性をデフォルト値（visible）に戻します。
5	inherit 親要素からvisibilityプロパティの値を継承することを指定します。

サンプルコード1：collapseで表の行を非表示にする

まずは、CSSのvisibilityプロパティでcollapseを使った例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
    width:70%;
    margin: 0 auto;
    text-align: center;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid black;
}
thead {
    background-color: goldenrod;
}
tbody{
    background-color: khaki;
}
tr:nth-of-type(3){
    visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

出力結果

このコードを実行すると、以下のような結果が得られます。

collapseを適用していない場合：3行目まですべて表示されます。

CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

collapseを適用した場合：3行目（Xersusの行）が非表示になり、そのスペースも詰められます。

CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

サンプルコード2：hiddenでボタンクリック時に要素を隠す

次に、JavaScriptと組み合わせてhiddenを使う例を見てみましょう。ボタンをクリックすると、特定の色付きブロックが非表示になります。

<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    display: inline-block;
    height: 40px;
    width: 40px;
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
    for(var i=0; i<3; i++)
    primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>

出力結果

このコードを実行すると、以下のような結果が得られます。

「Hide Primary Colors」ボタンをクリックする前：6つの色付きブロックがすべて表示されています。

CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

「Hide Primary Colors」ボタンをクリックした後：primaryクラスを持つ3つのブロックが非表示になります。ただし、スペースは保持されるため、レイアウトは崩れません。

CSSのvisibilityプロパティで要素の表示・非表示を制御する方法

まとめ

CSSのvisibilityプロパティを使えば、要素をレイアウトを崩すことなく表示・非表示を切り替えることができます。特にhiddenはスペースを保持したまま要素を隠せるため、アニメーションやインタラクティブなUIの実装にも活用できます。また、表の行や列をきれいに消したい場合はcollapseが便利です。用途に応じて使い分けてみてください。

CSSの静的ポジショニング（position: static）とは？基本と実例をわかりやすく解説

【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説
CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタセレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方
CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説
CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。隣接兄弟結合子（+）とは隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは一方、2つ