CSS Dictionary

CSSプロパティを効率的に学習しよう！

人気のプロパティ

display

レイアウト・配置

要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。

コード例

display: flex;

関連: flex-direction, justify-content...

display: flex

レイアウト・配置

要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。

コード例

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

関連: flex-direction, justify-content...

display: grid

レイアウト・配置

要素をグリッドコンテナに変換し、子要素（グリッドアイテム）を2次元レイアウト（行と列）で配置できるプロパティです。複雑なレイアウトを直感的に実現でき、レスポンシブデザインにも最適です。

コード例

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

関連: grid-template-columns, grid-template-rows...

order

レイアウト・配置

フレックスアイテムの表示順序を変更するプロパティです。HTMLの記述順序を変えずに、視覚的な並び順だけを調整できます。アクセシビリティを保ちながらレスポンシブデザインに対応できます。

コード例

.first {
  order: 1;
}
.second {
  order: 3;
}
.third {
  order: 2;
}

@container

レスポンシブ・関数

コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。

コード例

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

container-type

レイアウト・配置

要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。

コード例

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card-title {
    font-size: 1.5rem;
  }
}