displayプロパティの値と各ブラウザの対応をまとめる

エ・ビスコム・テック・ラボ
2008-05-23 13:27:01
  • このエントリーをはてなブックマークに追加

inline/block/inline-block

 inlineとblock、inline-blockについては、「Firefox 3が対応したdisplayプロパティの値(1)」を参照してほしい。

list-item/marker

 display:list-itemと指定すると、

  • でマークアップした部分のようにリスト項目として表示される。たとえば、
    でマークアップした部分は標準ではブロックボックスとなるが、display:list-itemと指定することでリスト項目として扱われ、行頭にリストマークを表示できるようになる。

     なお、markerボックスはCSS 2においてリストマーク用のボックスとして定義されていたが、CSS 2.1からは削除され、ブラウザも対応していない。

    Firefoxでの表示。SafariやOpera、Internet Explorer 8でも同じように表示される。 Firefoxでの表示。SafariやOpera、Internet Explorer 8でも同じように表示される。
    div{
    display: list-item;
    list-style-type: circle;
    margin-left: 30px;
    }
    
    おはよう
    こんにちは
    こんばんは
    おやすみ
    ブラウザで表示を確認する

     run-inボックスやcompactボックスとして表示した場合、後に続く要素がblockボックスであれば改行を入れずに続けて表示する。このとき、run-inボックスは後に続くblockボックスの中に含まれるのに対して、compactボックスはblockボックスの左マージンに配置される。

     たとえば、次のソースでは「挨拶」という文字を赤い罫線で囲み、上はrun-inボックス、下はcompactボックスとして表示した。後に続くblockボックスは、黄色い背景色で表示している。

     なお、run-inにはOperaとSafariが、compactにはOperaだけが対応している。現在のところ、FirefoxとInternet Explorerは対応していないので注意が必要だ。また、「compact」はCSS2.1では規格から削除されたが、CSS 3では復活している。

    Operaでの表示 Operaでの表示
    dl#runin dt{
    display: run-in;
    border: solid 2px red;
    }
    
    dl#compact dt{
    display: compact;
    border: solid 2px red;
    }
    
    dd{
    margin-left: 100px;
    background-color: yellow;
    }
    
    挨拶
    「おはよう」「こんにちは」「こんばんは」「おやすみ」など。
    挨拶
    「おはよう」「こんにちは」「こんばんは」「おやすみ」など。
    ブラウザで表示を確認する
    • コメント(1件)
    #1 F*   2008-05-24 10:10:12
    CSS3 の inherit の件。すべての property が inherit と initail を受け付けるので、個々のプロパティで inherit を受け付けることを書くのをやめただけでは。http://www.w3.org/TR/2005/WD-css3-cascade-20051215/#inheritance
  • このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
    Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
    [ 閉じる ]