displayプロパティとは

displayプロパティはCSSを使うにあたってとても重要なプロパティの一つです。

displayプロパティは主にWEBで表示されるコンテンツ（文章や写真、または全てのエリア）をひとまとめにして、レイアウト（配置）をどうしたいのかを決めてくれます。

displayプロパティの値

block

横幅いっぱいに配置する

inline

行の中をレイアウトする

※例えば文章の中の一部だけの色を変えたい時

none

非表示にする

flex

縦幅いっぱいに配置する（デフォルト）

※blockと違いコンテンツを横に並べたい時などに使う

displayプロパティの例

例えばWEBで文章を作ったとして、その文章の範囲が横幅いっぱいに置きたいのかそれとも写真の横に並べたいのかでプロパティ値が変わっていきます。

前者で作る場合はblock値で後者の場合はflex値に当たります。また、スマホやタブレットくらいの横幅になったらこのコンテンツを非表示にしたい場合はnone値になります。