クイックCSS早見表(text)

よく使うテキストデザインを整えるCSSのコードをまとめました。

文字線(text-decoration)

CSS

 

説明 サンプル
none 文字線なし

サンプル

underline 下線

サンプル

overline 上線

サンプル

line-through 打ち消し線

サンプル

 

文字の横位置(text-align)

CSS

 

説明 サンプル
left 左寄せ

サンプル

right 右寄せ

サンプル

center 中央寄せ

サンプル

justify 均等割付

サンプル

 

文字の縦位置(vertical-align)

CSS

 

説明 サンプル
baseline 親要素のベースライン揃え

サンプル

top 上寄せ

サンプル

middle 中央寄せ

サンプル

bottom 下寄せ

サンプル

text-top テキストの上寄せ

サンプル

text-bottom テキストの下寄せ

サンプル

super 上付き文字

サンプル

sub 下付き文字

サンプル

% パーセントで位置指定する

サンプル

px,em 値で位置指定する

サンプル

 

文字の影(text-shadow)

CSS

 

説明 サンプル
none エフェクトなし

サンプル

px text-shadow:水平距離 垂直距離 半径 の形式で指定

サンプル

#カラーコード text-shadow:水平距離 垂直距離 半径 #カラーコード の形式で指定

サンプル

 

 

おすすめの記事