【CSS Modules】display-outside型の使い方
display-outside型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
display-outside定数は、CSSのdisplayプロパティにおいて、要素が他の要素との間でどのように配置され、振る舞うかを決定する「外部表示タイプ」を表す定数です。具体的には、displayプロパティに指定できる値のうち、blockやinlineといったキーワードがこの外部表示タイプに分類されます。
ウェブページ上の各要素は、外部表示タイプによって、自身の前後に改行が入るか、あるいは他の要素と同じ行に並ぶかが決まります。例えば、display: block;と指定された要素は独立したブロックとして表示され、前後に改行が挿入されます。これにより、見出しや段落のように、親要素の幅いっぱいに広がる表示が可能です。一方、display: inline;と指定された要素は、テキストや画像のように行内に配置され、前後に改行は入りません。これにより、複数の要素が横に並んで表示されます。
display-outsideという概念は、要素自体の表示形式（外部表示）と、その要素が含む内容物の表示形式（内部表示）を明確に区別するために導入されました。これにより、例えばdisplay: flow-root block;のように、外部表示と内部表示を組み合わせて、より詳細なレイアウト制御が可能になります。システムエンジニアを目指す上では、ウェブページのレイアウトを正確に制御するために、この外部表示タイプがどのような効果をもたらすかを理解することが重要です。
公式リファレンス: <display-outside>
構文(syntax)
1selector { 2 display: block; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません