概要

CSSのjustify-selfプロパティは、グリッドやフレックスボックスのアイテムを個別に水平配置するためのプロパティです。これにより、グリッド内の各アイテムがどの位置に配置されるかを柔軟に調整できます。例えば、特定のアイテムだけを中央に寄せたり、右端に寄せたりといった細かいコントロールが可能になります。

justify-selfの基本的な使い方

justify-selfプロパティは、グリッドやフレックスボックスのアイテムに直接適用し、水平配置を設定します。グリッドコンテナ全体ではなく、個々のアイテムに対して適用される点がjustify-itemsと異なります。

.item {
    justify-self: center; /* アイテムを中央に配置 */
}

この例では、.itemクラスが適用されたアイテムだけが中央に配置されます。

justify-selfの値

justify-selfには以下の値を指定できます。それぞれの値の使い方と配置の効果について解説します。

start

アイテムをコンテナの開始位置（左端）に配置します。

.item {
    justify-self: start;
}

end

アイテムをコンテナの終了位置（右端）に配置します。

.item {
    justify-self: end;
}

center

アイテムをコンテナの中央に配置します。

.item {
    justify-self: center;
}

stretch

アイテムを可能な限りコンテナ内に広げて配置します。デフォルトの値です。

.item {
    justify-self: stretch;
}

使用例

特定のアイテムを中央に配置

justify-selfを使って特定のアイテムだけを中央に配置する方法です。

<div class="container">
    <div class="item">1</div>
    <div class="item special">2</div>
    <div class="item">3</div>
</div>
<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
}
.item {
    background-color: lightblue;
    padding: 20px;
    border: 1px solid #ccc;
}
.special {
    justify-self: center; /* このアイテムだけ中央に配置 */
}
</style>

左寄せと右寄せの使い分け

異なるアイテムに異なる配置を指定できます。

<div class="container">
    <div class="item left">左寄せ</div>
    <div class="item right">右寄せ</div>
</div>
<style>
.container {
    display: grid;
    grid-template-columns: repeat(2, 150px);
}
.left {
    justify-self: start; /* 左寄せ */
}
.right {
    justify-self: end; /* 右寄せ */
}
</style>

stretchでアイテムを引き伸ばす

justify-self: stretch;を使用してアイテムを引き伸ばし、グリッドセルの幅いっぱいに配置します。

<div class="container">
    <div class="item">アイテム1</div>
    <div class="item stretch">アイテム2</div>
</div>
<style>
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.item {
    background-color: lightgreen;
    padding: 20px;
    border: 1px solid #ccc;
}
.stretch {
    justify-self: stretch; /* グリッドセルの幅いっぱいに引き伸ばす */
}
</style>

注意点

• justify-selfは主にグリッドレイアウトで使用され、フレックスボックスでは一部の状況でのみ効果があります。
• グリッドのアイテムにのみ適用され、親コンテナの配置には影響しません。コンテナ全体の配置をコントロールしたい場合は、justify-itemsを使用します。
• align-selfと組み合わせることで、垂直方向の配置も個別にコントロールできます。

まとめ

justify-selfプロパティは、CSSグリッドやフレックスボックスにおいて、アイテムの水平配置を個別に調整するための強力なツールです。このプロパティを使うことで、より柔軟で精密なレイアウトを実現できます。特定のアイテムだけを異なる位置に配置したい場合に役立つため、グリッドやフレックスボックスを活用する際はぜひ取り入れてみてください。