Place Items ショートハンドプロパティ

最終更新：2026-09-13

place-items Place Items ショートハンドプロパティ

place-items は align-items と justify-items のショートハンドです。グリッドコンテナ上で、すべてのグリッドアイテムが自分のセル内でどう整列するかを 1 つの宣言で設定します。垂直方向（align）と水平方向（justify）の両方の整列を同時に制御するため、グリッドコンテンツの中央揃えや整列に便利なツールです。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

place-items: <align-items> <justify-items>?;

⚙️ 値

値	タイプ	説明
`<align-items> / <justify-items>`	値	整列のショートハンド

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
place-items	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 単一の値を指定すると align-items と justify-items の両方に使われます。place-items: center は両方向で中央揃えになります。

ヒント： place-items はコンテナに設定され、すべてのグリッドアイテムに影響します。単一のアイテムを制御するには place-self を使います。

❓ よくある質問

Qplace-items と place-content の違いは何ですか？

Aplace-items は各グリッドアイテムが自分のセル内でどう整列するかを制御します。place-content はグリッド内容全体の領域がコンテナ内でどう整列するかを制御し、トラックの合計サイズがコンテナより小さい場合に意味を持ちます。前者はアイテムに、後者はグループに作用し、両方を同時に設定しても競合しません。トラックがすでにコンテナを埋めている場合、place-content が分配するものは何もなく、セルが内容より大きいままなので見た目に効果があるのは place-items だけです。

Qplace-items は Flexbox でも機能しますか？

Aはい。place-items は grid と flexbox の両方で有効です。flex では align-items と justify-items を同時に設定するのと等価ですが、flex アイテムはセルなしで主軸に沿って配置されるため justify-items は効果がなく、その部分は無視されます。そのため両方向を中央揃えにするには、align-items: center と justify-content: center を明示的に書く方がよく、これが一般的な flexbox の書き方で flex をサポートするすべてのブラウザで動作します。

Qplace-items: start end の 2 つの値はどちらの方向を制御しますか？

A最初の値は align-items（垂直方向）、2 番目は justify-items（水平方向）に対応します。place-items: start end はアイテムを垂直方向は上端、水平方向は右端に整列します。この順序は place-* ファミリー全体で使われる「先 align 後 justify」の規約に合致し、単一の値は常に両軸に適用されるため、place-items: center は水平垂直ともに中央揃えになります — これがグリッドコンテンツを中央揃えする最も一般的な方法です。