Web制作に必須！ CSSのdisplayプロパティを語る！

2020年10月9日2020年11月7日

Webサイト作りに欠かせない、displayプロパティについて解説します😀

それでは早速見ていきましょう！

ブロックボックスとインラインボックス

displayプロパティを理解するには、ブロックボックスとインラインボックスという概念を知っておく必要があります。

HTMLの要素は、Webブラウザ上では1つの長方形をした領域として表示されます。これをボックスと言います。

ブロックボックス

ブロックボックスは「かたまりの箱」を意味する通り、段落やセクションを構成する一塊の領域として表示されます。

ブロックボックスとなる代表的な要素では、body、header、footer、div、h1~h6、p、nav、sectionなどがあります。

これらは記述した順に要素ごとに改行され、上から下へと縦の方向に配置されます。

ブロックボックスは高さや幅を指定でき、幅の指定がない時は親要素内にぴったり収まる形になります。

インラインボックス

インライン(in line)とは「行の中」を意味する通り、文字列、つまり行に対応するボックスです。

こちらは文字列と同じように、親要素の中を水平方向に配置されます。

代表的な要素では、a、spanなどがインラインボックスです。

インラインボックスはブロックボックスと異なり、高さや幅の指定が出来ません。

ただし、img、video、inputなど「置換要素」と呼ばれる一部のインラインボックスでは、幅や高さを指定することが可能です。

　ブロックボックス、インラインボックスそれぞれの働きが分かったところで、よく使うdisplayプロパティを見ていきましょう。

絶対に知っておきたいプロパティ5つ

これから、Web制作でよく使うdisplayプロパティを紹介します。

特にこの5つは頻出で、逆にいうとこの5つが使いこなせるとかなり作業が捗るので、頑張って見ていきましょう！

ではそれぞれの特徴を見ていきましょう。

インラインボックス { display: inline; }

span要素のdisplayプロパティの初期値

{ display: inline; }と指定すると、要素はインラインボックスを生成します。これは、span要素のdisplayプロパティの初期値です。何となく、「行にはspanを使う〜」と感覚的に使っている方もいるかもしれませんが、こんな理由があるのです。

display: inline;を適応した要素の長さが親要素を超える場合、要素は分割されて次の行にまたがります。上の図では、赤い要素が途中で切れて次の行に続いていますね。

ブロックボックス { display: block; }

要素ごとに改行され、縦並びになる

{ display: block; }と指定すると、要素はブロックボックスを生成します。

ブロックボックスは、親要素の領域内に上→下と縦に並んで配置されます。幅は指定しない限り100%、つまり親要素の横幅いっぱいに広がった状態です。

ブロックボックスは要素ごとに改行するので、インラインボックスのように途中で切れることもなければ、横並びすることもありません。

インライン-ブロックボックス { display: inline-block; }

分割されないインラインレベルボックス

{ display: inline-block; }と指定すると、インライン-ブロックボックスになります。この場合では、分割されないインラインレベルのボックスを生成します。

これはinlineとblockの良い所取りです。

どういうことかというと、インラインボックスのように横並び出来て、ブロックボックスのように幅や高さを指定することが出来ます。

具体的な見え方は上の図を見ていただけると分かりますが、display: inline-block;を指定した要素の幅が親要素内に収まりきる場合、要素は横並びになりますが、収まらない場合は分割されることなく、次の行に改行されます。

あとちょっとなので頑張っていきましょう、笑

フレックスボックス { display: flex; }

display: flex;を使うと、ブロックレベルの要素を横並びにすることが可能です。

比較的新しい（CSS3から追加された）ものですが、最近はこちらも使われることが多くなってきました。

display: flex;と他のプロパティを組み合わせることで、様々な並べ方が可能です。

下の例もフレックスボックスを使って作ったものです。

より詳しく知りたい方は以下の記事もお読みください。

display: flex;はこれで完璧！justify-contentとalign-itemsの使い方を徹底解説！

非表示 { display: none; }

上の4つほど頻出ではありませんが、こちらも紹介します。

{ display: none; }を適応させると、要素が非表示になります。

これはアニメーションで要素の表示・非表示を切り替えたりするときに使います。

参考：その他、時々使うdisplayプロパティの一覧

最後に、上の5つほど頻出ではないけど時々出てくるdisplayプロパティたちを紹介します。

基本的には「Web上での要素の見え方(gridやtableなど)」でプロパティ名が決まり、頭に「inline-」が付くとインラインレベルになると覚えておけば分かりやすいです。

よかったら応援お願いします!