テキストをCSSで両端揃えにする方法｜カケウェブ | web制作会社のコーダーのコーディングブログ

今回はCSSのみでテキストを両端揃えにする方法です。
~~正直こんなク○コード書きたくないけど、どうしてもやってくれって時あるでしょう？~~

テキストを両端揃えにする

まずはベースのHTMLを用意します。

<div class="full_text">
  <span>さ</span>
  <span>ん</span>
  <span>ぷ</span>
  <span>る</span>
</div>

続いてCSS。

.full_text{
  display: flex;
  justify-content: space-between;
}

flexbox便利すぎるよね！
flexboxのプロパティで端から端まで自動で広げて横並びにしてくれる設定にするだけ！
どうしてもこの見出しは両端まで均等に配置したデザインにして欲しいとか結構無茶な要求をされた際に使えますね！

１回だけ使ったことあります・・・。

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！