[CSS] テキストは左揃えのまま要素だけ右寄せする方法（fit-content＋margin-left:auto）

Webサイト制作では、注意書きや補足テキストをコンテンツの右側に配置したい場面があります。
しかし、text-align: right; を指定すると、テキスト自体も右寄せになってしまいます。

この記事では、テキストは左寄せのまま、テキストブロックだけを右寄せしたい という場合に使える、width: fit-content; と margin-left: auto; を組み合わせた実装方法を紹介します。

実現したいレイアウト

今回実現したいのは、テキスト内容は左揃えのまま維持しつつ、テキストブロック全体をコンテンツエリアの右側へ配置するレイアウトです。

本文と視覚的に区別しやすくなるため、注意書きや補足情報の表示に適しています。

コードサンプル

HTML

CSS

CodePenデモ

See the Pen 【CSS】width: fit-content と margin-left: auto で右寄せ by mkl may (@mkl-may) on CodePen.

解説

width: fit-content の役割

通常のブロック要素は親要素いっぱいの幅（width）で表示されます。
その状態で margin-left:auto; を指定しても、要素自体が親要素いっぱいの幅で表示されるため見た目は変化しません。
そこで width: fit-content; を指定し、要素の幅をテキスト内容に合わせて縮小します。

.note {
  width: fit-content;
}

これにより、要素は必要最小限の幅になります。

margin-left: auto の役割

margin-left: auto; は、利用可能な余白を左側に押し出す指定です。

.note {
  margin-left: auto;
}

要素の左側に余白が確保されるため、結果として要素全体が右寄せになります。
Flexboxを使用しなくても、シンプルなCSSだけで右寄せレイアウトを実現できます。

注意点

margin-left: auto; は、要素幅がコンテンツサイズまで縮んでいる場合に効果が分かりやすく現れます。
そのため、通常のブロック要素のように親要素いっぱいの幅になっている場合は、見た目上の変化が分かりません。

また、親要素に Flexbox が適用されている場合は、justify-content や align-self を利用したほうが適切なケースもあります。

まとめ

テキストは左寄せのまま、テキストブロックだけを右寄せしたい場合は、以下の組み合わせがシンプルで便利です。

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

• テキストの可読性を維持できる
• 注意書きや補足情報の配置に適している
• Flexboxを使わず実装できる
• コードがシンプルで再利用しやすい

補足テキストや更新日時などを右側へ配置したい場合に活用してみてください。