HTMLリファレンス

display







display


画面にどのように表示されるかを設定する。
主に、JavaScriptで値を設定して、表示、非表示を動的に切り替えるのに使用します。
非表示にした場合、visibilityと違い表示領域ごとなくなる。

書式
display:値
値には
blockブロック要素
inlineインライン要素
none表示しない
inline-blockインラインブロック
inline-tableインラインテーブル
list-itemリスト要素
を指定。

block,inlineは通常表示で、
noneだと非表示になり、領域も確保されなくなる。

inline-block,inline-tableは、バージョン3未満のFirefoxが対応していないので注意。
他の主要ブラウザでは多少バージョンが古くても対応しているので、
バージョン3未満のFirefoxのみならほとんどの場合無視してもいいと思う。

inline-blockは、インラインに表示するブロック要素となり、
横幅や高さが確保されるインライン要素が作れる。
IEではブロック要素に指定しても有効にならない。
<span>などのインライン要素に指定してインラインブロックにする。

inline-tableは、<table>に使う。
<table>は通常ブロック要素として表示されるが、インライン表示になる。

inline-block,inline-tableは、Firefoxではインライン要素の上端で位置揃えされるが、
IEでは下端で位置揃えされる。
ブロック要素で高さを確保する場合、ずれないようにするには、同時にvertical-align:top;やbottomを指定した方がいい。

list-itemは通常のリスト要素と思うが、よくわからんし、使い道もわからない。






[編集] [新規] [削除] [バックアップ] [アップロード] [ログイン] [管理]
whwiki 1.3