今回はdisplayというプロパティを紹介します。
これを理解すると、デザインの自由度が跳ね上がります!
是非覚えていきましょう。

displayとは？

displayとは、CSSのプロパティの1つです。
要素の表示形式を指定するときに使います。

指定できる値

「block」「inline」「inline-block」「none」などがあります。
指定できる値は他にもいくつかあるのですがまずはこの4種類を覚えましょう。

block

div、p、ul、h1～h6、セクションタグなどの初期値です。
inlineなどをblockにしたい場合には、「display:block;」と指定します。

See the Pen zaKLYN by kiharaneko (@kiharaneko) on CodePen.

自動で改行される

blockの要素の前後には改行が入り、要素は縦に並んでいきます。

幅と高さを指定できる

widthやheightを使い幅や高さを指定できます。

余白を上下左右に指定できる

marginやpaddingを使って余白を上下左右に指定できます。

inline

a、span、imgなどの初期値です。
主にテキストの装飾などに使います。
blockなどをinlineにしたい場合には、「display:inline;」と指定します。

See the Pen PaGdBp by kiharaneko (@kiharaneko) on CodePen.

自動で改行されない

inline要素の間には改行が入らず、要素は横に並んでいきます。

幅と高さを指定できない

widthやheightを使い幅や高さを指定できません。
inline要素の幅と高さは「要素の中身」に応じて自動で決まります。

余白は上下に指定できない

marginやpaddingを使って左右には指定することができますが、
上下には指定することができません。

paddingに関しては指定することは出来るには出来るのですが、
複数行になると上下重なってしまうのでおすすめはしません。

inline-block

inline-blockは、inlineとblockの中間のような要素です。
要素は横並びですが、block要素のように幅や余白を指定できます。
見た目はinline。中身はblockというコナン君みたいな要素です。

主に幅や高さを指定して使いたいけど、横に並べたいときなどに使います。
「display:inline-block;」と指定することで適用されます。

See the Pen qKaJYR by kiharaneko (@kiharaneko) on CodePen.

自動で改行されない

inline要素の間には改行が入らず、要素は横に並んでいきます。

幅と高さを指定できる

widthやheightを使い幅や高さを指定できます。

余白を上下左右に指定できる

marginやpaddingを使って余白を上下左右に指定できます。

none

noneを指定すると指定した要素が画面から消滅して消え去ります。
ただし、非表示になるだけなので、ブラウザを読み込むときにはと読み込まれます。
読み込み時間が早くなるわけではありませんのでご注意。

「display:none;」と指定することで適用されます。

See the Pen PaGyyB by kiharaneko (@kiharaneko) on CodePen.