HTMLとCSSにおけるDisplayプロパティとは何か

HTMLとCSSにおけるレイアウト構築の初歩であるDisplayプロパティを理解していなかった。勉強する機会があったのでメモしておく。
 

Displayプロパティとは

HTML要素の種類により、displayプロパティのデフォルト値が規定されている。デフォルト値は、blockやinlineが一般的である。displayがblockの要素は、ブロックレベル要素と呼ばれる。displayがinlineの要素は、単純にインライン要素と呼ばれる。
 

ブロックレベル要素(display: block)とは

ブロックの形状をしているのでブロックレベル要素と呼ばれる。div、p、h1などのタグが代表的なブロックレベル要素である。ブロックレベル要素の前後には自動的に改行が挿入される。ブロックレベル要素にはWidthとHeightプロパティを指定することが出来る。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。
 

インライン要素(display: inline)とは

インライン(=行に入っている)になっているのでインライン要素と呼ばれる。a、br、spanなどのタグが代表的なインライン要素である。文章中の一部として扱われる要素なので、通常はブロックレベル要素の中で使用される。
 

display: none とは

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

Displayプロパティを変更出来ると何が嬉しいのか

例えば、liタグはブロックレベル要素だが、liタグでウェブサイトのメニューを作る際に横並びにしたいことが結構ある。そういった場合にCSSでdisplay: inlineを指定する。
横並びにしたいならわざわざliタグを使わずに、他のインライン要素でやれば良いと思うかもしれないが、メニューというのは意味的にもリストなので、liタグを使うのが一般的である。
 
 
以上
 
 
参考
<SPAN>-HTMLタグリファレンス
CSS – “display”プロパティ
XHTML/CSS~ブロック要素とインライン要素の一覧表~

Article written by

Comments are closed, but trackbacks and pingbacks are open.