mozilla
Your Search Results

    visibility

    概要

    CSS の visibility プロパティは2つの目的を持ちます:

    1. hidden 値は要素を隠しますが、それが占めていた領域はそのままにします。
    2. collapse 値は表の行か列を隠します。 XUL 要素も折り畳まれます。

    • 初期値visible
    • 適用対象全要素
    • 継承する
    • メディアvisual
    • 計算値指定通り
    • アニメーションの可否可、visibility として可能

    構文

    形式文法:  visible | hidden | collapse
    
    visibility: visible
    visibility: hidden
    visibility: collapse
    
    visibility: inherit
    

    visible
    デフォルト値。ボックスは可視です。
    hidden
    ボックスは不可視です(完全な透明で、何も描かれません)。ただしレイアウトには依然影響します。この要素の子孫要素が visibility:visible であれば不可視になります(これは バージョン 7 までの IE では動作しません)。
    collapse
    表の行、列、列グループ、行グループでは、行や列が隠されます。それらが占めていた領域も隠されます(display: none が表の列/行に用いられたかのように折り畳まれ、見えなくなります)。しかしながら、その他の行と列の大きさの計算は依然として、折り畳まれた行や列が存在するかのように行われます。この設計は、表のどの部分からも、幅や高さの再計算なしに行や列を素早く取り除くためのものです。XUL 要素では、通常その要素の大きさに影響する他のスタイルにかまわず、要素の計算値は常にゼロになりますが、マージンは依然効果を持ちます。他の要素では、collapsehidden と同じように扱われます。

    p        { visibility: hidden; }    /* 段落は不可視です */
    p.showme { visibility: visible; }   /* クラス showme を持つ段落は可視です */
    tr.col   { visibility: collapse; }  /* 表のクラス col を持つ列は折り畳まれます */
    

    いくつかのモダンブラウザでは、 visibility:collapse のサポートがないか、部分的に不正確です。多くの場合正しく扱われず、「表の行や列」以外の要素に visibility:hidden を用いたときのようになるかもしれません。

    visibility:collapse を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で visibility:visible が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。

    仕様書

    仕様書 策定状況 コメント
    CSS Basic Box Model 草案 変更なし。
    CSS Transitions 草案 visibility をアニメーション可能として定義。
    CSS Level 2 (Revision 1) 勧告 初回定義。

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0
    機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 1.0 (1.0) 6.0 6.0 1.0

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, steely0511, sosleepy
    最終更新者: ethertank,
    サイドバーを隠す