テキスト・フォント

11個のプロパティ

color

テキスト・フォント

テキストの色を指定するプロパティです。様々な色形式で指定可能です。

コード例
color: #3b82f6;

font-size

テキスト・フォント

テキストのフォントサイズを指定するプロパティです。

コード例
font-size: 16px;

font-weight

テキスト・フォント

フォントの太さを指定するプロパティです。

コード例
font-weight: 400;

line-height

テキスト・フォント

行の高さ(行間)を指定するプロパティです。読みやすさに大きく影響します。

コード例
line-height: 1.6;

letter-spacing

テキスト・フォント

文字間のスペース(字間)を指定するプロパティです。可読性やデザイン調整に使われます。

コード例
letter-spacing: 0.1em;

text-align

テキスト・フォント

テキストの水平方向の配置を指定するプロパティです。

コード例
text-align: center;

text-decoration

テキスト・フォント

テキストの装飾(下線、上線、取り消し線など)を指定するプロパティです。

コード例
text-decoration: underline;

white-space

テキスト・フォント

要素内の空白文字の処理方法を指定するプロパティです。

コード例
white-space: nowrap;

text-overflow

テキスト・フォント

要素からはみ出したテキストの表示方法を指定するプロパティです。

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

word-break

テキスト・フォント

単語の改行方法を制御するプロパティです。長い単語やURLの処理に便利です。

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

writing-mode

テキスト・フォント

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

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