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

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

引く

レイアウト・配置

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

Example

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

レイアウト・配置

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

Example

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

レイアウト・配置

要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。

Example

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

アニメーション・エフェクト

CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。

Example

transition: all 0.3s ease;

背景・装飾

要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。

Example

border-radius: 0px;

スペーシング・サイズ

FlexboxやGridで要素間の間隔を指定するプロパティです。row-gap（行間）とcolumn-gap（列間）を一括で指定でき、marginより直感的で管理しやすいです。レスポンシブなレイアウトの余白調整に最適です。

Example

.flex-container {
  display: flex;
  gap: 1rem;
}