【CSS学習】テキスト装飾の完全ガイド|text-decoration・text-align・line-heightなどを徹底解説!

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 は固定サイズ、emrem は相対サイズ。
  • サイト全体で一貫性を保ちたい場合、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-colortext-decoration-style で線の色・スタイルを変更できる。
  • 下線付きボタンなどの装飾にも応用可能。

行間を調整する:line-height

文章の可読性に最も大きく影響するプロパティの一つ。行間を広げることで、テキストがぐっと読みやすくなります。

See the Pen Untitled by suguru (@suguru22) on CodePen.

ポイント

  • 1.52.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の基本を理解し、colorfont-size などの単体プロパティから始め、
line-heightletter-spacing などで細かく調整していくことで、
見た目の美しさと可読性を両立したデザインが実現できます。

Web制作では、「テキストのデザイン = サイトの信頼性」。
ひとつひとつのプロパティを理解し、目的に合わせて上手に使い分けていきましょう。

タイトルとURLをコピーしました