text-alignを使った中央寄せの問題

ビューポートが狭くなり折り返しが発生する場合、見た目が不格好になってしまうことです。 そのため、メディアクエリでtext-alignをleftに戻す指定が必要になってしまいます。 レスポンシブデザインでは、よくある状況だと思います。

text-align: center;を使った、問題のあるコードの記述例があります。

.text {
  text-align: center;
}

@media (width <= {width}) {
  .text {
    text-align: left;
  }
}

fit-contentを知る

fit-contentとは、最小寸法・最大寸法がコンテンツの寸法になる指定です。 inline-blockの様に、対象の内容量に沿った寸法になります。

MDNからのfit-contentの概要の引用

width, height, min-width, min-height, max-width, max-height のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。

fit-content - CSS: カスケーディングスタイルシート | MDN

fit-content は fit-content(stretch) として動作します。実際には、ボックスは利用可能な空間を使用しますが、　max-content 以上にはならないことを意味します。

developer.mozilla.org

fit-contentの何が良いのか

text-alignでの問題点を解消することができます。 テキストの位置を変更していないので、不格好になることもありません。 文字の面位置が揃って綺麗です。

fit-contentを使ったコード

メディアクエリが無くなり、記述量も少なくなりました。 論理プロパティで記述していますが、通常のプロパティで書いても問題ありません。

inline-size: fit-content;を使った、スマートなコードの記述例があります。

.text {
 text-align: center;
}

@media (width <= {width}) {
 .text {
   text-align: left;
 }
}
.text {
  inline-size: fit-content;
  margin-inline: auto;
}

通常のプロパティを使ったコード

通常のプロパティでの書き方はこちらです。

margin-inlineを使わない、通常のコードの記述例があります。

.text {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

margin-inlineを巡る議論

margin-inlineはmargin-(left|right)と同じではありません。 書字方向における指定になるので、そのことは念頭に置いて利用するべきだと思います。

Xからの引用ツイート

前記事で要素のセンタリングにmargin-inline:auto紹介したら「margin-inlineは左右のショートハンドじゃねぇ！」ってマサカリめっちゃ飛んできたけど、そういう人に限ってアプローチは違えど同じく論理的に要素をセンタリングするjustify-content:centerに対して何も疑問を抱かないのは何でだろう🤔

MDNにmargin-inlineについて分かりやすいサンプルがあります。

margin-inline - CSS: カスケーディングスタイルシート | MDN

The margin-inline は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。

developer.mozilla.org

おわりに

fit-contentを使うと、レスポンシブデザインでよくある状況をスマートに解決することができます。 ただ、margin-inlineを合わせて使う場合は、書字方向による指定であることを念頭に置くべきだと思います。 以上になります。