Documentation CSS

この記事で学べること

  • displayプロパティの概念と目的
  • block、inline、inline-blockの違い
  • flexboxレイアウトの基本
  • gridレイアウトの基本
  • 要素の表示/非表示の制御

概要

CSSのdisplayプロパティは、要素の表示方法を指定するための重要なプロパティで、ウェブページのレイアウトを制御する役割を果たします。displayを使うことで、要素をブロックレベルやインラインレベル、またはフレックスやグリッドレイアウトに変換することができ、柔軟なデザインを実現します。この記事では、displayプロパティの主要な値やその使用方法、実際のレイアウト調整に役立つ具体例について詳しく解説します。

基本的な使い方

displayの基本構文

.selector {
  display: 値;
}

主な値の種類とその説明

  • block
    要素をブロックレベル要素に設定します。幅は親要素に対して最大限広がり、上下のマージンが有効になります。
  • inline
    要素をインライン要素に設定します。幅はコンテンツに合わせて決まり、横方向に並びます。上下のマージンは無視されます。
  • inline-block
    インライン要素のように横並びになりつつ、ブロック要素のように幅と高さを持つことができます。
  • flex
    フレックスボックスレイアウトを使用し、要素を1次元の行または列で柔軟に配置します。子要素の配置や並び順を簡単にコントロールできます。
  • grid
    グリッドレイアウトを使用し、要素を2次元の行と列に配置します。複雑なレイアウトが簡単に実現可能です。
  • none
    要素を非表示にし、ページのレイアウトからも完全に除外します。

使用例

基本的な使用例 - blockとinline

以下の例では、blockとinlineの違いを示します。

.block-element {
  display: block;
  width: 100%;
  background-color: #f0f0f0;
}
.inline-element {
  display: inline;
  background-color: #c0c0f0;
}
  • .block-elementはブロック要素として幅を全て占有し、上下に並びます。
  • .inline-elementはインライン要素として横に並び、幅はコンテンツの幅に応じます。

インラインとブロックのいいとこ取り - inline-block

inline-blockを使用すると、要素をインラインで並べながらも、幅と高さの指定が可能です。

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: #a0c0d0;
  margin: 5px;
}

この設定により、要素が横に並びながら、ブロック要素のようなレイアウトコントロールが可能になります。

フレックスレイアウト - flex

display: flexを使用すると、要素を柔軟に並べることができます。以下は横並びのレイアウトの例です。

.flex-container {
  display: flex;
  gap: 10px;
}
.flex-item {
  background-color: #d0d0d0;
  padding: 20px;
  flex: 1;
}
  • .flex-containerは子要素を横に並べ、gapで間隔を設定します。
  • .flex-itemは同じ幅で伸縮し、フレックスレイアウトによるレスポンシブな配置が可能です。

グリッドレイアウト - grid

display: gridを使用すると、複雑な2次元レイアウトが容易に作成できます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background-color: #b0e0e6;
  padding: 20px;
}
  • .grid-containerは3列のグリッドを作成し、各列は等しい幅で配置されます。
  • .grid-itemは指定した位置に配置され、自由にレイアウトを調整できます。

要素を非表示にする - none

display: noneは、要素をページから完全に削除するのと同等の効果があります。

.hidden {
  display: none;
}

この設定により、.hiddenクラスが付与された要素は、画面上に表示されず、DOMツリーからも除外されます。

よくある問題と対策

フレックスとグリッドの使い分け

  • flexの使いどころ
    単純な1次元の並び（行または列）で要素を配置したい場合に適しています。メニューやナビゲーション、ボタンの配置などに便利です。
  • gridの使いどころ
    複雑な2次元のレイアウト（行と列）を作成したい場合に適しています。ウェブページ全体のレイアウトやカードレイアウトに最適です。

inline-blockとflexの違い

  • inline-blockは古いブラウザでもサポートされていますが、フレックスのような高度な配置コントロールはできません。
  • flexは高度な配置制御ができ、要素の並び順や伸縮性をコントロールしやすいのが特徴です。

レイアウト崩れの対策

displayプロパティを使うとき、他のプロパティ（marginやpadding）との相性やフロート（float）との併用に注意が必要です。レイアウトが崩れる原因としては、要素同士の重なりやサイズ指定の不一致などが考えられます。

まとめ

displayプロパティは、要素の表示方法を指定し、ウェブページのレイアウトを大きく左右する重要なCSSプロパティです。block、inline、flex、gridなど、用途に応じて使い分けることで、柔軟で見やすいレイアウトを実現できます。特にflexとgridは、現代のウェブデザインにおいて不可欠なツールであり、レイアウトを効率よく調整するために欠かせない存在です。

ポイントの振り返り

値説明使用例
blockブロック要素div、section
inlineインライン要素span、a
inline-blockインライン＋ブロックボタン、バッジ
flex1次元レイアウトナビゲーション
grid2次元レイアウトページレイアウト
none非表示要素の削除

関連プロパティ

プロパティ説明
visibility可視性の制御
flex-directionフレックス方向
grid-template-columnsグリッド列定義

参考文献

円