display:block;が絶対条件の中で、文字の長さが変わっても自動で横幅が変わってくれるボタン

デザインパーツをコンポーネント化する場合、できるだけ要素はひとつで完結したい。

中央寄せのボタンのパーツを作る場合、インライン系だとどうしても親要素が必要になってくるのでdisplay:block;は外せないが、文字の大きさに合わせてボタンの大きさやpaddingはちょうどいい感じにしたい場合がある。

説明せずとも display:block; をつけるとその要素の横幅は外のブロックと同じになるまで広がろうとするのでwidthを使うことになるが、値を決め打ちできればいいけれど、文字数によって変わるようにしたい。

そんな時に便利なのが width:max-content;

内容量によって横幅が自動で変わってくれる。

百聞は一見に如かず。

.btn {
  display: block;
  padding: 10px 20px;
  background-color: #efefef;
  border: 1px solid #ccc;
  border-radius: 9999px;
  text-align: center;
  width: max-content;
  min-width: 200px;
  max-width: 90%;
  margin-inline: auto;
}

こんな感じ。

「ボタン」みたいに三文字で短い場合に小さくなり過ぎないようにmin-widthを設定したり、スマホの時などに親要素をはみ出したりしないようにmax-widthも指定する。

margin-inline: auto; で中央寄せにするかどうかは設計次第。基本的には付けないのが無難。

あとは文字サイズとかも可変させたりするけれど、それはまた別のお話しなので別のclassをつけた方がいいかと思う。