【CSS】displayプロパティの使い方について

目次

1. 1. displayプロパティとは？
2. 2. inline
3. 3. inline-block
4. 4. block
5. 5. flex
6. 6. grid
7. 7. none
8. 8. まとめ

1. displayプロパティとは？

displayプロパティとは、要素の表示方法を指定するためのプロパティです。
このプロパティを使用することで、要素の振る舞いを制御することができます。

よく使われるdisplayプロパティの値は下記の通りです。

• inline
• inline-block
• block
• flex
• grid
• none

2. inline

要素は横に並び、横幅や高さは指定できません。主に、文章の一部として使用されます。

■タグ例（初期値がinlineの主なタグ）
a、img、span等

■特徴

• 要素は横に並ぶ
• widthとheightが指定できない
• paddingとmarginは左右のみ指定できる（※paddingは上下の指定ができるが、正しく適用されないため非推奨）

■配置イメージ

3. inline-block

inlineと同じく要素は横に並び且つ、横幅、高さ、余白の調整が可能です。inlineの要素に対してレイアウト調整を行いたい場合等に使用します。

■タグ例（初期値がinline-blockの主なタグ）
※無し

■特徴

• 要素は横に並ぶ
• widthとheightが指定できる
• paddingとmarginが指定できる

■配置イメージ

4. block

要素は縦に並び、横幅、高さ、余白の調整が可能です。inlineの要素を縦に並べたい場合等に使用します。

■タグ例（初期値がblockの主なタグ）
div、p、h1～（見出しタグ）等

■特徴

• 要素は縦に並ぶ
• widthとheightが指定できる
• paddingとmarginが指定できる

■配置イメージ

5. flex（Flexbox：フレックスボックス）

フレックスボックスは、主に要素を横に並べる際に使用します。

「inline」「inline-block」と比べて並び方や折り返し方の設定方法が幅広く用意されているので、要素を横並びにする際はフレックスボックスがよく使用されます。

フレックスボックスの詳細については、「【CSS】Flexbox（フレックスボックス）の使い方について」をご参照ください。

6. Grid（グリッド）

グリッドレイアウトとは、格子状のマス目を使ってレイアウトを組み立てていく手法のことを言います。要素を行と列のグリッド状に配置することができ、複雑なレイアウトの作成も可能です。

グリッドレイアウトの詳細については、「【CSS】Grid（グリッドレイアウト）の使い方について」をご参照ください。

7. none

displayプロパティに「none」を指定すると、要素が非表示になります。
例えば、下記のように要素の表示と非表示を切り替えたりする際に使用します。

• PCの場合は表示してスマートフォンの場合は表示しない
• 最初は表示されていない要素をボタンを押したタイミングで表示する

8. まとめ

CSSのdisplayプロパティの使い方について解説してきました。

今回、ご紹介した下記の6つの値は、仕事でもよく使うものばかりです。

• inline
• inline-block
• block
• flex
• grid
• none

各値の挙動をしっかりと理解して、コーディング時には適切な値を使いこなせるようにしておきましょう！