【CSS】display - ボックスとレイアウト

CSSのdisplayプロパティについて解説します。

検証環境

CSS

macOS

14.1

display

displayは“ボックスとレイアウト”のプロパティです。

要素のブロックの種類（ブロックやインライン）やコンテンツのレイアウトなどを設定します。

基本構文

display: 値;

値

代表的な値は次の通りです。

値	意味
block	ブロックボックス
inline	インラインボックス
inline-block	ブロックボックスと同様の振る舞いですが、隣接する要素に対して、インラインボックスのように配置します。
flex	ブロックボックスと同じ振る舞いで、コンテンツをフレックスボックスでレイアウトします。

サンプル

block

sample.html

<style>
p {
    ___ih_hl_start
    display: block;
    ___ih_hl_end
    border: 1px solid black;
}
</style>

<div>
    <p>CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

inline

sample.html

<style>
p {
    ___ih_hl_start
    display: inline;
    ___ih_hl_end
    border: 1px solid black;
}
</style>

<div>
    <p>CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

inline-block

sample.html

<style>
p {
    ___ih_hl_start
    display: inline-block;
    ___ih_hl_end
    border: 1px solid black;
}
</style>

<div>
    <p>CSS</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

flex

flexは子要素を任意の方向（デフォルトは横方向）にレイアウトします。

※ 子要素は親要素の領域に収まるように伸縮されます。

sample.html

<style>
div {
    ___ih_hl_start
    display: flex;
    ___ih_hl_end
}
p {
    border: 1px solid black;
}
</style>

<div>
    <p>CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー