displayプロパティは、CSSの非常に重要なプロパティの一つです。その要素の特性は、値によって大きく変わるため、必ず使えるようにしておくべきです。
HTML要素にはブロック要素とインライン要素というものがあります。これらを理解することが、displayプロパティの理解に必要です。詳しくは、こちらの記事を参照してください。
displayプロパティとは
displayプロパティをざっくりと説明すると、「要素をどのように表示するか」を指定するプロパティであり、数あるCSSプロパティの中でも重要なものです。
displayプロパティに指定できる値と特徴
displayプロパティに取れる値は、「block」、「inline」、「inline-block」、「none」の4つが主です。ほとんどのHTML要素には初期値として「block」または「inline」が設定されています。それぞれの要素の初期値を知っておくことも非常に重要です。
それでは、それぞれの値と特徴を以下で詳しく説明します。
block
blockという値は、要素をブロック要素のように表示する時に使用します。
element {
display: block;
}ブロック要素の特徴
- 要素は親要素の幅全体を占める
- 前後に改行が挿入され、他の要素とは別の行に配置される
- widthやheightプロパティでサイズを明示的に設定できる
- marginやpaddingプロパティで左右上下の余白を指定できる
初期値がblockの主な要素
h1~h6, p, div, ul
inline
inlineという値は、要素をインライン要素として表示する時に使用します。
element {
display: inline;
}インライン要素の特徴
- 連続して横に並び、前後に改行が入らない
- 要素の幅と高さは指定できず、コンテンツ（テキストなど）に依存する
- 左右の余白は指定できるが、上下の余白は指定できない
初期値がinlineの主な要素
a, span, img
inline-block
inline-blockは、inlineとblockの良さを組み合わせた値です。要素を横に並べつつ、幅や高さや余白の指定をしたい時に便利です。
この値を初期値とするタグはありません。
element {
display: inline-block;
}inline-blockの特徴
- 前後に改行がなく、インライン要素と同じ行に並ぶ
- 高さや幅を指定できる
- デフォルトでは内容に合わせた幅を持つが、widthとheightを指定することができる
- 左右上下の余白が指定できる
none
noneという値は、要素を非表示にしたい時に使用します。
element {
display: none;
}noneの特徴
- 要素は非表示となる
- 改行はされない
まとめ
この記事では、CSSの「display」プロパティの基本的な使い方について解説しました。
Web制作をする上で非常によく使用するプロパティです。今回紹介した値以外にも「flex」などまだまだ紹介しきれていないプロパティがありますので、それらに関してはまた別の記事で紹介いたします。
今回学んだdisplayプロパティの値を使用することで、要素の表示非表示はもちろん、要素の特性を自由に変えることができます。
この内容をマスターすることで、より自分の理想とするWebサイトが制作できること間違いないので、是非とも繰り返し勉強してマスターしましょう！
