調べる、書ける、確かめる。

AIと協働する開発者のための日本語CSSリファレンス— 全127項目

モダンCSS — あなたのAIが知らないかもしれない新機能

:has()・ネスティング・View Transitions など2022年以降の新しいCSS

人気のプロパティ

display

レイアウト・配置

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

Example

display: flex;

display: flex

レイアウト・配置

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

Example

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

display: grid

レイアウト・配置

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

Example

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

order

レイアウト・配置

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

Example

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

@container

レスポンシブ・関数

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

Example

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

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

container-type

レイアウト・配置

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

Example

container-type: inline-size;