テキスト・フォント

11個のプロパティ

color

テキスト・フォント

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

コード例
color: #3b82f6;
関連: background-color, border-color

font-size

テキスト・フォント

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

コード例
font-size: 16px;
関連: font-family, font-weight...

font-weight

テキスト・フォント

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

コード例
font-weight: 400;
関連: font-family, font-size

line-height

テキスト・フォント

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

コード例
line-height: 1.6;
関連: font-size, vertical-align

letter-spacing

テキスト・フォント

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

コード例
letter-spacing: 0.1em;
関連: word-spacing, font-size

text-align

テキスト・フォント

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

コード例
text-align: center;
関連: vertical-align, text-justify

text-decoration

テキスト・フォント

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

コード例
text-decoration: underline;
関連: text-decoration-thickness, text-underline-offset

white-space

テキスト・フォント

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

コード例
white-space: nowrap;
関連: word-wrap, overflow-wrap

text-overflow

テキスト・フォント

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

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

word-break

テキスト・フォント

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

コード例
word-break: break-all;
関連: overflow-wrap, hyphens

writing-mode

テキスト・フォント

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

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