CSS

テキストを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回だけ使ったことあります・・・。

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)