Justify Self（justify-self）プロパティ

最終更新：2026-09-13

justify-self Justify Self（justify-self）プロパティ

justify-self プロパティは単一アイテムのインライン軸方向の配置を設定し、コンテナの justify-items の既定値を上書きします。主にグリッドレイアウトに適用され、フレックスボックスでは効果がありません。これにより、他のアイテムの配置に影響を与えずに、1 つのアイテムをセル内で独立して配置できます。

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

📝 構文

justify-self: auto | normal | stretch | start | end | self-start | self-end | center | left | right | baseline;

⚙️ 値

値	タイプ	説明
`auto \| normal \| stretch \| start \| end \| center \| left \| right`	キーワード	単一アイテムのインライン軸方向の配置

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
justify-self	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

注意： justify-self はフレックスボックスでは効果がありません。グリッドにのみ適用されます。フレックスレイアウトでは、単一アイテムの交叉軸方向の配置に align-self を使ってください。

ヒント： justify-self: auto はコンテナの justify-items 設定を継承します。justify-self: normal は stretch と同様に振る舞います。

❓ よくある質問

Qjustify-self と justify-items の違いは何ですか？

Ajustify-items はグリッドコンテナに設定し、すべてのグリッドアイテムの既定の水平配置を指定します。justify-self は単一のグリッドアイテムに設定し、そのアイテムの既定値を上書きします。justify-self の既定値は auto で、単にコンテナの justify-items を継承するため、未設定のアイテムは常にコンテナの既定に従います。justify-self は justify-items より優先度が高く、一部のアイテムだけをセル内で特別に配置し、残りは既定のままにしたい場合に理想的です。

Qjustify-self がフレックスボックスで機能しないのはなぜですか？

Aフレックスボックスにはグリッドセルの概念がないため、アイテムはコンテナに直接配置され、justify-self の適用対象がありません。フレックスボックスで単一アイテムを配置するには、通常 margin: auto や入れ子のフレックスコンテナを使います。たとえば justify-content: space-between と margin-left: auto を組み合わせて 1 つのアイテムを右端に押し出します。1 つのアイテムを端に押し出すだけなら、auto マージンの手法の方が簡単で、flex に対応するすべてのブラウザーで機能します。

Qjustify-self: center と margin: auto の違いは何ですか？

Ajustify-self: center は Box Alignment 仕様が提供する配置で、グリッドアイテムをセル内で水平中央揃えにします。margin: auto は auto マージンが余った空間を吸収するため同じ視覚結果になりますが、グリッドでは両側の空間も吸収するため、他の配置値と競合することがあります。justify-self は意味が明確で、2 つの軸を独立させ、start・end・stretch などのキーワードもサポートするため、グリッドレイアウト内ではこちらを推奨します。