CSS PR

CSSだけでテキストを均等に両端揃えで配置する方法

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

テキストでを端から端まで均等に配置してくれって言われたときの対処方法を紹介します。
今回はspanを多用するので、決してコードがきれいとは言えません。
spanで線を作ってハンバーガーメニューを作るとかが好きじゃないのでこのやり方自体もあんまり好きじゃない(

ただデザイン上仕方なくやらないといけないこともあるので、覚えておくといずれ役に立つかもしれません。
ではいってみよう!

CSSだけでテキストを均等に両端揃えで配置する方法

まずはHTMLを用意しましょう。
今回「CSSだけでテキストを均等に両端揃えで配置する」のは、「span」の部分です。

 

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

 

続いてCSSを書いていきます。
今回はflexboxでspanを両端に配置し、間を均等にしてくれる「justify-content: space-between」を設定します。

[css]
.full_text{
display: flex;
justify-content: space-between;
}
[/css]

コレで完成!
floatでは、なかなか難しいですが、flexboxならこういう配置も簡単ですね。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

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

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