【HTML・CSS】テキストが1行なら中央揃え、2行になったら自動で左寄せさせる方法

中央揃えしたテキストが改行すると読みづらくなる問題

セクションのタイトルなどで、テキストを中央揃えしてスタイリッシュに見せる手法は頻繁に使われますね。

しかしこのレイアウト、横幅が狭いデバイスやブラウザの画面を狭くして閲覧するとテキストが改行してしまい不格好 & 読みづらくなってしまう弱点があります。

ブレイクポイントを指定してtext-align: left;に切り替えようにも、テキストの長さによって改行するポイントが異なるので完全対応は難しいですよね。

ということで、今回はこういった問題をサクッと解決してくれる便利なテクニックをご紹介します。

先に完成形を確認してからコードの記述と解説をみていきましょう。

改行すると左寄せに変わります。改行すると左寄せに変わります。

短いテキストは中央のまま

サイズ変更のツマミはココ ↑

上のウィンドウ右下にあるツマミをドラッグしながら、ウィンドウの横幅を狭くしたり広くしたり変えてみてください。

テキストが1行で表示されている場合は中央揃え、2行になると左寄せに変わることを確認いただけるかと思います。

上記の動きを実装するためのサンプルコードは以下の通りです。

HTML (.html)

<p class="target">改行すると左寄せに変わります。改行すると左寄せに変わります。</p>
 <p class="target">短いテキスト</p>

CSS (.css)

  .target {
    max-inline-size: max-content;
    margin-inline: auto;
    font-size: 18px;
  }

ポイントはCSSの2・3行目で.targetに指定している max-inline-size と margin-inline という2つのプロパティです。

max-inline-size は要素の最大サイズを指定するプロパティです。
max-inline-size: max-content;で要素の最大サイズをコンテンツの幅（テキストがある領域）に定義しています。

margin-inline は論理プロパティと呼ばれるもので、詳しくは割愛しますがmargin-leftやmargin-rightと似た働きをするプロパティです。
margin-inline: auto;はmargin: 0 auto;のように要素を中央揃えする働きがあります。

margin: 0 auto;でも今回の狙いと同じ動作をしますが、せっかくなのでモダンな書き方であるmargin-inline: auto;で覚えちゃいましょう！

margin-inline: auto;やmargin: 0 auto;でブロック要素を中央揃えするためには、通常であればブロック要素に明確なwidthを指定しなければならないところを…

今回はmax-inline-size: max-content;で「width = コンテンツの幅」と指定しているので、テキストが改行するまでは中央揃え、改行したら（width: 100%;になったら）左寄せになる！

というテクニックになっています。

今回ご紹介したmax-inline-size: max-content;とmargin-inline: auto;はテキストが入っているブロック要素に”直接”指定しましょう。

text-alignの感覚で親要素に指定すると、親要素内にある最長のテキストに合わせてwidthが指定されるため、同要素内にある短い文章などは左寄せになってしまいます。