こんにちは、Mochiです。
CSSで文字をどうやって装飾するんだろう？テキストの装飾であのプロパティが思い出せない…🤔
そんな方に向けて、CSSで文字を装飾するプロパティの種類と値による装飾の変化をわかりやすくまとめ、解説します。学んでいきましょう！
🎗️文字やテキストを装飾するプロパティ
今回紹介する文字やテキストを装飾するプロパティは
- font-size: 文字の大きさ
- font-family: フォントの種類
- font-weight: 文字の太さ
- font-style: 文字のスタイル
- font-transform: 大文字と小文字の変換
- line-height: 行の高さ
- text-align: 文字の整える位置
です。それぞれ見ていきましょう！
font-size：文字の大きさ
font-sizeプロパティを使うことで文字の大きさを変更できます。書き方のルールは
selector {font-size: value;}となります。
値(value)は数値かキーワードを指定します。
- 数値：３つの単位を使って指定できます。
- px：画面上の最小単位（ピクセル）を基準とする
- %：親要素のサイズを基準にした割合
- rem：ルート要素に指定されたサイズを基準とする
- キーワード
- xx-small
- x-small
- small
- medium：標準サイズ
- large
- x-large
- xx-large
例えば段落の文字を18pxの大きさにする場合は
p {font-size: 18px;}のように書きます。
実際の指定した値やキーワードによる変化をまとめます。
font-family：フォントの種類
font-familyプロパティを使うことでフォントの種類を変更できます。ただし、自分が指定したフォントをユーザが持っていない場合には、ブラウザーのデフォルトのフォントが適用されます。
書き方のルールは
selector {font-family: value;}となります。
値(value)はフォント名かキーワードを指定します。
- フォント名
- 日本語やスペースが含まれる場合はダブルクオーテーション”かシングルクオーテーション’で囲みます
- 例
- YuMincho
- “Lucida Grande”
- キーワード
- sans-serif: ゴシック体
- serif: 明朝体
- cursive: 筆記体
- monospace: 等幅
- fantasy: 装飾体
また、複数のフォントを指定することも可能です。左を先頭として、もしフォントをユーザが持っていない場合は右のフォントを順に適用していきます。
例えば段落のフォントを明朝体(serif)にし、明朝体がない場合はゴシック体(sans-serif)にする場合
p {font-family: serif, sans-serif;}のように書きます。
実際に指定したフォントによる変化例をまとめます。
font-weight：文字の太さ
font-weightプロパティを使うことで文字の太さを変更できます。
書き方のルールは
selector {font-weight: value;}となります。
値(value)は数値かキーワードを指定します。
- 数値
- 1~1000の値
- キーワード
- normal: 通常の太さ（デフォルト）
- bold: 太字
- lighter: 1段階細くする
- bolder: 1段階太くする
例えば段落を太字にする場合
p {font-weight: bold;}のように書きます。
実際に指定した数値やキーワードによる変化例をまとめます。
font-style：文字のスタイル
font-styleプロパティを使うことで文字のスタイルを変更できます。
書き方のルールは
selector {font-style: value;}となります。
値(value)はキーワードを指定します。
- キーワード
- normal: 通常のスタイル（デフォルト）
- italic: 斜体
- oblique: 斜めに傾ける
文字を斜体にする場合は、フォント自体が斜体を持っている場合に有効です。また、italicとobliqueはほぼ同じのように感じますが、obliqueではフォントによって準備されている場合は角度を指定することができます。
例えば段落を10度斜めに傾ける場合
p {font-style: oblique 10deg;}のように書きます。
実際に指定したスタイルによる変化例をまとめます。
text-transform：大文字と小文字の変換
text-transformプロパティを使うことで大文字と小文字を変換できます。
書き方のルールは
selector {text-transform: value;}となります。
値(value)はキーワードを指定します。
- キーワード
- none: 変換しない（デフォルト）
- uppercase: 全て大文字
- lowercase: 全て小文字
- capitalize: 先頭の文字のみを大文字にする
例えば段落の文字を全て大文字にする場合
p {text-transform: uppercase;}
のように書きます。
実際に指定したキーワードによる変化例をまとめます。
line-height：行の高さ
line-heightプロパティを使うことで行の高さ（行間）を変更できます。
書き方のルールは
selector {line-height: value;}となります。
値(value)はキーワードか数値を指定します。
キーワード
- normal: ブラウザーの基準の行間（デフォルト）
- inherit: 親要素のline-heightの値を継承する
数値
- 倍率
- ３つの単位を使った表示
- px：画面上の最小単位（ピクセル）を基準とする
- %：親要素のサイズを基準にした割合
- rem：ルート要素に指定されたサイズを基準とする
例えば段落の行間をブラウザーの基準の1.5倍にする場合
p {line-height: 1.5;}のように書きます。
実際に指定したキーワードや数値による変化例をまとめます。
text-align：文字の揃える位置
text-alignプロパティを使うことで文字の揃える位置を変更できます。
書き方のルールは
selector {text-align: value;}となります。
値(value)はキーワードを指定します。
- キーワード
- center: 中央揃え
- left: 左揃え
- right: 右揃え
- justify: 両端揃え
例えば段落を中央揃えにする場合
p {text-align: center;}のように書きます。
実際に指定したキーワードによる変化例をまとめます。
🎉まとめ
テキストを装飾する7つのプロパティを解説しました。みなさんは文字の大きさや太さなどを変えることができるようになり、また一歩スキルアップしました。素晴らしいです👏
テキストはWebサイトのにも大きく関わる内容で、今回解説したものはどれも重要なプロパティです。また、値はたくさんあったため全てを記憶する必要はないです。ぜひ何度もこのサイトを見返して、思い返してください！
