"display"プロパティとは、具体的には何ですか？
"display"プロパティは、要素がどのように表示されるかを制御するCSSの重要な属性です。
より技術的な言葉で言えば、指定された要素ボックスがどのようにレンダリングされるかを制御し、全体のレイアウトに大きな影響を与えます。
よく使われるdisplayの値は以下の通りです：
- none: これはおそらくみんなにとって最も馴染み深いものです。要素を非表示にします。
- block: 要素をブロックレベルの要素としてレンダリングし、親要素の全幅を占有します。次のレイアウトは次の行で開始されます。
- inline: インライン要素は同じ行に表示され、コンテンツに必要な幅のみを占有します。
- inline-block: インライン要素とブロック要素の特性を併せ持ちます。要素は同じ行に表示されますが、幅と高さを設定することができます。
- flex: フレックスコンテナーを確立し、フレックスレイアウトモデルを使用してそれ内のアイテムの柔軟な配置を可能にします。
- grid: グリッドコンテナーを作成し、グリッドレイアウトモデルを使用して強力な2次元のレイアウトを可能にします。
- table: HTMLの <table> 要素のように振る舞い、要素をテーブル要素に変換し、関連する table-row 要素と table-cell 要素を持たせます。
これらの異なるdisplay値は、ウェブページ内の要素のレイアウトと配置を制御する多様な方法を提供します。
以下は、block、inline、inline-blockの違いの例です。
See the Pen Untitled by story zyra (@story-zyra) on CodePen.
⭐ 実際、<div> 要素のデフォルトの表示値は block です。そのため、自然に改行を起こし、親コンテナの全幅を占有します。結論
CSSのさまざまなdisplay値を理解することで、要素がどのようにレンダリングされ、レイアウト内でどのように配置されるかを制御する可能性が広がります。
ですので、display: noneに限定しないでください。
✅もし説明に関する問題があれば、お気軽にお知らせください。
0 件のコメント:
コメントを投稿