Webデザインにおいて、テキストの見た目は「サイト全体の印象」を大きく左右します。
CSSを使えば、文字の色・大きさ・太さ・位置・間隔などを自由にデザインでき、読みやすさやデザイン性を向上させることができます。
この記事では、テキスト装飾の基本プロパティをHTMLの例とともに丁寧に解説します。
初心者でも「どんな時に・どんなプロパティを使えばいいか」が理解できる構成になっています。
テキストの色を変える：color
文字の色を指定するプロパティです。デザイン全体のトーンを決める上で非常に重要な要素です。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
- 色は16進数（
#333333）、RGB（rgb(0,0,0)）、HSL（hsl(0,0%,0%)）などで指定可能。 - 文字色と背景色のコントラストを意識することで、視認性が大きく向上します。
- テーマカラーを決めて全体の統一感を持たせると、デザインが締まります。
文字サイズを変える：font-size
テキストのサイズを変える基本プロパティです。情報の優先度を視覚的に示すのにも役立ちます。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
pxは固定サイズ、emやremは相対サイズ。- サイト全体で一貫性を保ちたい場合、
remで統一するのがおすすめ。 - スマートフォンなどのデバイスではフォントサイズを相対指定するとレスポンシブに対応できます。
太字・斜体にする：font-weight・font-style
見出しや強調したい部分に使われる基本的なスタイルです。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
font-weightは数値（100〜900）で細かく指定可能。- 見出しは「700（bold）」、本文は「400（normal）」が一般的。
- 日本語フォントでは太字が反映されにくい場合もあるため注意が必要です。
下線・取り消し線を引く：text-decoration
リンク以外でも使用できる便利なプロパティです。下線・上線・取り消し線などを簡単に設定できます。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
- 複数指定も可能（例：
underline overline） text-decoration-colorやtext-decoration-styleで線の色・スタイルを変更できる。- 下線付きボタンなどの装飾にも応用可能。
行間を調整する：line-height
文章の可読性に最も大きく影響するプロパティの一つ。行間を広げることで、テキストがぐっと読みやすくなります。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
1.5〜2.0程度が読みやすい。- 固定値（例：
30px）よりも相対値（例：1.8）を使う方が柔軟です。 - Webページ全体の文章スタイルとして設定すると統一感が出ます。
文字間を広げる：letter-spacing
ほんの少し調整するだけでデザインの印象が変わります。特にタイトルや見出しで効果的です。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
- 日本語では
0.05em〜0.15em程度が自然。 - 英字ロゴやキャッチコピーでは大きめに設定して高級感を出すことも。
テキストの位置を揃える：text-align
テキストを左寄せ・中央揃え・右寄せ・両端揃えにできます。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
- 通常は
leftがデフォルト。 - ヒーローテキストや見出しで
centerを使うとデザインがまとまりやすい。 - 英文サイトなどでは
justify（両端揃え）もよく使われます。
影をつける：text-shadow
文字に影を付けて立体的に見せることができます。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
- 値の順番は「横方向・縦方向・ぼかし・色」。
- 薄いグレーや半透明の影を使うと自然な印象になります。
- タイトルやヒーロー部分に使用すると印象的なデザインに。
英字を大文字・小文字に変換：text-transform
Webデザインで英字を統一したい時に便利です。
See the Pen Untitled by suguru (@suguru22) on CodePen.
ポイント
uppercase（すべて大文字）lowercase（すべて小文字）capitalize（単語の先頭だけ大文字）- 海外サイトやボタンデザインでよく使用されます。
まとめ：テキスト装飾でデザインの完成度を上げよう
| プロパティ名 | 用途 | 使用例 | 補足・ポイント |
|---|---|---|---|
color | 文字の色を変える | color: red; | 色名・HEX・RGB・HSLなどで指定可能 |
font-size | 文字の大きさを変える | font-size: 16px; | px, em, rem, % など単位に注意 |
font-weight | 太字にする | font-weight: bold; | normal, bold, または数値（100～900）で指定可能 |
font-style | 斜体にする | font-style: italic; | normal, italic, oblique が指定可能 |
text-decoration | 下線・取り消し線を引く | text-decoration: underline; | none, underline, line-through, overline など |
line-height | 行間を調整する | line-height: 1.5; | 単位なし（比率）か px 指定 |
letter-spacing | 文字の間隔を調整する | letter-spacing: 0.1em; | 正の値で広げる、負の値で狭める |
text-align | テキストの位置を揃える | text-align: center; | left, center, right, justify など |
text-shadow | テキストに影をつける | text-shadow: 2px 2px 4px gray; | 複数指定やカンマ区切りで多重影も可能 |
text-transform | 英字を大文字・小文字に変換 | text-transform: uppercase; | none, capitalize, uppercase, lowercase |
テキスト装飾は単なるデザインではなく、ユーザーの読みやすさと印象を左右する重要な要素です。
CSSの基本を理解し、color や font-size などの単体プロパティから始め、line-height や letter-spacing などで細かく調整していくことで、
見た目の美しさと可読性を両立したデザインが実現できます。
Web制作では、「テキストのデザイン = サイトの信頼性」。
ひとつひとつのプロパティを理解し、目的に合わせて上手に使い分けていきましょう。
