visibility:要素の領域を残したまま表示・非表示を切り替える

初期値 visible
適用対象 全ての要素
継承 する
アニメーション visibility
対応ブラウザ caniuseで確認

visibilityプロパティの説明

visibilityは、要素の領域を残したまま表示・非表示を切り替えます。この機能は、displaynoneを指定した時とは違い、その要素が表示されていた場合のレイアウトを維持します。

visibilityは、<table>の行や列を隠すこともできます。特定のセルが空の時に非表示にしたい場合は、empty-cellsプロパティの活用も検討して下さい。

単純に要素を不可視にするだけであれば、不透明度を操作するopacityでも実現できますが、visibilityはアクセシビリティツリーから除去されるため、スクリーンリーダに読み上げられたり、タブフォーカスが当たるということも無くなります。

visibilityに指定できる値

visible
要素は可視状態です。これが初期です。
hidden
要素は不可視状態になります。ボックスは画面に表示されませんが、レイアウトは維持されます。そこに含まれる子要素やテキストなども非表示になります。ただし、子要素のvisibilityvisibleに設定されていれば、その部分だけ表示されます。
collapse
この値を表の行、列、列グループ、行グループに指定した場合は、行や列が不可視となり、その領域も除去されます。ただし、他の行や列の寸法は不可視化された行や列のセルが存在する時と同様に計算されます。フレックス・アイテムの場合は、指定されたアイテムが不可視となり、その領域も除去されます。それ以外の要素では、hiddenと同じ挙動です。

transitionの使い方とサンプル

transitionプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* グローバル値 */
visibility: inherit;
visibility: initial;
visibility: unset;

visibilityの実例

それでは実際にvisibilityプロパティの書き方を見ていきましょう。以下の例は、3つの段落を並べた状態で、真ん中の要素に対してvisibilityを指定した場合の比較です。それぞれ値を変更した時、どのように表示されるのかを確認できます。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
	padding: 0 .5rem;
	border: 1px solid #999;
}
.vis_1 {
	visibility: visible;
}
.vis_2 {
	visibility: hidden;
}
.vis_3 {
	visibility: collapse;
}
HTML
<div class="samp_box">
	<section>
		<h1>visibility: visible;</h1>
		<p>Text text text text text.</p>
		<p class="vis_1">Text text text text text.</p>
		<p>Text text text text text.</p>
	</section>
	<section>
		<h1>visibility: hidden;</h1>
		<p>Text text text text text.</p>
		<p class="vis_2">Text text text text text.</p>
		<p>Text text text text text.</p>
	</section>
	<section>
		<h1>visibility: collapse;</h1>
		<p>Text text text text text.</p>
		<p class="vis_3">Text text text text text.</p>
		<p>Text text text text text.</p>
	</section>
</div>

visibilityを表に使用する場合

visibilityは表の中で特定の行や列を非表示にする場合に役立ちます。特にcollapseの値は、セルの寸法を維持したまま行や列を不可視状態にできるため、完全に要素を除去してしまうdisplaynoneとは違う効果が得られます。

以下の例では、2列目の行に対するスタイルを変えて、表がどのように表示されるのかを確認できます。コンテンツが不可視になった時に、寸法が変わる部分と変わらない部分を比較してみて下さい。

表示確認
CSS
table.samp_table {
	margin-top: 1rem;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #fff;
	font-size: 0.875rem;
}
table th,
table td {
	padding: .5rem 1rem;
	border: 1px solid #000;
	text-align: center;
}
table th {
	background-color: #eee;
}
table th[scope="row"] {
	padding: .5rem 1rem;
}
#radiolist > label {
	display: block;
	width: 100%;
	padding: .5rem;
	border-bottom: 1px solid #999;
	cursor: pointer;
}
input[type="radio"] {
	margin: 0 .5rem;
	vertical-align: text-bottom;
}
HTML
<div id="radiolist">
	<label>
		<input type="radio" name="s" checked>
		visibility: visible;
	</label>
	<label>
		<input type="radio" name="s">
		visibility: hidden;
	</label>
	<label>
		<input type="radio" name="s">
		visibility: collapse;
	</label>
	<label>
		<input type="radio" name="s">
		display: none;
	</label>
</div>

<table class="samp_table">
	<tr>
		<th> </th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	<tr>
		<th scope="row">1</th>
		<td>TD</td>
		<td>TD</td>
		<td>TD</td>
	</tr>
	<tr id="target">
		<th scope="row">2</th>
		<td>Target</td>
		<td>Cell</td>
		<td>Groupe</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>TD</td>
		<td>TD</td>
		<td>TD</td>
	</tr>
</table>

<script>
const targetCol = document.getElementById('target');
const changeHandler = function () {
	targetCol.style.cssText = this.parentNode.textContent.trim();
};
Array.prototype.forEach.call(document.querySelectorAll('#radiolist input[type="radio"]'), function (radio) {
	radio.addEventListener('change', changeHandler);
});
</script>

visibilityに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する