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

最終更新：2026-09-13

place-self Place Self ショートハンドプロパティ

place-self は align-self と justify-self のショートハンドです。単一のグリッドアイテムが自分のセル内でどう整列するかを制御します。place-items とは異なり、place-self は個々のグリッドアイテムに設定され、コンテナレベルの place-items 設定を上書きし、1 つのアイテムに対する特別な整列ニーズに対応します。

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

📝 構文

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

⚙️ 値

値	タイプ	説明
`<align-self> / <justify-self>`	値	単一アイテム整列のショートハンド

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： place-self: center は、コンテナの place-items 設定に関わらず、単一のグリッドアイテムをセル内で中央揃えします。

ヒント： auto 値はコンテナの place-items を継承し、これがデフォルトの動作です。

❓ よくある質問

Qplace-self と place-items ではどちらの優先度が高いですか？

A優先度が高いのは place-self です。place-items はコンテナに設定されすべてのグリッドアイテムのデフォルト整列を定義しますが、place-self は単一のアイテムに設定され、そのアイテムだけに対するデフォルトを上書きするため、残りのアイテムはコンテナの動作を維持します。これは align-self/justify-self が align-items/justify-items を上書きするのと同じ規則です。

Qplace-self は一方の方向だけを上書きできますか？

Aはい。単一の値では両方向に適用されます。place-self: center はアイテムを水平垂直ともに中央揃えします。2 つの値では、最初が垂直方向（align-self）、2 番目が水平方向（justify-self）を制御するため、place-self: start end は上端＋右端の整列を意味します。place-items と同じ単一/2 値の規則が適用され、このショートハンドは align-self と justify-self の両方のキーワードセット全体を受け入れます。2 番目の値を省略すると、自動的に最初の値を取ります。

Qplace-self: auto は何を意味しますか？

Aauto は「コンテナのデフォルト設定を使う」、つまりコンテナの align-items と justify-items（これらが合わさって place-items となる）を継承することを意味します。place-self のデフォルト値は auto なので、何も設定しない場合アイテムはコンテナの整列に従います。place-self はショートハンドであるため、place-self: auto と書くと align-self と justify-self の両方を一度にリセットします。一方の軸だけリセットしたい場合は個別指定を使います。place-self: auto を明示的に書くことは設定しないことと等価で、継承された共通スタイルを上書きするために使われることがよくあります。