CSSのplace-selfでグリッドやフレックスアイテムの配置を縦横方向に調整する方法をわかりやすく解説

place-selfプロパティは、グリッドやフレックスコンテナ内の個々のアイテムの配置を、縦方向（align-self）と横方向（justify-self）に設定するためのプロパティです。

place-selfプロパティの値とその効果の一覧

place-self: center; – アイテムをコンテナの中央に配置します。
place-self: start; – アイテムをコンテナの開始位置に配置します。
place-self: end; – アイテムをコンテナの終了位置に配置します。

注意点や関連情報

place-selfは、align-selfとjustify-selfを1つのプロパティでまとめて指定できるショートハンドです。align-selfとjustify-selfを個別に指定することも可能です。

place-selfが効かない時の原因と対策

親要素がgridまたはflexコンテナでない

place-selfは、gridやflexコンテナ内のアイテムに対して適用されるプロパティです。親要素にdisplay: gridやdisplay: flexが設定されていない場合、このプロパティは効果を発揮しません。

対策: place-selfを使用する要素の親にdisplay: gridまたはdisplay: flexを指定します。例えば、display: grid;を親要素に適用してからplace-selfを使用します。

align-selfやjustify-selfが個別に設定されている

place-selfは、align-self（縦軸）とjustify-self（横軸）をショートハンドで設定するプロパティです。個別にalign-selfやjustify-selfが設定されていると、place-selfの効果が打ち消されることがあります。

対策: place-selfを適用する際は、個別のalign-selfやjustify-selfの設定を確認し、競合がないようにします。個別設定が不要であれば削除し、place-selfに統一します。

要素がフレキシブルに配置されていない

place-selfは、フレキシブルレイアウト内で要素の位置を制御しますが、親要素がflexまたはgridレイアウトでないか、要素がフレキシブルに配置されていない場合、place-selfの効果が現れないことがあります。

対策: 親要素のレイアウト設定を確認し、必要に応じてflexやgridの設定を調整します。子要素が親要素のフレキシブルな配置に従うように設定することも重要です。

共通するCSSコード

.css-sample-container {
      display: grid;
      grid-template-rows: repeat(2, 100px);
      grid-template-columns: repeat(2, 100px);
      height: 300px;
      width: 300px;
      margin: 20px 0;
      border: 2px solid #333;
      background-color: #f0f0f0;
    }

    .css-sample-box {
      background-color: #d3e0ea;
      text-align: center;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
    }

place-self: center;

アイテムがコンテナの中央に配置されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-place-self-center">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-self-center {
      place-self: center;
    }

表示結果

place-self: start;

アイテムが開始位置（上部左側）に配置されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-place-self-start">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-self-start {
      place-self: start;
    }

表示結果

place-self: end;

アイテムが終了位置（下部右側）に配置されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-place-self-end">1</div>
      <div class="css-sample-box">2</div>
      <div class="css-sample-box">3</div>
      <div class="css-sample-box">4</div>
    </div>

CSSコード

.css-sample-place-self-end {
      place-self: end;
    }

表示結果

まとめ

place-self: center; – アイテムをコンテナの中央に配置します。
place-self: start; – アイテムをコンテナの開始位置に配置します。
place-self: end; – アイテムをコンテナの終了位置に配置します。