CSSのdisplayプロパティ【現役エンジニアが解説】
今回は、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にしています。