テキスト・フォント

14個のプロパティ

color

テキスト・フォント

テキストの色を指定するプロパティです。色名、16進数(#000000)、RGB、RGBA、HSL、HSLAなど様々な色形式で指定可能です。currentColorキーワードで親要素の色を継承することもできます。

コード例
color: #3b82f6;

font-size

テキスト・フォント

テキストのフォントサイズを指定するプロパティです。px、em、rem、%、vwなど様々な単位で指定可能です。レスポンシブデザインではremやvwの使用が推奨され、アクセシビリティの観点からも重要なプロパティです。

コード例
font-size: 16px;

font-weight

テキスト・フォント

フォントの太さを指定するプロパティです。100から900までの数値、またはnormal、bold、lighter、bolderなどのキーワードで指定できます。可読性やデザイン上の強調表現に重要な役割を果たします。

コード例
font-weight: 400;

line-height

テキスト・フォント

行の高さ(行間)を指定するプロパティです。数値(推奨)、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。

コード例
line-height: 1.6;

letter-spacing

テキスト・フォント

文字間のスペース(字間)を指定するプロパティです。pxやemで指定し、可読性やデザイン調整に使われます。見出しでは広めに、本文では狭めに設定することが一般的です。

コード例
letter-spacing: 0.1em;

text-align

テキスト・フォント

テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。

コード例
text-align: left;

text-decoration

テキスト・フォント

テキストの装飾(下線、上線、取り消し線など)を指定するプロパティです。underline、overline、line-through、noneなどの値があり、リンクやテキストの強調に使用されます。色やスタイルも個別に指定可能です。

コード例
text-decoration: underline;

white-space

テキスト・フォント

要素内の空白文字の処理方法を指定するプロパティです。normal、nowrap、pre、pre-wrapなどがあり、改行やスペースの扱いを制御します。コードブロックの表示やテキストの折り返し制御に重要です。

コード例
white-space: nowrap;

text-overflow

テキスト・フォント

要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis(...)で省略表示したり、clip(切り取り)したりできます。white-space: nowrapやoverflowと組み合わせて使用します。

コード例
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

word-break

テキスト・フォント

単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。

コード例
word-break: break-all;

writing-mode

テキスト・フォント

テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。

コード例
.vertical-text { writing-mode: vertical-rl; height: 200px; width: 100px; }

caret-color

テキスト・フォント

テキスト入力時のカーソル(キャレット)の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。

コード例
caret-color: red;

vertical-align

テキスト・フォント

インライン要素やテーブルセルの縦方向の配置を指定するプロパティです。baseline、top、middle、bottom等の値があり、テキストと画像の位置調整に使用します。ブロック要素には効きません。

コード例
vertical-align: middle;

text-transform

テキスト・フォント

テキストの大文字・小文字を変換するプロパティです。uppercase(全て大文字)、lowercase(全て小文字)、capitalize(各単語の先頭を大文字)などがあり、HTMLを変更せずに表示を制御できます。

コード例
text-transform: uppercase;