mozilla
Your Search Results

    display

    概要

    display CSS プロパティは要素のレンダリングに使用されるボックスの種類を指定します。 HTML では、 display プロパティのデフォルト値は、HTML 仕様に記述されたふるまいか、ブラウザ/ユーザのデフォルトのスタイルシートに記述されたふるまいから採られます。 XML でのデフォルト値は inline です。

    様々なディスプレイボックスタイプに加えて、値 none を使用すると、要素を非表示にできます。none は、すべての子孫要素も非表示にします。文書は、要素が文書木に存在しないかのようにレンダリングされます。

    • 初期値 inline
    • 適用対象 全要素
    • 継承 継承しない
    • メディア all
    • 計算値 as the specified value, except for positioned and floating elements and for the root element. In both case the computed value may be another keyword than the one specified.
    • アニメーションの可否 不可
    • 正規順序 形式文法で定義される一意のあいまいでない順序

    構文

    display: display-value            or                           E.g. display: inline;
    display: inherit
    

    display-value

    要素に適用するレンダリングタイプを定義するキーワードです。取り得る値とその意味は以下のとおりです。
    値集合 説明
    Basic values (CSS 1) none

    要素の表示を非表示にします(レイアウトに影響しないようになります)。すべての子孫要素も非表示になります。文書は、要素が存在しなかったかのようにレンダリングされます。

    要素ボックスは通常どおりレイアウトを占めさせつつ、内容は見えなくさせたい場合は、  visibility プロパティを参照してください。

    inline 要素は、1つ以上のインライン要素ボックスを生成します。
    block 要素は、ブロック要素ボックスを生成します。
    list-item 要素は、コンテンツのためのブロックボックスを1つと、それとは別のリストマーカ用のインラインボックスを1つ生成します。
    Extended values (CSS 2.1) inline-block 要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては一個のインラインボックスであるかのようにふるまい、一緒に流し込まれるようになります(このふるまいは置換要素とほぼ同じです)
    Table model values (CSS 2.1) inline-table inline-table 値は、HTMLには直接的に対応するものがありません。これは、  <table> 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。テーブルボックスの内部はブロックレベルのコンテキストになります。
    table <table> 要素と同じようにふるまいます。これは、ブロックレベルボックスを定義します。
    table-caption  <caption> 要素と同じようにふるまいます。
    table-cell  <td> 要素と同じようにふるまいます。
    table-column

     <col> 要素と同じようにふるまいます。

    table-column-group  <colgroup> 要素と同じようにふるまいます。
    table-footer-group  <tfoot> 要素と同じようにふるまいます。
    table-header-group  <thead> 要素と同じようにふるまいます。
    table-row <tr> 要素と同じようにふるまいます。
    table-row-group  <tbody> 要素と同じようにふるまいます。
    Flexbox model values (CSS3) flex 要素は、ブロック要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。
    inline-flex 要素は、インライン要素のようにふるまいつつ、そのコンテンツを flexbox モデルに従ってレイアウトします。
    Grid box model values (CSS3) grid

    要素は、ブロック要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。

    これは実験的機能で、ほとんどのブラウザでサポートされていません。特に -moz-grid はこれのプレフィックス付きバージョンではなく、ウェブサイトで使ってはいけない XUL レイアウトモデル 用です。
    inline-grid 要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従って、レイアウトします。
    Experimental values run-in

    要素は、ランインボックスを生成します。このボックスは:

    • ブロックボックスを含んでいる場合は、ブロックボックスと同じになります。
    • ブロックボックスが後続する場合は、ブロックボックスの最初のインラインボックスになります。
    • インラインボックスが後続する場合は、ブロックボックスになります。

    実際の表示を確認

    p.secret  { display: none }
    <p style="display:none"> invisible text </p>
    

    仕様

    仕様書 策定状況 コメント
    CSS Basic Box Model
    The definition of 'display' in that specification.
    草案 run-in の値を追加
    CSS Grid Layout
    The definition of 'display' in that specification.
    草案 grid box の値を追加
    CSS Flexible Box Layout Module
    The definition of 'display' in that specification.
    勧告候補 flexible box モデルの値を追加
    CSS Level 2 (Revision 1)
    The definition of 'display' in that specification.
    勧告 テーブルモデルの値とinline-block の値を追加
    CSS Level 1
    The definition of 'display' in that specification.
    勧告 基本的な値として none, block, inline, list-item

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    none, inline and block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
    inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
    natural なインライン要素のみ
    7.0 1.0 (85)
    list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
    run-in 1.0
    インライン要素より前に置けない
    未サポート 8.0 7.0 1.0 (85)
    インライン要素の前に置けない
    4.0 5.0 (532.5)
    inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
    table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, table-caption 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
    flex 21.0-webkit 18.0 (18.0)(behind a pref) [1] 未サポート 12.50 未サポート
    inline-flex 21.0-webkit 18.0 (18.0)(behind a pref) [1] 未サポート 12.50 未サポート
    grid ? 未サポート 10.0-ms ? ?
    inline-grid ? 未サポート 10.0-ms ? ?
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?

    [1] Firefox は シングルラインのフレックスボックスだけをサポートします。フレックスボックスのサポートを有効化するには、Firefox 18 と 19 では、ユーザーが about:config 環境設定で "layout.css.flexbox.enabled" を true に変更する必要があります。

    関連情報

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

    Contributors to this page: Foomin10, ethertank, mokeke, sosleepy
    最終更新者: mokeke,