CSS PR

テキストをCSSで両端揃えにする方法

記事内に商品プロモーションを含む場合があります

今回は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のプロパティで端から端まで自動で広げて横並びにしてくれる設定にするだけ!
どうしてもこの見出しは両端まで均等に配置したデザインにして欲しいとか結構無茶な要求をされた際に使えますね!

 

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

 

 

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

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。