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

visibilityプロパティの説明

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

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

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

visibilityに指定できる値

visible

要素は可視状態です。これが初期です。

hidden

要素は不可視状態になります。ボックスは画面に表示されませんが、レイアウトは維持されます。そこに含まれる子要素やテキストなども非表示になります。ただし、子要素のvisibilityがvisibleに設定されていれば、その部分だけ表示されます。

collapse

この値を表の行、列、列グループ、行グループに指定した場合は、行や列が不可視となり、その領域も除去されます。ただし、他の行や列の寸法は不可視化された行や列のセルが存在する時と同様に計算されます。フレックス・アイテムの場合は、指定されたアイテムが不可視となり、その領域も除去されます。それ以外の要素では、hiddenと同じ挙動です。

transitionの使い方とサンプル

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

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

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

visibilityの実例

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

.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;
}

<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の値は、セルの寸法を維持したまま行や列を不可視状態にできるため、完全に要素を除去してしまうdisplayのnoneとは違う効果が得られます。

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

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;
}

<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>