17個のプロパティ
テキストの色を指定するプロパティです。色名、16進数(#000000)、RGB、RGBA、HSL、HSLAなど様々な色形式で指定可能です。currentColorキーワードで親要素の色を継承することもできます。
color: #3b82f6;テキストのフォントサイズを指定するプロパティです。px、em、rem、%、vwなど様々な単位で指定可能です。レスポンシブデザインではremやvwの使用が推奨され、アクセシビリティの観点からも重要なプロパティです。
font-size: 16px;フォントの太さを指定するプロパティです。100から900までの数値、またはnormal、bold、lighter、bolderなどのキーワードで指定できます。可読性やデザイン上の強調表現に重要な役割を果たします。
font-weight: 400;行の高さ(行間)を指定するプロパティです。数値(推奨)、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。
line-height: 1.6;文字間のスペース(字間)を指定するプロパティです。pxやemで指定し、可読性やデザイン調整に使われます。見出しでは広めに、本文では狭めに設定することが一般的です。
letter-spacing: 0.1em;テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。
text-align: left;テキストの装飾(下線、上線、取り消し線など)を指定するプロパティです。underline、overline、line-through、noneなどの値があり、リンクやテキストの強調に使用されます。色やスタイルも個別に指定可能です。
text-decoration: underline;要素内の空白文字の処理方法を指定するプロパティです。normal、nowrap、pre、pre-wrapなどがあり、改行やスペースの扱いを制御します。コードブロックの表示やテキストの折り返し制御に重要です。
white-space: nowrap;要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis(...)で省略表示したり、clip(切り取り)したりできます。white-space: nowrapやoverflowと組み合わせて使用します。
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。
word-break: break-all;テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。
.vertical-text {
writing-mode: vertical-rl;
height: 200px;
width: 100px;
}テキスト入力時のカーソル(キャレット)の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。
caret-color: red;インライン要素やテーブルセルの縦方向の配置を指定するプロパティです。baseline、top、middle、bottom等の値があり、テキストと画像の位置調整に使用します。ブロック要素には効きません。
vertical-align: middle;テキストの大文字・小文字を変換するプロパティです。uppercase(全て大文字)、lowercase(全て小文字)、capitalize(各単語の先頭を大文字)などがあり、HTMLを変更せずに表示を制御できます。
text-transform: uppercase;テキストの折り返し方法を制御するプロパティです。balanceで見出しの各行の長さを揃え、prettyで段落末尾の孤立した単語(1文字だけの行など)を防げます。日本語の見出しの不格好な改行対策にも有効です。
h1, h2, h3 {
text-wrap: balance;
}長い単語やURLが要素からはみ出す場合にのみ、単語の途中で折り返すことを許可するプロパティです。通常の単語間折り返しを保ちながら「はみ出すときだけ」強制改行するため、word-breakより安全な折り返し手段です。
.comment-body {
overflow-wrap: break-word;
}日本語の約物(括弧・句読点など)が持つ余分な空きを自動調整するプロパティです。「(」の前や連続する約物「)。」の間の空きを詰めて、組版ソフトのような美しい日本語テキストをWebで実現します。
body {
text-spacing-trim: trim-start;
}