visibility
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
visibility
は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは <table>
の行や列を隠すこともできます。
試してみましょう
要素を不可視にしてレイアウトから除去するには、 visibility
を使用する代わりに display
プロパティを none
に設定してください。
構文
/* キーワード値 */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* グローバル値 */
visibility: inherit;
visibility: initial;
visibility: unset;
visibility
プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
値
visible
-
要素のボックスが可視になります。
-
要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は
visibility
がvisible
に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。 collapse
-
<table>
の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に
が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。display
: none- フレックス項目では、不可視になり、占めていた領域は削除されます。
- XUL 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。
- その他の要素では、
collapse
はhidden
と同じと扱われます。
アクセシビリティの考慮
要素の visibility
の値に hidden
を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。
補間
visibility の値は可視及び不可視の間で補間可能です。従って、開始または終了の値の一つが visible
でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の 0
と 1
間の値が、 visible
に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する cubic-bezier()
関数の結果として) はより近い終了点に対応します。
注
- 現在の一部のブラウザーでは、
visibility:collapse
の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤ってvisibility:hidden
のように扱われることがあります。 visibility:collapse
を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表でvisibility:visible
が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。
公式定義
初期値 | visible |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | visibility |
形式文法
例
基本的な例
HTML
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
The third paragraph is visible. Notice the second paragraph is still occupying
space.
</p>
CSS
.visible {
visibility: visible;
}
.not-visible {
visibility: hidden;
}
表の例
HTML
<table>
<tr>
<td>1.1</td>
<td class="collapse">1.2</td>
<td>1.3</td>
</tr>
<tr class="collapse">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
CSS
.collapse {
visibility: collapse;
}
table {
border: 1px solid red;
}
td {
border: 1px solid gray;
}
仕様書
Specification |
---|
CSS Display Module Level 3 # visibility |
ブラウザーの互換性
BCD tables only load in the browser