あちゃまWEB >

CSS displayの定義方法

display  プロパティは要素がどのように表示されるかを制御します。
各値は、要素がボックスモデルのプロパティ（padding、margin、width、heightなど）にどのように反応するか、また他の要素との配置にどのように影響するかを決定します
プロパティ値 関連CSSプロパティの影響 CSSコード例 プレビュー
block
ブロックレベル要素として表示します。要素は常に新しい行から始まり、利用可能な幅をすべて占有します。
width, height: 有効。
padding, margin: 上下左右すべて有効。
text-align: ブロック内のインラインコンテンツを揃えるが、ブロック自体には影響しない。
vertical-align: 効かない（ブロック要素には適用されない）。 
.element {
  display: block;
  width: 150px;
  height: 60px;
  margin: 10px;
  padding: 15px;
  background-color: #d1ecf1;
}
Block Box 1
Block Box 2
inline
インライン要素として表示します。要素は新しい行から始まらず、必要な幅だけを占有します。
width, height: 無効。
padding: 左右は有効。上下は見た目上広がるが、他の行に影響を与えない（コンテンツ領域を押し広げる）。
margin: 左右は有効。上下は無効。
text-align: 適用されない（親ブロック要素に適用してその中のインライン要素を揃える）。
vertical-align: 有効（行内の垂直方向の位置揃え）。 
.element {
  display: inline;
  margin: 5px; /* 上下は無視 */
  padding: 10px;
  background-color: #fff3cd;
}
これは Inline Span 1 と Inline Span 2 の例です。
inline-block
インライン要素のように他の要素と同じ行に配置されますが、ブロック要素のようにwidth, height, padding, marginがすべて有効になります。
width, height: 有効。
padding, margin: 上下左右すべて有効。
text-align: 適用されない（親ブロック要素に適用してその中のインラインブロック要素を揃える）。
vertical-align: 有効（行内の垂直方向の位置揃え）。 
.element {
  display: inline-block;
  width: 120px;
  height: 50px;
  margin: 10px;
  padding: 10px;
  background-color: #d4edda;
}
アイテムA:
Inline-Block 1
アイテムB:
Inline-Block 2
none
要素を完全に非表示にします。要素はレイアウトからも削除され、スペースも占有しません。
すべてのボックスモデルプロパティ（width, height, padding, marginなど）は無効になる。要素はレンダリングツリーから完全に削除される。 
.element {
  display: none;
}

このテキストは表示されますが、次の要素は 非表示です。
flex
要素をFlexコンテナとして設定し、その子要素（Flexアイテム）をFlexboxレイアウトモデルに従って配置します。
Flexコンテナ (`display: flex`) に適用:
width, height: 有効。
padding, margin: 有効。
text-align: 適用されない（Flexアイテムの配置はFlexboxプロパティで制御）。
vertical-align: 適用されない。

Flexアイテム (子要素) に適用:
Flexアイテムは、ブロックレベル要素のように振る舞うため、通常width, height, padding, marginは有効。ただし、flexプロパティによってサイズが上書きされる場合がある。 
.container {
  display: flex;
  width: 200px;
  height: 80px;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}
.item { /* Flexアイテムのスタイル */
  background-color: #b3e0ff;
  padding: 5px;
}
Flex 1
Flex 2
grid
要素をGridコンテナとして設定し、その子要素（Gridアイテム）をGridレイアウトモデルに従って配置します。
Gridコンテナ (`display: grid`) に適用:
width, height: 有効。
padding, margin: 有効。
text-align: 適用されない（Gridアイテムの配置はGridプロパティで制御）。
vertical-align: 適用されない。

Gridアイテム (子要素) に適用:
Gridアイテムは、ブロックレベル要素のように振る舞うため、通常width, height, padding, marginは有効。ただし、Gridプロパティ（例: grid-column, grid-row）によって配置やサイズが上書きされる場合がある。 
.container {
  display: grid;
  width: 250px;
  height: 100px;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 10px;
}
.item { /* Gridアイテムのスタイル */
  background-color: #ffb6c1;
  padding: 5px;
}
Grid 1
Grid 2
Grid 3
Grid 4
inline-flex
Flexコンテナをインライン要素として表示し、その子要素をFlexboxレイアウトに従って配置します。
`inline-block`と同様に、Flexコンテナ自体は行内に配置される。
width, height: 有効。
padding, margin: 上下左右すべて有効。
text-align: 適用されない（親ブロック要素に適用してその中のインラインFlexコンテナを揃える）。
vertical-align: 有効（行内の垂直方向の位置揃え）。 
.element {
  display: inline-flex;
  width: 180px;
  height: 70px;
  border: 1px solid #c8a2c8;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin: 5px;
}
.item { /* Flexアイテムのスタイル */
  background-color: #e6e6fa;
  padding: 3px 8px;
}
左側テキスト
IF1
IF2
右側テキスト
inline-grid
Gridコンテナをインライン要素として表示し、その子要素をGridレイアウトに従って配置します。
`inline-block`と同様に、Gridコンテナ自体は行内に配置される。
width, height: 有効。
padding, margin: 上下左右すべて有効。
text-align: 適用されない（親ブロック要素に適用してその中のインラインGridコンテナを揃える）。
vertical-align: 有効（行内の垂直方向の位置揃え）。 
.element {
  display: inline-grid;
  width: 220px;
  height: 90px;
  border: 1px solid #b0e0e6;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 5px;
  margin: 5px;
}
.item { /* Gridアイテムのスタイル */
  background-color: #add8e6;
  padding: 3px;
}
左側テキスト
IG1
IG2
IG3
IG4
右側テキスト

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

WordPress情報

WEB開発

その他