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

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

ruby関連

ruby関連の値(ruby〜ruby-text-group)はルビ(振り仮名)を構成するために用意されたものだ。ルビ関連については、本連載の中で機会を改めて詳しく紹介したい。

none

 display:noneと指定するとボックスは生成されない。そのため、マークアップした部分を画面に表示したくないときに利用することができる。たとえば、次のソースでは「こんにちは」と「こんばんは」を表示しないように設定している。

Firefoxでの表示。SafariやOpera、Internet Explorerでも同じように表示される。 Firefoxでの表示。SafariやOpera、Internet Explorerでも同じように表示される。
.none{
display: none;
}
おはよう
こんにちは
こんばんは
おやすみ
ブラウザで表示を確認する

inherit

 標準では、displayプロパティの値は親要素から子要素には継承されない。しかし、子要素に「display:inherit」と指定すれば、親要素のdisplayの設定を継承することができる。

 次のソースでは、親要素である

にdisplay:inline、子要素である
にdisplay:inheritと指定している。すると、「おはよう」と「こんにちは」には親要素の設定が継承され、インラインボックスとして表示される。一方、
でマークアップした「さようなら」には設定が継承されず、ブロックボックスで表示される。

 なお、inheritの値はCSS 3からは削除されている。

Firefoxでの表示。SafariやOpera、Internet Explorer 8でも同じように表示される。 Firefoxでの表示。SafariやOpera、Internet Explorer 8でも同じように表示される。
.parent{
display: inline;
}

.child01, .child02{
display: inherit;
}
おはよう
こんにちは
さようなら
ブラウザで表示を確認する
  • コメント(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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]