💡 この記事でわかること
- displayプロパティとは何か
- block・inline・inline-blockの違い
- noneとvisibility:hiddenの違い
- flex・gridとの関係
- 初心者がつまずきやすいポイント
1. displayとは？
displayプロパティとは、
👉 要素を画面上でどのように表示するか、その基本的なふるまいを決めるCSSプロパティです。
HTMLの各タグには、実は最初から「block」「inline」のどちらかの初期値が設定されています。divやpタグはblock、spanやaタグはinlineが初期値です。displayプロパティを使うと、このふるまいを自分で書き換えられます。
2. block(ブロック要素)
block値を指定した要素は、以下のような特徴を持ちます。
- 幅いっぱいに広がり、前後で自動的に改行される
- width・height・margin・paddingを上下左右すべて指定できる
.box {
display: block;
width: 300px;
height: 100px;
}💡 div・p・h1〜h6・ul・liなど、多くのタグは何も指定しなくても初期値がblockです。
3. inline(インライン要素)
inline値を指定した要素は、以下のような特徴を持ちます。
- コンテンツの幅だけ場所を取り、前後で改行されず横に並ぶ
- width・heightを指定しても効かない
- margin・paddingは左右は効くが、上下は見た目上の高さに反映されない
.text {
display: inline;
}👉 span・a・strong・emなど、文章の一部を装飾するタグの多くは初期値がinlineです。「文章の途中に自然に混ざる」ことを目的としたタグ、とイメージすると分かりやすいです。
4. inline-block(いいとこ取り)
inline-block値は、blockとinlineの特徴を組み合わせたような値です。
- inlineのように、前後で改行されず横に並ぶ
- blockのように、width・height・上下のmargin・paddingが効く
.button {
display: inline-block;
width: 120px;
padding: 8px 16px;
}💡 「横に並べたいけど、サイズも指定したい」というときの定番の指定方法です。ナビゲーションメニューの項目や、ボタン風のリンクなどでよく使われます。
5. none(非表示)とflex・grid
display: noneを指定すると、要素はページ上から完全に取り除かれたように扱われます。
.hidden {
display: none;
}⚠️ 似た働きをするvisibility: hiddenとの違いに注意しましょう。display: noneは要素が占めていたスペースごと消えるのに対し、visibility: hiddenは見た目だけ透明になり、スペースはそのまま残ります。
また、複数の要素を横並びにしたり、格子状に配置したりしたい場合は、display: flexやdisplay: gridという値も使います。これらは奥が深いテーマなので、別記事で詳しく解説しています。
6. 初心者がつまずきやすいポイント
inline要素にwidth・heightを指定しても反映されない
spanタグなどにwidth・heightを指定しても、inlineのままでは無視されます。サイズを効かせたい場合は、display: block、またはdisplay: inline-blockに変更する必要があります。
display: flexにするとpositionが不要になるわけではない
displayは「要素の並び方」を決めるプロパティで、positionは「要素をどこに固定・重ねるか」を決めるプロパティです。役割が異なるため、目的によっては両方を組み合わせて使うことになります。
まとめ
displayプロパティは、要素をどのように表示するかを決める、CSSの中でも特に基本となるプロパティです。
- block: 幅いっぱいに広がり改行される
- inline: 横に並ぶがwidth・heightは効かない
- inline-block: 横に並びつつwidth・heightも効く
- none: スペースごと非表示になる(visibility: hiddenとは異なる)
ブラウザの開発者ツールで、身近な要素のdisplayの初期値を確認してみると理解が深まります。