takato（@n8takato）です！
cssでテキストの両端を揃えたい
この記事は上記の課題に向けて作成しています。
cssではテキストの両端を簡単に揃えることが出来ます。
web制作を学んでいる方は是非参考にしてみてください。
この記事を読むメリット
- テキストの両端を揃えるcssコードがわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
CSSでテキストの両端を揃える方法
早速cssでテキストの両端を揃える方法を説明します。
テキストの両端揃えに使用するcssは下記のコードです。
cssコード
text-align: justify;例えば下記のような文章があるとします。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
上記のクラスに下記のcssコードを追加すると両端が揃うようになります。
text-align: justify;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
このように両端を揃えることが出来ます。
※今回は違いがわかるように英文にしましたが、日本語文にも適応しますので大丈夫です。
テキストの両端揃えは簡単！
最後にまとめです。
テキストの両端を揃えるcssは下記のコードです。
text-align: justify;この一行を追加するだけで簡単に両端揃え出来ます。
知らなかった方は是非実践してみてください。
