みなさんはdisplayプロパティを理解して使えていますか？
基本的でよく使うプロパティですので、理解を深めてしっかり使えるようになれば、コーディングがグングン進められるようになりますよ。
コンテンツ
ブロックレベル要素とインライン要素の違い
そもそも、みなさんはブロックレベル要素とインライン要素の違いについて、答えることができますか？
displayについて知るには、まずはここからおさらいしていきたいと思います。
この違いについてしっかり覚えることができれば、ほとんど理解したようなものです！
ブロックレベル要素とは
そのタグで括ったときに、次の要素が下段に配置されます。
要素の幅は、画面に対して100%です。
<header><footer><main><nav><section><div><h1>-<h6><p><table><ul><li><figure>などがあります。（他にもたくさんあります。）
インライン要素とは
主にブロックレベル要素の中に配置される要素で、そのタグ括っても基本は同じ行に配置されます。（画面サイズによって改行されることはあります。）
要素の幅は、中に入っているもののサイズに準じます。
代表的なものでは、<a><img><span><input><label>などがあります。
displayプロパティの種類
display:block;
主にインライン要素をblock表示にしたいとき指定します。
または、主な要素の初期値にあたるため、display:none;を指定してある要素を再表示させたい場合にblockで指定することも多いです。
display:inline;
主にブロックレベル要素をinline表示にしたいとき指定します。
display:flex;+flex-wrap:nowrap;の動きと似ていますが、flexは親要素に指定したときの子要素の動きが並列になるのに対して、inlineは子要素自体に指定するというところが異なる点です。
またnowrapでは改行されずに圧縮表示されますが、inlineの場合は親の幅に応じて改行される点も違います。
display:inline-block;
横に並べたいけれど、意図しないところで区切られたくないという場合に、幅に収まらなくなったとき、inline-blockを指定している要素ごと改行されます。
display:flex;+flex-wrap:wrap;の動き方と似ていますが、こちらも、flexは親要素に指定したときの子要素の動きになるのに対して、inlineは子要素自体に指定するというところが異なる点です。
よくあるdisplayプロパティの使い方実例
ここからは、実例を交えて解説します。
「こういう時はどうしたら？」が解決できるかも！
blockを使うのはこんな時！
まずはdisplay:block;を使う場合です。
レスポンシブデザインの表示変更
PCサイズではinlineだったりflexだったりする要素を、スマホサイズでは一個ずつ上から並べたいというときによく使います。
PCサイズでは３カラム表示（flexなどで指定されている）のboxが、スマホで見ると１カラム表示（blockで指定）になっているというような使い方です。
tableのthとtdがスマホで一行ずつ（thの下の段にtdが配置されている）になっている表示なども、この方法が用いられています。
また、spanや疑似要素（:beforeや:after）を改行させたいときに用いられることもあります。
サイトのトップページでお知らせが件数表示されている箇所を見たことはありませんか？
そこでは、日付とタイトルがPCサイズでは並列、スマホでは改行されているという表示方法が取られていることがあるのですが、これもスマホ時にblockを指定して実現していることが多いです。
aタグのクリック領域を満たす
aタグのクリック領域を縦横めいっぱいにしたいとき、aにpaddingを指定して+block指定にする方法があります。
aタグは通常inline要素ですので、自分の文字があるところしかクリック領域になりませんが、display:block;にすることで、縦横がめいっぱいクリックできる領域になります。
この場合paddingでaタグの領域を広げておくことが必要です。
inlineを使うのはこんな時！
inlineは具体的にこういう使い方、という決まった使い方の例があまりないのですが、
基本的な要素は大体ブロックレベル要素ですので、それをinline表示にしたいというときに、臨機応変に使っています。
例えば、liはブロックレベル要素ですが、短い単語がたくさん並んでいるリストでは右側がガラ空きになりますので、inlineを指定してコンパクトにまとめたりします。
（内容によってはinline-blockの方が良いということもあります。）
また、特にヘッダーなど、大事な部分で情報もたくさん掲載したい、という箇所では、要素としては別物なんだけども横に並べて見せたい場合もあります。
そのような時はpタグやdivが多用されているのですがinlineで並列にしたりします。
inline-block
一つの文章内では基本的にpタグを分離させて使ったりしません。
ですが、その中でも「この単語だけは改行させずに表示させたい」という場合には、spanで括ってinline-blockにするという方法があります。
また、グローバルナビゲーションや、ページ上部に設置するメニューボタン、並列のバナーなど、
基本的には横並びが良いけど、狭くなったときにはみ出たり小さくしたりしたくないというデザインでは、現在はflexが主流になりつつありますが、inline-blockが使われることも多いです。
現在はほとんどがflex対応ブラウザだと思いますが、少し前までは未対応のブラウザのために、子要素にinline-blockを指定したりして崩れがないようにしていました。
ですので、ページの修正依頼などで過去の制作物を見る機会のある人は、見かけることも多いかもしれません。
まとめ
いかがでしたか？この記事では、コーディングの基本ともいえるプロパティの一つ、displayの使い方についてご紹介しました。
cssのプロパティはたくさんあるので、どれから覚えたらいいかわからず頭になかなか入ってこないという人、まずはdisplayを覚えると、できるコーディングが格段に増えると思います！
しっかり理解を深めてどんどんできることを増やしていってください。
displayがよくわからなかった、また具体的な使い方なども知りたかったという人の参考に少しでもなりましたら嬉しいです。
