CSS の visibility プロパティは、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは <table> の行や列を隠すこともできます。

要素を不可視にしてレイアウトから除去するには、 visibility を使用する代わりに display プロパティを none に設定してください。

構文

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

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

visibility プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

visible
要素のボックスが可視になります。
hidden
要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibilityvisible に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。
collapse
  • <table> の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に display: none が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。
  • フレックス項目では、不可視になり、占めていた領域は削除されます。
  • XUL 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。
  • その他の要素では、 collapsehidden と同じと扱われます。

形式文法

visible | hidden | collapse

補間

visibility の値は可視及び不可視の間で補間可能です。従って、開始または終了の値の一つが visible でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の 01 間の値が、 visible に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する cubic-bezier() 関数の結果として) はより近い終了点に対応します。

基本的な例

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

アクセシビリティの考慮事項

要素の visibility の値に hidden を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

メモ

  • 現在の一部のブラウザーでは、 visibility:collapse の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤って visibility:hidden のように扱われることがあります。
  • visibility:collapse を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で visibility:visible が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。

仕様書

仕様書 状態 備考
CSS Flexible Box Layout Module
visibility の定義
勧告候補 フレックスアイテムに適用する collapse の値を定義。
CSS Basic Box Model
visibility の定義
草案 変更なし。
CSS Transitions
visibility の定義
草案 visibility をアニメーション可能として定義。
CSS Level 2 (Revision 1)
visibility の定義
勧告 初回定義

初期値visible
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類visibility
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4
補足
完全対応 4
補足
補足 Internet Explorer doesn't support visibility: initial.
補足 Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
collapseChrome 完全対応 62
補足
完全対応 62
補足
補足 Chrome treats visibility: collapse like hidden, leaving a white gap.
補足 Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE 完全対応 ありOpera 完全対応 あり
補足
完全対応 あり
補足
補足 In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari 完全対応 あり
補足
完全対応 あり
補足
補足 Safari treats visibility: collapse like hidden, leaving a white gap.
補足 Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android 未対応 なしChrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 Chrome treats visibility: collapse like hidden, leaving a white gap.
補足 Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Safari treats visibility: collapse like hidden, leaving a white gap.
補足 Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。