CSSのdisplayプロパティを値別に解説！基本編！inline,block,inline-block,flex,inline-flex,none
CSSのdisplayプロパティとは
HTMLの要素には、種類があります。
displayプロパティは、要素に対する種類や表示方法を指定できます。
〜 displayプロパティの書き方 〜
セレクタ {
display: 値;
その他スタイル...
}
※値：要素の種類を指定する値
値は、inline、block、inline-block、flexなど様々な種類が用意されています。
本記事では、基本な値を紹介します。
CSS
プロパティdisplay:inline
display:inlineとは
値 inline は、インライン要素の指定です。
〜 インライン要素のイメージ 〜
〜 インライン要素の特徴 〜
〜 display:inlineの書き方 〜
セレクタ {
display: inline;
その他スタイル...
}
【コード例1】インライン要素 → インライン要素
ブラウザで実行するとこんな感じです。
隣接したインライン要素同士は横並びとなりました。
【コード例2】ブロック要素 → インライン要素 → ブロック要素
ブラウザで実行するとこんな感じです。
ブロック要素とインライン要素の間には改行が入りました。
ブロック要素については次節 "display:blockとは" で解説します。
CSS
プロパティdisplay:block
display:blockとは
値 block は、ブロック要素の指定です。
ブロック要素は、Webページのまとまり や レイアウトの役割を果たす要素です。
〜 ブロック要素のイメージ 〜
〜 ブロック要素の特徴 〜
〜 display:blockの書き方 〜
セレクタ {
display: block;
その他スタイル...
}
【コード例1】インライン要素 → ブロック要素 → インライン要素
ブラウザで実行するとこんな感じです。
ブロック要素とインライン要素の間には改行が入りました。
【コード例2】ブロック要素 → ブロック要素
ブラウザで実行するとこんな感じです。
隣接したブロック要素同士の間には改行が入りました。
CSS
プロパティdisplay:inline-block
display:inline-blockとは
値 inline-block は、インライン要素とブロック要素の特徴を持つインラインブロック要素の指定です。
〜 インラインブロック要素のイメージ 〜
〜 インラインブロック要素の特徴 〜
〜 display:inline-blockの書き方 〜
セレクタ {
display: inline-block;
その他スタイル...
}
デフォルトがインラインブロック要素となるタグは以下のものがあります。
- imgタグ
- inputタグ
- textareaタグ
- selectタグ
- buttonタグ
- canvasタグ
- iframeタグ
これらは、displayプロパティの指定によって変えることが可能です。
【コード例1】インラインブロック要素 → インラインブロック要素
ブラウザで実行するとこんな感じです。
隣接したインラインブロック要素同士は横並びとなりました。
【コード例2】インライン要素 → インラインブロック要素
ブラウザで実行するとこんな感じです。
隣接したインライン要素とインラインブロック要素は横並びとなりました。
【コード例3】ブロック要素 → インラインブロック要素
ブラウザで実行するとこんな感じです。
ブロック要素とインラインブロック要素の間には改行が入りました。
CSS
プロパティdisplay:flex
display:flexとは
値 flex は、フレックスボックスの指定です。
フレックスボックスの中に内包した子要素は、ブロック要素でも横並びにできることが大きな特徴です。
〜 フレックスボックスのイメージ 〜
〜 フレックスボックスの特徴 〜
〜 display:flexの書き方 〜
セレクタ {
display: flex;
その他スタイル...
}
【フレックスボックスの関連記事】
【基本編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！
こじはなNote
【コード例1】インライン要素 → フレックスボックス → インライン要素
ブラウザで実行するとこんな感じです。
インライン要素とフレックスボックスの間には改行が入りました。
【コード例2】フレックスボックスの中に、複数の子要素
ブラウザで実行するとこんな感じです。
フレックスボックスの中に、「ブロック要素 → ブロック要素 → インライン要素」が内包されています。
中の要素たちは、ブロック要素も合わせて横並びとなりました。
【コード例3】フレックスボックスの中に子要素 ＋ 均等間隔に配置
ブラウザで実行するとこんな感じです。
フレックスボックスの中に、「ブロック要素 → ブロック要素 → インライン要素」が内包されています。
中の要素たちは、均等な間隔に配置されました。
justify-contentプロパティは、flex要素内の横並びの配置を指定できます。
※flex-directionプロパティの値によっては縦並びの配置になります。
〜 justify-contentの値の種類 〜
| center |
flex要素内のアイテムを中央へ寄せます。 
|
|---|---|
| flex-start |
flex要素内のアイテムを左へ寄せます。 
|
| flex-end |
flex要素内の要素を右へ寄せます。 
|
| space-between |
flex要素内のアイテムを等間隔に配置します。 
|
| space-evenly |
flex要素内のアイテムを等間隔に配置します。 
|
| space-around |
flex要素内のアイテムを等間隔に配置します。 
|
【 justify-contentの関連記事 】
justify-content｜主軸方向（デフォルトは水平）の配置
【基本編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！
こじはなNote
【コード例4】フレックスボックスの中に子要素 ＋ 縦並び指定
値 inline-flex は、インライン要素とフレックスボックスの特徴を持
ブラウザで実行するとこんな感じです。
フレックスボックスの中に、「ブロック要素 → ブロック要素 → インライン要素」が内包されています。
中の要素たちは、縦並びとなりました。
flex-directionプロパティは、flex要素内のアイテムの並び順や方向を指定できます。
〜 flex-directionの値の種類 〜
| row |
flex要素内のアイテムを左から右の方向へ並ばせます。 
|
|---|---|
| row-reverse |
flex要素内のアイテムを右から左の方向へ並ばせます。 
|
| column |
flex要素内のアイテムを垂直に上から下の方向へ並ばせます。 
|
| column-reverse |
flex要素内のアイテムを垂直に下から上の方向へ並ばせます。 
|
【 flex-directionの関連記事 】
並び順/並び方：flex-direction
【上級編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！
こじはなNote
CSS
プロパティdisplay:inline-flex
display:inline-flexとは
値 inline-flex は、インラインフレックス要素の指定です。
〜 インラインフレックス要素のイメージ 〜
〜 インラインフレックス要素の特徴 〜
〜 display:inline-flexの書き方 〜
セレクタ {
display: inline-flex;
その他スタイル...
}
【フレックスボックスの関連記事】
【基本編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！
こじはなNote
【コード例1】インライン要素 → インラインフレックス → インライン要素
ブラウザで実行するとこんな感じです。
隣接したインライン要素とインラインフレックスは横並びとなりました。
【コード例2】インラインフレックスの中に、複数の子要素
ブラウザで実行するとこんな感じです。
インラインフレックスの中に、「ブロック要素 → ブロック要素 → インライン要素」が内包されています。
中の要素たちは、ブロック要素も合わせて横並びとなりました。
【コード例3】インラインフレックスの中に子要素 ＋ 縦並び指定
ブラウザで実行するとこんな感じです。
インラインフレックスの中に、「ブロック要素 → ブロック要素 → インライン要素」が内包されています。
中の要素たちは、縦並びとなりました。
flex-directionプロパティは、flex要素内のアイテムの並び順や方向を指定できます。
〜 flex-directionの値の種類 〜
| row |
flex要素内のアイテムを左から右の方向へ並ばせます。
|
|---|---|
| row-reverse |
flex要素内のアイテムを右から左の方向へ並ばせます。
|
| column |
flex要素内のアイテムを垂直に上から下の方向へ並ばせます。
|
| column-reverse |
flex要素内のアイテムを垂直に下から上の方向へ並ばせます。
|
【 flex-directionの関連記事 】
並び順/並び方：flex-direction
【上級編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！
こじはなNote
CSS
プロパティdisplay:none
display:noneとは
値 none は、非表示の指定です。
display:noneに設定した要素は、非表示状態となって無くなります。
CSSの@mediaや擬似クラス、JavaScriptなどで使うことがあります。
〜 display:noneの書き方 〜
セレクタ {
display: none;
その他スタイル...
}
【コード例】要素 → 非表示 (none) → 要素
ブラウザで実行するとこんな感じです。
"display:none;" を指定した "非表示要素"が表示されません。