お問い合わせ

絶対配置された要素のplace-self、align-self、justify-self

UI開発者 菅原

2025年1月のWebプラットフォームについてはテックラジオでも取り上げましたが、本Blogでは新たに追加された機能の中から、position: absoluteを適用した要素に対してplace-self、align-self、justify-selfプロパティが使用可能になったことについてご紹介します。

place-self、align-self、justify-self プロパティ自体は今までも使えましたが、新しく追加された機能は「position: absoluteで絶対配置した要素に対して使えるようになった」というものです。

しかし、この発表を見た時の個人的な感想は「今までの位置指定の方法で対応できるのでは...？」でした。

そこで、今までの方法と比較して、絶対配置された要素に対しplace-selfなどで位置指定する方法の何がいいのか？を考えてみました。

今までのposition: absoluteを使った方法

まず、今までの指定方法での例をあげます。
ここでは使う機会も多い中央配置が分かりやすいので、例として取り上げます。

※ htmlは全て同じです。

margin: autoとinset: 0を使う

margin: autoとinset: 0を使う場合の欠点は、縦横を指定しないとinset: 0によって子要素が配置される空間が親要素いっぱいに広がってしまうため、幅と高さの指定が必要なことでした。

.child {
  position: absolute;
  margin: auto;
  inset: 0;
  width: fit-content;
  height: fit-content;
}

位置指定とtransformを使う

位置指定とtransformを使う方法では、幅と高さの指定は要りませんが「上と左からの位置を指定して、子要素の縦と横の半分をマイナスして位置をずらす」という少しまわりくどい指定方法でした。

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

番外編 display: gridを使った場合

position: absoluteは使っていないのですが、最近は中央寄せで一般的なのはdisplay: gridを使った方法かと思います。子要素が1つの場合、この方法が最も簡単です。

しかし、この場合ですと、兄弟要素があった場合に影響がでてしまうため「子要素が1つの場合」に使い方が限定されます。 

.parent {
  display: grid;
  place-items: center;
}

place-selfを使った中央寄せ

place-selfを使った中央寄せは、

  • 幅と高さの指定
  • transformを使った位置調整

の2つが要らないためコードがシンプルで、直感的に配置できます。

他にもalign-selfで縦の、justify-selfで横の位置調整だけを行うことも可能ですし、中央寄せ以外の位置調整も可能です。

.child {
  position: absolute;
  inset: 0;
  place-self: center;/* place-self: end center;などで中央寄せ以外も可能 */
}

inset: 0が必要な理由は、「子要素が配置される空間の範囲を親要素いっぱいに広げるため」です。 詳しくは3.5. Absolute (and Fixed) Positioning | CSS Positioned Layout Module Level 3を参照ください。

まとめ

まだSafariでは非対応※のこの機能ですが、コード量が少なくて済む、コードが直感的という理由から全てのモダンブラウザで対応した後はこちらの方法に変更していきたいと考えています。

以上、1月のウェブプラットフォームで追加された「絶対位置の要素のCSS配置プロパティ」についてのフロントエンドBlogでした。

※place-self、align-self、justify-self自体はSafariでも使えますが、絶対配置した要素に使うことについては2025年3月18日時点では非対応です。

参考ページ

2025年の記事一覧に戻る