コーディング初心者が躓きやすいのがdisplayというCSSのプロパティで、特に『block・inline・inline-block』の違いがよく分からないという人もいると思います。
この記事を読んでいる人の中には、
といった経験はないでしょうか？
それはdisplayの値が原因である可能性があり、displayは必ず使う&頻出するプロパティなのでここでしっかりマスターしておきましょう。
（有料になっていたらすいません🙇♂️）
CSSのプロパティ『display』とは？
displayとは名前からイメージできるかも知れませんが、要素の表示形式を指定するプロパティです。
例えば.boxというclassの要素に対して書く場合は、以下のような書き方をします。
<div class="box"></div>.box {
display: block;
}上記はblockと書いていますが、他にも色々あります。
しかし最初から全部覚える必要はないので、今回は最初に押さえておきたい以下の4つについて解説していきます。
押さえておきたいdisplayの値
- display: block;
- display: inline;
- display: inline-block;
- display: none;
displayの初期値はHTMLタグによって異なる
displayの初期値はHTMLタグによって異なりますが、大抵はblockかinlineのどちらかになります。
代表的なもので言えば以下のようになります。
displayの初期値
- inline → a、span、imgなど
- block → p、div、h1〜h6など
これらはあくまでも初期値なので、初期値がinlineの要素にblockを指定すればblockになります。
block・inline・inline-blockの違い
display: none;については要素を消す値で他とは全く別物なので、ここでは他の3つの違いについて解説していきます。
簡単にまとめたのがこちらです。
| display | block | inline | inline-block |
| 並び方 | 縦並び | 横並び | 横並び |
| 幅・高さ指定 | 可能 | 不可 | 可能 |
| marginの指定 | 可能 | 横のみ可能 （縦は不可） | 可能 |
| paddingの指定 | 可能 | 可能だが 縦は要注意 | 可能 |
| text-align | 不可 | 可能 | 可能 |
| vertical-align | 不可 | 可能 | 可能 |
inlineのpaddingについては注意が必要なので、それについては後ほど解説します。
それでは1つずつ実際のコードと実装例を見ながら解説していきます。
display: block;の特徴
display: block;の特徴を1つずつ見ていきます。
HTMLは全て以下にしています（divタグはデフォルトでblock）
<div class="box">要素</div>
<div class="box">要素</div>
<div class="box">要素</div>
blockの要素は縦並び
まずはHTMLで初期値がblockであるdivタグを3つと、その要素に対して枠線と背景色を指定しただけの状態がこちらです。
See the Pen
display: block; by junpei (@junpei-sugiyama)
on CodePen.
コードは上記のHTML・CSSをクリックすれば確認できますが、要素が縦に並んでいるのが分かります。
blockは幅・高さ指定可能
次は先ほどの要素に幅100pxと高さ50pxを指定してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
この時の注意点としては、幅や高さは文字より大きくしないと文字がはみ出てしまうということです。
実際に高さを10pxにしたらこのようになります。
See the Pen
display: block;（幅・高さ指定NG） by junpei (@junpei-sugiyama)
on CodePen.
なので要素内のテキストが増える可能性がある場合は、幅と高さはwidthとheightで指定するのではなく、内側の余白であるpaddingで指定するようにしましょう。
blockはmargin指定可能
marginは外側の余白ですが、blockでは指定可能です。
要素はデフォルトでは左上に配置されるので、試しに2つ目の要素だけ上と左にmarginを指定してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
要素の上と左に余白が出来ました。
blockはpadding指定可能
paddingは内側の余白ですが、blockでは指定可能です。
試しに3つ目だけpaddingを全方向に10px指定してみます。
See the Pen
display: block;（padding） by junpei (@junpei-sugiyama)
on CodePen.
paddingを指定しないと文字と枠線がピッタリくっついていますが、指定すると要素の内側に余白ができます（右の余白は元からあるのでこの例では分かりません）
blockはtext-align指定不可
text-alignは横方向の位置を指定するプロパティですが、blockには効きません。
試しに2つ目に中央揃えにするtext-align: center;を指定し、3つ目は要素の幅を指定した上でtext-align: center;を指定してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
すると2つ目は幅を指定していないので要素自体は横いっぱいに広がっていて何も変わっていませんが、要素の中にあるテキストは中央揃えになっています。
そして3つ目は要素の幅をしていますが、要素自体は中央揃えにならずテキストだけ中央揃えになっています。
つまり要素自体にはtext-alignは効いていないのが分かります。
ちなみに3つ目の要素を中央揃えにしたい場合はmargin-inline: auto;を指定すればOKです。
blockはvertical-align指定不可
vertical-alignは縦方向の位置を指定するプロパティですが、blockには効きません。
試しに2つ目に中央揃えにするvertical-align: middle;を指定し、3つ目は要素の高さを指定した上でvertical-align: middle;を指定してみます。
See the Pen
display: block;（vertical-aling） by junpei (@junpei-sugiyama)
on CodePen.
今度は2つ目は高さがないので何も変わらず、3つ目は高さを指定したのにテキストも中央揃えになりません。
もしvertical-align: middle;で縦方向のテキストを中央揃えにしたい場合は、display: table-cell;を指定すればOKです。
.box {
display: table-cell;
vertical-align: middle;
}ただし上記よりこちらを使う人が多いと思います。
.box {
align-items: center;
display: flex;
}
display: inline;の特徴
display: inline;の特徴を1つずつ見ていきます。
HTMLの基本は以下にしています（spanタグはデフォルトでinline）
<span class="box">要素</span>
<span class="box">要素</span>
<span class="box">要素</span>
inlineの要素は横並び
まずはHTMLで初期値がinlineであるspanタグを3つと、その要素に対して枠線と背景色を指定しただけの状態がこちらです。
See the Pen
display: inline;（デフォルト） by junpei (@junpei-sugiyama)
on CodePen.
display: block;と違い、要素が横に並んでいるのが分かります。
inlineは幅・高さ指定不可
次は先ほどの要素に幅50pxと高さ50pxを指定してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
CSSのタブをクリックすれば分かりますが、widthとheightを指定していますが効いていません。
ここで横並びのまま幅と高さを指定したい場合は、display: inline-block;にすればOKです（blockだと縦並びになります）
inlineは横方向のみmargin指定可能
これもblock同様、2つ目の要素の上と左にmarginを指定してみます。
See the Pen
display: inline;（margin指定） by junpei (@junpei-sugiyama)
on CodePen.
横方向である左の余白は効いていますが、縦方向である上の余白は効いていません。
同様に右は効きますが下は効かないので、inlineでmarginを指定する場合は左右にしか使えません。
inlineはpadding指定可能（上下は要注意）
inlineはpaddingが使えますが、上下には注意が必要です。
試しに3つ目だけpaddingを全方向に10px指定してみます。
See the Pen
display: inline;（padding指定） by junpei (@junpei-sugiyama)
on CodePen.
3つ目だけ全方向にpaddingが効いていますが、上方向の余白が見えません。
これだとちょっと分かりにくいので、複数行にした時にどうなるか見てみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
背景色を見ると幅と高さが出来ているように見えます。
しかし実際には幅はありますが高さは0になっていて、余白部分と上下のテキストが重なっています。
なので実際にはinlineで上下のpaddingは使えないと思っておきましょう。
inlineはtext-align指定可能（親要素に指定）
inlineに直接text-alignを指定しても効きませんが、親要素に対して指定すれば効きます。
See the Pen
display: inline;（text-align指定） by junpei (@junpei-sugiyama)
on CodePen.
この場合、HTMLとCSSは以下になります（上のHTML・CSSタブをクリックでも確認可能）
<div class="container">
<span class="box">要素</span>
</div>.container {
text-align: center;
}
inlineはvertical-align指定可能
vertical-alignはtext-alignと違ってinlineに直接書いても効きますが、単純に親要素に対しての縦方向を指定するのではなく、inlineの要素とinlineの要素の縦方向を調整します。
ちょっとイメージしにくいと思いますが、まずはこちらがinlineの要素を並べたものです。
See the Pen
display: inline;（text-align指定） by junpei (@junpei-sugiyama)
on CodePen.
要素同士の縦方向は下で揃っています。
これはデフォルトのvertical-align: baseline;になっているからです。
これをvertical-align: middle;にするとこのようになります。
See the Pen
display: inline;（vertical-align指定） by junpei (@junpei-sugiyama)
on CodePen.
要素同士の縦方向が中央になりました。
つまりvertical-alignは効いているということです。
display: inline-block;の特徴
inline-blockは最初の比較表を見れば分かりますが、blockやinlineに出来ないことが全て出来ます。
あとは並び方はinlineと同じく横並びとなります。
HTMLは全て以下にしています。
<div class="box">要素</div>
<div class="box">要素</div>
<div class="box">要素</div>divタグのデフォルトはdisplay: block;なので、これは全てdisplay: inline-block;にします。
inline-blockの要素は横並び
並び方は横並びなので、見た目はinlineと同じになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
inline-blockは幅・高さ指定可能
次は先ほどの要素に幅100pxと高さ50pxを指定してみます。
See the Pen
display: inline-block;（幅・高さ指定） by junpei (@junpei-sugiyama)
on CodePen.
これはinlineと違って幅と高さが指定できました。
inline-blockはpadding指定可能
今度は3つ目だけpaddingを10px指定してみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これはinlineと似ていますが、上下方向に指定するとちゃんと高さとなるので複数行のテキストでも重なりません。
See the Pen
display: inline-block;（padding指定複数行） by junpei (@junpei-sugiyama)
on CodePen.
これがinlineとの違いです。
inline-blockはtext-align指定可能
inline-blockの場合、text-alignは親要素に指定します。
See the Pen
display: inline-block;（text-align） by junpei (@junpei-sugiyama)
on CodePen.
これは以下のようになります。
<div class="container">
<div class="box">要素</div>
<div class="box">要素</div>
<div class="box">要素</div>
</div>.container {
text-align: center;
}
.box {
display: inline-block;
}ちなみに.boxがdisplay: block;だと効きません。
inline-blockはvertical-align指定可能
これはinlineの時と全く同じです。
こちらがvertical-align指定前。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
こちらがvertical-align指定後です。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
display: none;とは？
最後にdisplay: none;もよく使うので簡単に解説します。
これは要素を非表示にするプロパティになります。
例えば以下のように3つの要素があったとします。
See the Pen
display: none;指定前 by junpei (@junpei-sugiyama)
on CodePen.
そして3つ目の要素にdisplay: none;を指定するとこうなります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これを見ると、
と思う方がいるかも知れませんが、パソコンでは表示させてスマホでは非表示にしたいというレスポンシブデザインでよく使います。
これも間違いなく使うプロパティなので、覚えておきましょう。
まとめ
今回はdisplayでよく使う4つの値について解説してきました。
冒頭で書いた『marginが効かない、幅・高さが指定できない、中央揃えにならない』と言った原因はdisplayの値である可能性があるので、上手く実装できない場合はこれを思い出してみて下さい。
以上になります。
