CSSのdisplayプロパティとは?使い方や特徴を解説

こんにちは!ライターのナナミです。

WEBサイトを作りに欠かせない、ブロック要素やインラインブロック要素。
そんな要素の種類を、CSSで調整できるってご存知ですか?

ということで、今回はdisplayを徹底解説!

・ブロック要素とインライン要素のおさらい
・displayの使い方
・display活用の具体例

を紹介していきます。

displayで要素の調整ができるようになると、コーディングの時に悩む時間もどんどん減っていきます。
しっかり覚えて、さくさくコーディングしていきましょう!

ブロック要素とインライン要素とは

displayを最大限活用するには、ブロック要素インライン要素、そしてインラインブロック要素について理解する必要があります。

それぞれについて細かく見ていきましょう!

一つのまとまり、ブロック要素

ブロック要素は、WEBサイトのレイアウトのまとまりとして使われる要素です。
文章などが入っている箱のようなイメージですね。

display1

HTML

CSS

ブロック要素の詳細はこちら

文の中の区切り、インライン要素

インライン要素は、名前の通りラインの中の要素、つまり文の行に含まれることを想定している要素です。
ブロック要素の中身にインライン要素がある、という感じですね。

display2

HTML

CSS

インライン要素のリファレンスはこちら
http://www.htmq.com/htmlkihon/005.shtml

両方のいいとこ取り、インラインブロック要素

インラインブロック要素は、ブロック要素とインライン要素それぞれの性質を併せ持っています
インライン要素のように横並びにできたり、ブロック要素のように高さが指定できたりと、とても便利な要素です。

display3

HTML

CSS

インラインブロック要素の詳細はこちら

displayの使い方

HTMLタグにはリストリンクなど、それぞれに意味がありますよね。
その意味や役割を踏まえつつも、自由にレイアウトしたい…

そんな時に使うのがdisplay
ブロック要素をインライン要素に、インライン要素をブロック要素にするなど、要素の状態を変更できるプロパティです。

よく使うものを中心に細かく見ていきましょう。

display:block;

要素をブロック要素にすることができます。
spanでもaでも、指定すればブロック要素になっちゃいます。

block1

HTML

CSS

display:block;の使用例

HTMLタグの作用的にインライン要素にならざるを得ない時、display:block;は大活躍します。

例えば、aタグでボタンを作る時、高さが指定できないとデザインができませんよね。
そういう時にdisplay:block;を指定すれば…

block2

HTML

CSS

こんな感じでボタンを作ることができます。

display:inline;

要素をインライン要素にすることができます。
divだろうがsectionだろうが関係ないです、全部インラインにしちゃいます。

inline1

HTML

CSS

display:inline;の使用例

ブロック要素で縦に並べていたけれど、横並びにしたいなぁ…という時は

inline2

HTML

CSS

こうすれば横に並びますね。

display:inline-block;

要素をインラインブロック要素にすることができます。
divだろうがspanだろうが、これを指定してしまえばみんなインラインブロック要素です。

インラインブロック要素は、この指定を使わないと実装することができません。

inline-block1

HTML

CSS

display:inline-block;の使用例

インラインブロック要素は高さも指定できるし横並びにもできるので、使える幅がとても広いですね。

例えば横並びにしたいけど、divみたいに高さの指定をしたいなんて時も…

inline-block2

HTML

CSS

これでバッチリです、便利!

display:none;

要素を非表示にできる指定です。
透明にするというよりは「存在を無くす」という感じなので、高さも無くなります。

ただ、ソースコードに記述は残るので、指定を消せば復活します。

none

HTML

CSS

noneの使用例

主にjQueryなどで表示非表示を切り替えたりするような動きの時に使います。

詳しくはこちらの記事をご覧ください

他にも、WEBサイトのPC版とSP版を同じHTMLで作成する、レスポンシブデザインにするときはとても便利です。
メディアクエリなどを使ってCSSを分ければ、PC版ではSP版のメニューを非表示にする、ということができます。

レスポンシブデザインについてはこちらの記事が詳しく解説してくれています
https://techacademy.jp/magazine/9369

display:flex;

CSS3から追加された、新しい表示指定です。
指定した要素の子要素を並列に、つまり横並びにすることができます

flex1

HTML

CSS

オールドブラウザに対応してないなどのデメリットはありますが、超楽チンですね…!

カレントブラウザはバッチリ動くので、今後の活躍が期待できる指定です。

display:flex;の詳細は、こちらの記事が詳しく解説してくれています
https://mamewaza.com/support/blog/howto-use-flex.html

flexの使用例

flex2

HTML

CSS

flexを使うと、グローバルメニューもとても簡単に実装できます。
スペーシングの指定を一行いれるだけでかなりいい感じにしてくれますね。

その他の指定

displayは上記以外にも色々な指定をすることができます。
あまり指定する出番はないかもしれませんが、知っておくと色々と便利です。

displayの値概要対応するHTMLタグ
list-itemブロック要素ほぼ同じだが、頭にマーカーがつくli
run-in文脈に応じてブロックかインラインボックスかを判断する
tableテーブル要素table
inline-tableインラインレベルのテーブルとなる
table-row-groupテーブルのボディの見栄えになるtbody
table-header-groupテーブルのヘッダーの見栄えになるthead
table-footer-groupテーブルのフッターの見栄えになるtfoot
table-rowテーブルの行の見栄えになるtr
table-column-groupテーブルの列をグループ化した見栄えになるcolgroup
table-columntable-column-groupとほぼ同様col
table-cellテーブルのデータ部分の見栄えになるtd
table-captionテーブルのキャプションの見栄えになるcaption
rubyルビを振る文字とルビを囲う要素になるruby
ruby-baseルビを振る文字を指定する要素になる(IE9までしか使えない)rb
ruby-textルビの文字要素になるrt
ruby-base-containerruby-baseとほぼ同じrbc
ruby-text-containerruby-textとほぼ同じrtc
inherit親要素の値を継承する
inline-flexインライン要素のフレックスコンテナボックスになる

まとめ

いかがでしたか?
displayには色々な種類がありますが、基本的にinlineblockinline-blocknoneを覚えておけばOKです。

flexも上手く使えばかなり便利なので、応用編としてぜひ覚えておいてください。

それぞれに得意不得意があるので、その時どの要素が向いているのかCSSで変えた方がいいのかなどを考えながら実装できるといい感じですね。

ぜひ色々な場面で活用していってください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説