LINKSTORY LIBRARY(リンクストーリーライブラリー)

LINKSTORY LIBRARY(リンクストーリーライブラリー)

CATEGORY is 新人ブログ

テキスト系のCSSプロパティについて

CSSコードの画像

こんにちは、後藤です。
今日もCSSのプロパティについてブログを書きたいと思います。

 

CSSでは、コンテンツの行揃えや、垂直方向の位置揃えを調節することができます。
テキストはもちろん、画像なども調整することができます。
今回は、コンテンツの位置の揃え方を紹介します。

 

text-alignプロパティ

text-alignプロパティでは、コンテンツの行揃えを指定することができます。

 

left:左揃え

right:右揃え

center:中央揃え

justify:両端揃え

 

 

vertical-alignプロパティ

vertical-alignプロパティでは、行の中での垂直方向の位置揃えを指定することができます。

 

baseline:ベースライン

top:行の上辺

text-top:フォントの上辺

middle:フォントの小文字xの中央

text-bottom:フォントの下辺

bottom:行の下辺

 

 

ベースラインからの距離で位置揃えを調節することも可能です。

 

 

また、「上付き文字」や「下付き文字」を最適な位置に揃えて表示することも可能です。

 

super:上付き文字

sub:下付き文字

 

 

まとめ

今回は、コンテンツの行揃えや、垂直方向の位置揃えの仕方を解説しました。
ユーザーの見やすさを考えて、コンテンツの位置を揃えたいですね。

この記事を書いた人

後藤
2017年入社の新人です。 コーディングと、メディアサイトの企画・運営、SNS運用を担当しています。 コーディングに関してはまだまだ実力不足なので、早く会社の戦力になれるように日々精進しています。