【CSS】displayプロパティの基本｜各値の実例付きで解説

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「Displayプロパティって具体的に何ができるの？」
「Displayプロパティの正しい使い方が知りたい」
「Displayプロパティを活用した実例が見たいな」

✔当記事を通じてお伝えすること

• CSS Displayプロパティの基本とその役割
• Displayプロパティの適切な書き方と応用方法
• Displayプロパティを用いた実例の紹介

当記事では、Displayプロパティの基本的な理解から、場面別に使い分ける応用した使い方についても、分かりやすく具体例を交えて詳しく解説しています。

ぜひ最後までご覧ください。

Displayプロパティ入門

ここでは、Displayプロパティについて基本的な概念を解説します。

Displayプロパティの役割やその主要な値についての理解を深めましょう。

• Displayプロパティの役割
• 主要なDisplayの値
• Displayの値を覚えよう

Displayプロパティの役割

Displayプロパティは、HTML要素がどのように描画されるかを制御します。

具体的には、各要素について、以下を決定します。

• ブロックレベル要素になるのか
• インライン要素になるのか
• それらの混合形であるインラインブロック要素になるのか

より高度なレイアウトを制御するために、フレックスボックスやグリッドのような新しい値も設定可能です。

主要なDisplayの値

Displayプロパティにはさまざまな値があります。

主要なものは以下の通りです。

• ‘block’
• ‘inline’
• ‘inline-block’
• ‘flex’
• ‘grid’
• ‘none’

これらの値は、各要素の表示を大きく左右します。

たとえば、’block’は要素をブロックレベルとして表示し、新しい行で開始および終了します。

一方、’inline’は要素をインラインレベルとして表示し、テキスト内に自然に混在します。

Displayの値を覚えよう

Displayの値については、覚えておくことをおすすめします。

なぜなら設定する値により、ページのレイアウトが大きく変わってしまうからです。

以下は、CSSのdisplayプロパティで設定できる値の一覧表です。

値名	説明	設定方法の例
block	ブロックレベル要素として表示	display: block;
inline	インライン要素として表示	display: inline;
inline-block	インラインブロック要素として表示	display: inline-block;
none	非表示	display: none;
flex	フレックスコンテナとして表示	display: flex;
grid	グリッドコンテナとして表示	display: grid;
table	テーブル要素として表示	display: table;
inline-table	インラインテーブル要素として表示	display: inline-table;
table-row	テーブル行要素として表示	display: table-row;
table-cell	テーブルセル要素として表示	display: table-cell;

次のセクションで、主要なDisplayの値、’block’, ‘inline’, ‘inline-block’について詳しく見ていきましょう。

Block, Inline, Inline-blockの違い

Displayプロパティの3つの基本的な値の違いについて詳しく説明します。

これらの違いを理解することで、要素の配置やスペーシングに関するより細かい制御が可能になるでしょう。

• Display: block要素
• Display: inline要素
• Display: inline-block要素

Display: block要素

‘block’の値を持つ要素は、ブロックレベル要素として動作します。

ブロックレベル要素の特徴は以下のとおり。

1. 改行される: 通常、前後に改行が挿入され、別のブロックレベル要素が来るまで、独自の行に表示される
2. 横幅を親要素に合わせる: デフォルトで横幅を親要素に合わせ、行全体の幅を占める
3. 高さを内容に合わせない: デフォルトで内容に関係なく固定の高さを持ち、内容が多くても、少なくても、ブロックレベル要素の高さは変化しない
4. ブロック要素の前後には余白がある: ブロックレベル要素はデフォルトで上下に余白を持ち、他要素との間にスペースがある

例えば、<div>や<p>、<h1>～<h6>などの要素はデフォルトでブロックレベルです。

Display: inline要素

‘inline’の値を持つ要素は、インライン要素として動作します。

インライン要素は新しい行を作成せず、テキストや他のインライン要素の間に自然に挿入されます。

また、その幅と高さはその内容に合わせて自動的に調整されます。

例えば、<span>や<a>、<img>などの要素はデフォルトでインライン要素です。

Display: inline-block要素

‘inline-block’の値を持つ要素は、ブロック要素とインライン要素の特性を組み合わせたものです。

それは新しい行を開始せず、他のインライン要素と同じ行に配置されますが、その幅と高さを明示的に制御することが可能です。

行内に配置しつつもブロック要素と同様のスタイリングを適用できます。

FlexboxとGrid Layoutの紹介

Displayプロパティの値として、より高度なレイアウトを制御するための’flex’と’grid’があります。

これらを理解することで、より複雑なレイアウトを効率的に構築可能です。

• Display: flexの特徴
• Display: gridの特徴
• FlexboxとGridの違いと使いどころ

