CSSのdisplayプロパティの仕組みを図表を使って詳細に解説
displayプロパティは使っていないWebサイトはほぼ存在しないほど、多用されています。
そのわりに、イメージがわきにくいプロパティです。
displayプロパティの仕組みを図表を使って直感的にわかるように説明しているので、一度チェックしてみてください。
displayプロパティの仕組み
displayプロパティは、block要素やinline要素を変更したい場合などに使われます。
そのため、displayプロパティを理解するためには、まずはHTMLのblock要素とinline要素を理解することが大切です。
block要素
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素です。名前の通り、一つのブロック（かたまり）として認識されます。 そのため、前後に改行が入ります。
ブロックレベル要素で代表的なものには、以下のものがあります。
<div>、<fieldset>、<form>、<h1>-<h6>、<ol>、<ul>、<p>、<pre>、<table>、
<dl>、<address>、<blockquote>、<center>、
<hr>、<noframes>、<noscript>
inline要素
インライン要素は、ブロックレベル要素の内容として用いられる要素です。文章の一部として使われることが多いため、前後に改行が入りません。
代表的なインライン要素には、以下のものがあります。
<a>、<span>、<i>、<img>、<input>、<select>、<strong>、<b>、
<abbr>、<acronym>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<kbd>、<label>、<q>、<s>、<samp>、<small>、<strike>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
block要素とinline要素が明確になったところで、displayプロパティで指定できる値を確認していきましょう。
displayプロパティで指定できる値
displayプロパティで指定できる値は、次の通りです。
- block
- inline
- inline-block
- none
noneという値は、一時的に表示したくない場合に、display: none;を指定します。
次に、block要素とinline要素は何が違うのかをみていきましょう。 block要素とinline要素の違い block要素とinline要素の違いは、以下の通りです。
- blockは下に要素が追加されていく
- inlineは横に要素が追加されていく
- blockはデフォルトでwidthは親要素の幅、heightはコンテンツの高さになる。
- inlineはコンテンツの幅になる
- blockはwidthやheightを設定できる
- inlineは無効になる
- 別途inline-blockを指定してあげると、widthやheightを指定できるようになる
- inline-blockは横に要素が追加されていくけど、サイズの操作ができる。中間の存在