CSS テキスト制御プロパティ

📢 この記事は gemini-2.5-flash によって翻訳されました

テキスト制御プロパティで設定できる内容はこんな感じだよ。

名前	プロパティ
フォントサイズ	font-size
フォントの太さ	font-weight
フォントの傾き	font-style
行の高さ	line-height
フォントファミリー	font-family
フォント複合プロパティ	font
テキストインデント	text-indent
テキスト配置	text-align
装飾線	text-decoration
色	color

フォントサイズ

プロパティ値は文字のサイズだよ。単位は通常 px を使うね。

1
2
3
p {
    font-size: 30px;
}

フォントの太さ

プロパティ値は数値かキーワードだよ。

1
2
3
4
5
6
7
8
p {
    font-weight: 400; /* 文字を通常にする */
    /* font-weight: normal; */
}
div {
    font-weight: 700; /* 文字を太字にする */
    /* font-weight: bold; */
}

フォントの傾き

これは通常、文字のデフォルトの傾き効果を消したいときに使うよ。

1
2
3
4
5
6
em {
    font-style: normal; /* em タグの傾き効果を削除する */
}
p {
    font-style: italic; /* p タグ内の文字を傾ける */
}

行の高さ

複数行のテキストの間隔を設定するんだ。プロパティ値は2種類あるよ。

1
2
3
4
5
6
P {
    line-height: 30px; /* 行の高さは 30px */
}
div {
    line-height: 2; /* 行の高さは font-size の2倍 (font-size はデフォルトで 16px だよ) */
}

行の高さは、テキストの高さ + 上余白 + 下余白のことだよ。

行の高さのプロパティ値がボックス (div) の高さのプロパティ値と同じだと、垂直方向の中央揃えができるよ。

1
2
3
4
div {
    line-height: 100px;
    height: 100px;
}

フォントファミリー

文字のフォントを制御するもので、プロパティ値はフォント名だよ。

1
2
3
p {
    font-family: 楷体;
}

普通は複数設定するんだ。

1
2
3
p {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

実行順序は左から右だよ。つまり、ブラウザはシステムに現在のフォントがあるか確認して、なければ次のフォントを、という感じで最後のフォントまで見ていくんだ。上記の最後のものは、サンセリフフォント のフォントファミリー名だね。

font 複合プロパティ

開発でフォントを設定するとき、こんな状況があるよね。

1
2
3
4
5
6
7
div {
    font-style: italic; /* 文字を傾ける */
    font-weight: 700; /* 文字を太字にする */
    font-size: 30px; /* フォントサイズは 30px */
    line-height: 2; /* 行の高さは字号の 2 倍 */
    font-family: 楷体; /* フォントを設定する */
}

こんな風に省略できるよ。

1
2
3
4
div {
    font: italic 700 30px/2 楷体;
    /* 傾き 太さ 字号/行の高さ フォント */
}

このプロパティは、ウェブページの文字の共通スタイルを設定するときによく使うね。プロパティ値は順番通りに書く必要があって、その中でも字号（フォントサイズ）とフォントの値は必須だけど、他は省略できるよ。

テキストインデント

プロパティ値は px か em の2種類だよ。em は現在のタグのフォントサイズのことだね。

1
2
3
4
5
p {
    font-size: 20px;
    text-indent: 2em; /* 最初の行を2文字分インデントする */
    /* text-indent: 40px; 上の行のコードと同じ効果だよ */
}

テキストの配置方法

text-align プロパティには left、center、right の3つの値があるんだ。

1
2
3
div {
    text-align: center; /* 文字を中央揃えにする */
}

このプロパティは文字の配置だけでなく、例えば次のように使うと画像を中央揃えにできるよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
    <head>
        <title></title>
        <style>
            div {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="path" />
        </div>
    </body>
</html>

text-align の本質はコンテンツの配置を制御することなんだ。プロパティはコンテンツの親要素に設定するんだよ。上の例では img の親は div だね。

テキスト装飾線

効果	なし	下線	打ち消し線	上線
プロパティ値	none	underline	line-through	overline

1
2
3
4
5
6
a {
    text-decoration: none; /* リンクの下線を削除する */
}
del {
    text-decoration: none; /* del タグの打ち消し線を削除して、del タグを無効にする */
}

文字の色

色の表現方法	プロパティ値	説明
キーワード	英単語	red、green、aqua など
rgb 表現	rgb(r, g, b)	r, g, b は赤緑青の3原色を表すよ。値は 0-255 だね。
rgba 表現	rgba(r, g, b, a)	a は透明度を表すよ。値は 0 から 1 だね。
16進数表現	#RRGGBB	2つずつで1組。同じ場合は省略できるよ。#ffcc00 -> #fc0

1
2
3
4
5
6
p {
    color: rgba(250, 200, 0, 0.5);
}
div {
    dolor: #acf; /* #aaccff と同じだよ */
}