Display: flexの特徴

display: flex;を要素に指定すると、各要素はそれぞれ以下のようになります。

• 指定された要素：Flexコンテナ
• Flexコンテナ直下の子要素：Flexアイテム

Flexコンテナ内のFlexアイテムは、主軸（メイン軸）と交差軸（クロス軸）に沿って柔軟に配置可能。

Flexコンテナでは、子要素（Flexアイテム）のサイズ変更や配置のルールを指定するために、さまざまなプロパティを使用します。

• justify-contentプロパティ：Flexアイテムをメイン軸方向に配置する
• align-itemsプロパティ：Flexアイテムを交差軸方向に配置する

Flexboxは、柔軟なレイアウト設計を実現するための強力なツールであり、レスポンシブデザインや複雑な配置を容易におこなえます。

Display: gridの特徴

‘grid’を値とする要素は、グリッドレイアウトを提供します。

グリッドレイアウトとは、二次元（行と列）のレイアウトシステムで、要素を任意の領域に配置できるもの。

グリッドレイアウトは、ページの主要な構造を形成する大きなコンテナや、繰り返しパターンを持つ領域（例えばカードやタイルレイアウト）の作成に適しています。

FlexboxとGridの違いと使いどころ

フレックスボックスとグリッドはどちらも強力なレイアウトモデルですが、それぞれが最も効果的に機能する状況は異なります。

• フレックスボックス：一次元のレイアウトに最適で、要素間のスペースを均等に分配するような場合に最適
• グリッド：二次元のレイアウトに最適で、より複雑なデザインや正確なアラインメントを必要とする場合に有用

その他のDisplayの値

Displayプロパティには、それ以外にも幾つかの便利な値が存在します。

これらを理解することで、より幅広い状況で適切なスタイリングを適用できるようになるでしょう。

• Display: none
• Display: contents
• Displayプロパティと表の関係

Display: none

Displayプロパティの値として’none’を使用すると、要素は画面上から完全に消えます。

これは、要素を一時的に非表示にしたい場合や、特定の条件下でのみ表示したい要素がある場合に非常に役立ちます。

ただし、この値は要素を視覚的に非表示にするだけでなく、その存在自体も無視されるため、注意が必要です。

Display: contents

‘display: contents’は、要素自体のビジュアルを非表示にし、その子要素だけが表示されます。

親要素がレイアウトに影響を及ぼすことなく、そのスタイルだけを子要素に適用することが可能です。

ただし、これはまだ全てのブラウザで完全にサポートされていないため、使用する際には注意が必要です。

Displayプロパティと表の関係

Displayプロパティは、HTMLの表要素を模倣するための値も提供しています。

‘table’, ‘table-row’, ‘table-cell’などの値を使うと、通常の要素をテーブルとして動作させることが可能です。

これにより、テーブル特有のレイアウトを再現しつつ、より柔軟なスタイリングを適用できます。

アクセシビリティの考慮

Displayプロパティは視覚的なレイアウトを制御するだけでなく、ウェブサイトのアクセシビリティにも影響を及ぼす可能性があります。

特に、’none’と’contents’の値は注意が必要です。

• Display: noneとアクセシビリティ
• Display: contentsのアクセシビリティ問題
• 表とアクセシビリティの関連

Display: noneとアクセシビリティ

Display: noneを使用すると、要素は完全に非表示になります。

しかし、これはスクリーンリーダーからもその要素が隠されることを意味します。

したがって、アクセシビリティを確保するためには、このプロパティを適切に使用することが重要です。

Display: contentsのアクセシビリティ問題

Display: contentsは、要素自体を非表示にし、その子要素だけが表示されます。

しかし、現在のところ、このプロパティはスクリーンリーダーによって正しく解釈されません。

これは、要素が視覚的には存在しないものの、スクリーンリーダーはその存在を認識します。

このため、このプロパティはアクセシビリティを確保する上で注意が必要です。

表とアクセシビリティの関連

Displayプロパティの’table’関連の値を使用すると、視覚的な表レイアウトを実現できます。

ただしこれは、スクリーンリーダーに対して有用な表形式の情報を提供するというわけではありません。

表の形式で情報を提示する際には、適切なHTMLテーブル要素を使用し、アクセシビリティを確保することが重要です。

まとめ

ここまでで、Displayプロパティとその主要な値についての基本的な理解を得ることができました。

Displayプロパティは、ウェブページのレイアウトを制御するための重要なツールです。

それぞれの値が提供する特性を理解し、適切に活用することで、さまざまなデザインとレイアウトを実現できるでしょう。

さらに深い理解を得るためには、公式のCSS仕様書やその他のリソースを参照することがおすすめです。