HTMLで画面レイアウトを組む際、ブロック要素とインライン要素を理解して使い分ける事ができれば格段にレイアウトの表現の幅が広がります。

cssにはdisplayというプロパティがあり、それぞれのHTMLタグの表示方法を変更することができます。

display:値;

として記述し、値には

• inline（インライン要素表示）


• block（ブロック要素表示）


• none（非表示）


• list-item（リスト項目表示）

この中でよく使うのが、blockとnoneになります。

ブロック要素は横幅、縦幅等を指定できるため、クリックできる範囲を広げるといった使い方ができます。
たとえば、<a;>や<label;>をブロック化することで、ユーザビリティの向上を狙うことができます。

noneの非表示は、テキストや項目の表示制御等に使うことができます。
display:noneは、指定された要素を文字通り存在しなかったことにしてしまいます。
その為、要素に指定された横幅、縦幅等も無くしてしまいます。
表示のみ制御し、高さや幅を維持したいときはvisibility:hiddenを使います。

その他、インライン要素化はリストに使用する<li>に指定することで横並びのリストを作ることができます。

CSS2の範囲では上記のような事ができますが、
今後CSS2.1が勧告・採用されるようになればdisplayに指定できる値がさらに増え、
柔軟なレイアウトを組む事も可能になります。