CSS #11 テキスト関連

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「テキスト関連」のスタイルについての内容です。

こちらのhtmlにスタイルをあてていきます。

 

 

テキスト関連のプロパティ

 

text-align      行揃えの位置

text-decoration      テキストの線

line-height    行の高さ

vertical-align   縦方向の揃え位置

 

上記が主なテキスト関連のプロパティになります。

 

では一つずつ見ていきましょう。

 

 

text-align

まずはtext-alignですが、

こちらは行揃えの位置を指定するプロパティになります。

 

p要素にスタイルをあてます。

 

今回はcenterと指定していますので、
p要素の文字が中央に位置するようになります。

 

他にもleftやrightを指定することができます。

leftなら左寄り、rightなら右寄り、centerなら中央揃えになります。

 

 

 

text-decoration

次にtext-decorationは、

テキストに線を付ける事ができるプロパティです。

 

こちらもp要素にスタイルをあてます。

 

underlineと指定すると、テキストに下線が付きます。

line-throughと指定すると、打消し線を付けることが可能です。

 

 

 

line-height

次にline-heightは、行の高さを指定するプロパティです。

数値のみで指定する方法と、pxなどの単位を付けて高さを指定するできます。

 

今回はpxで指定してみます。

 

こうするとp要素の行の高さが50pxにすることができます。

 

 

 

vertical-align

次にvertical-alignは、縦方向の揃え位置を指定するプロパティになります。

デフォルトはテキストの下部分のベースラインに合わせるようになっています。

 

テキストの横に付けていた画像がずれているように見えるので、
今回は画像の位置を調整してみたいと思います。

 

 

middleを指定するといい感じに、テキストに合わせて位置を調整することができました。

 

そのベースラインに対して

topなら上揃え
middleなら中央揃え
bottomなら下揃え

などを指定できます。

 

 

 

 

 

 

 

今回は「テキスト関連」のスタイルについてやっていきました。

次回は「リスト関連」についてです。

 

ではまた次回!

 


  • このエントリーをはてなブックマークに追加
  • LINEで送る