このサイトについて

displayは、CSSでレイアウトを作る上で最も重要となるプロパティだ。要素の種類により、displayプロパティのデフォルト値が規定されている。デフォルト値は、blockやinlineが一般的だ。displayがblockの要素は、しばしばブロックレベル要素と呼ばれる。displayがinlineの要素は、単純にインライン要素と呼ばれる。

block

<div>

divは代表的なブロックレベル要素だ。ブロックレベル要素は新しい行に配置される。そして、ブラウザサイズに応じて、可能な限り左右に引き延ばされる。pやformもブロックレベル要素だ。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。

</div>

inline

spanは代表的なインライン要素だ。インライン要素は文章中に、文字列の一部として埋め込むことがきる。 <span> このように </span> 、文章の体裁を崩さない。a要素もインライン要素だ。他のページへのリンクするのに、君はいつもこれを使うだろう？

none

その他、よく使われるものとしてnoneがある。scriptのような特殊な要素は、これがデフォルト値だ。JavaScriptで要素の表示・非表示を切り替えるのに使われたりする。要素を本当に削除したり再生成したりせず、display値を切り替えるのだ。

これは、visibilityとは異なる。ある要素のdisplayをnoneにすると、その要素は存在していないものとして扱われ、画面が構築される。visibility: hidden;は、その要素を非表示にするだけで、要素自体は存在しているとして扱われる。なので、その要素が表示されているときと同様に、表示領域が確保される。

You found me!

他のdisplay値

他にも、魅力的なdisplay値がたくさんある。例えば、list-itemやtableだ。これがその完全なリストだ。inline-blockとflexについては、後半で説明する。

応用

既に言及したように、全ての要素はデフォルトのdisplay値を持っている。だが、君はそれをいつでもoverrideする事ができる! とは言うものの、div要素のdisplayをinlineにすることに、さして意味はないだろう。特別なセマンティクスを持つ要素のdisplayをカスタマイズすると便利だ。例えば、水平メニューを作るのに、li要素をinlineにするなどである。