こんにちは！
UPSTARTSのSベンです！
今回は「テキスト関連」のスタイルについての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 |
<body> <p>トニートニー</p> <div> チョッパー<img src="chopper.jpg" width="20"> </div> </body> |
テキスト関連のプロパティ
text-align 行揃えの位置
text-decoration テキストの線
line-height 行の高さ
vertical-align 縦方向の揃え位置
上記が主なテキスト関連のプロパティになります。
では一つずつ見ていきましょう。
text-align
まずはtext-alignですが、
こちらは行揃えの位置を指定するプロパティになります。
p要素にスタイルをあてます。
|
1 2 3 |
p { text-align: center; } |
今回はcenterと指定していますので、
p要素の文字が中央に位置するようになります。
他にもleftやrightを指定することができます。
leftなら左寄り、rightなら右寄り、centerなら中央揃えになります。
text-decoration
次にtext-decorationは、
テキストに線を付ける事ができるプロパティです。
こちらもp要素にスタイルをあてます。
|
1 2 3 |
p { text-decoration: underline; } |
underlineと指定すると、テキストに下線が付きます。
line-throughと指定すると、打消し線を付けることが可能です。
line-height
次にline-heightは、行の高さを指定するプロパティです。
数値のみで指定する方法と、pxなどの単位を付けて高さを指定するできます。
今回はpxで指定してみます。
|
1 2 3 |
p { line-height: 50px; } |
こうするとp要素の行の高さが50pxにすることができます。
vertical-align
次にvertical-alignは、縦方向の揃え位置を指定するプロパティになります。
デフォルトはテキストの下部分のベースラインに合わせるようになっています。
テキストの横に付けていた画像がずれているように見えるので、
今回は画像の位置を調整してみたいと思います。
|
1 2 3 |
img { vertical-align: middle; } |
middleを指定するといい感じに、テキストに合わせて位置を調整することができました。
そのベースラインに対して
topなら上揃え
middleなら中央揃え
bottomなら下揃え
などを指定できます。
今回は「テキスト関連」のスタイルについてやっていきました。
次回は「リスト関連」についてです。
ではまた次回！
