最近便利なCSSおれおれAdvent Calendar 2023 – 05 日目

inset というのがあって、top 、right 、bottom 、left を一括で指定できます。

画面全体を覆う表示を作るのに便利です。

使用例

上下左右いっぱいまで広げるときは inset: 0 にします。

.Dialog {
  inset: 0;
  position: fixed;
}

上下左右中央寄せするときは inset: 0 と margin: auto を組み合わせます。

.Dialog-window {
  inset: 0;
  margin: auto;
  position: absolute;
}

子を上下左右中央寄せするなら place-items

ちなみに自身ではなく子を上下左右中央寄せにするには place-items が便利です。

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

その他

inset() というのも

あるらしい。

使ったことないです。

ダイアログ用途には <dialog>

ところで本編とはあんまり関係ないんですが、ダイアログ UI が欲しいときは <dialog> 要素が便利です。API なんかも用意されて良い感じ。

おしまい

おしゃれな読み込み中表示、どうやったら作れるのか謎。

ところで CSS じゃないけど <dialog> べんりなのでおすすめです。<popover> も楽しみにしてます。