【CSS Modules】displayプロパティの使い方

displayプロパティは、HTML要素の表示形式、つまりブロックレベル要素として振る舞うか、インラインレベル要素として振る舞うかといった、要素の描画方法に関する情報を保持するプロパティです。

このプロパティは、Webページ上の各要素がどのように表示され、他の要素とどのように配置されるかを根本的に決定するため、CSSによるレイアウト設計の基盤となります。

主な値として、block、inline、inline-block があります。 display: block; を設定すると、要素は独立したブロックボックスとして表示され、常に新しい行から始まり、利用可能な全幅を占めようとします。幅、高さ、余白（margin）やパディング（padding）を自由に設定できます。<div>や<p>要素などがデフォルトでこの形式です。 display: inline; を設定すると、要素はテキストの一部のようにインラインボックスとして表示され、新しい行は開始せず、隣接するインライン要素と同じ行に並びます。この値では幅や高さの設定は無視され、上下の余白は適用されません。<span>や<a>要素などがデフォルトでこの形式です。 display: inline-block; は、inline要素のように横に並びますが、block要素のように幅、高さ、上下の余白を設定できる便利な表示形式です。 また、display: none; は要素を完全に非表示にし、レイアウト上のスペースも占有させないため、要素が存在しないかのように扱われます。

現代的なウェブレイアウトでは、display: flex; や display: grid; といった値が重要です。 display: flex; は要素をフレックスコンテナとして定義し、その子要素を柔軟なボックスモデルに沿って、一方向（行または列）に整列させ、スペースを配分できるようにします。 display: grid; は要素をグリッドコンテナとして定義し、子要素を二次元の行と列からなるグリッド構造に沿って配置できるようにし、複雑なレイアウトを直感的に設計することを可能にします。

displayプロパティを理解し、これらの値を適切に使い分けることは、Webページの基本的な要素配置から、レスポンシブデザインに対応した高度なレイアウト構築まで、あらゆる視覚的表現を制御する上で不可欠です。

Copy
1.selector {
2  display: block;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません