CSSレイアウトのdisplayプロパティの機能は?

内容を表示する方法を指定するCSSのdisplayプロパティ。よく使われる値を以下に示します。

  1. ブロック: 要素はブロックレベル要素として表示され、1 行を占有し、デフォルトでは幅が自動的に親要素の幅に合わせて調整されます。
  2. 要素はインライン要素として表示され、1 行を占有することはなく、コンテンツに必要なスペースのみを占有します。
  3. インラインブロック: 要素は行を占有しないでインラインブロック要素として表示されますが、幅や高さなどのブロック要素のプロパティを設定できます。
  4. 非表示にするとは、要素を非表示にして、スペースを占有しない状態にすることです。
  5. 要素はフレックスボックスコンテナとして表示され、サブ要素のフレックスプロパティを設定することでサブ要素のサイズを制御できます。
  6. グリッド:要素はグリッドコンテナとして表示され、子のグリッドプロパティを設定して、グリッド内の子のレイアウトを制御できます。

displayプロパティは、table、table-cell、table-rowなど他の値も持ち、テーブルレイアウトを実現するために使用できます。さらに、displayプロパティをpositionプロパティと組み合わせることで、display: inline-block; position: absolute;のように特殊なレイアウトを実現できます。

bannerAds