CSSのdisplayプロパティ【現役エンジニアが解説】

PROGRAM

今回は、CSSのdisplayプロパティについて、blockとinlineに分け、簡単に解説していきます。

block

displayプロパティの値をblockにするとブロック要素になります。

ブロック要素とは、まとまった一つの領域で、隣に要素が来なくなります。

span.block{display:block;} /* ブロック要素 */

上記のコードでは、blockというクラスを持つspan要素をブロック要素に設定しています。

inline

displayプロパティの値をinlineにするとインライン要素になります。

インライン要素とは、文字等を区切るための要素で、隣に要素を並べることができます。

div.inline{display:inline;} /* インライン要素 */

上記のコードでは、inlineというクラスを持つdiv要素をインライン要素にして単なる区切りにしています。

その他の値

displayプロパティをinline-blockとすると隣に並べられるブロック要素が作れます。

また、flexにすると配置が容易となるFlexboxを使え、noneとすると要素を非表示にすることもできます。

div.inline-block{display:inline-block;} /* インラインブロック */
div.flex{display:flex;} /* Flexbox */
div.none{display:none} /* 非表示 */

上記のコードでは、div要素のdisplayプロパティについて、inline-blockのクラスであればinline-blockに、flexをflexに、noneをnoneにしています。