【CSS】色々な文字修飾の仕方｜HTML＆CSS入門講座（10）

目　次

【CSS】色々な文字修飾の仕方｜HTML＆CSS入門講座（10）のPodcast
ストーリーブック
はじめに
文字修飾の基本：フォントとサイズの設計
1. フォントファミリーの指定（font-family）
2. 賢いサイズ指定（remとpxの使い分け）
読みやすさを決める「余白」の魔法
1. 行間（line-height）は「単位なし」で指定する
2. 字間（letter-spacing）で印象を整える
進化した下線と強調のテクニック
2026年の新常識：レスポンシブとレイアウトの新機能
誰にでも読みやすく：アクセシビリティの視点
1. コントラスト比の基準を守ろう
2. 影（text-shadow）で視認性を高める
まとめ
参考資料

【CSS】色々な文字修飾の仕方｜HTML＆CSS入門講座（10）のPodcast

下記のPodcastは、Geminiで作成しました。

ストーリーブック

「最新CSS文字装飾ガイド〜読み手へのおもてなし〜」の絵本を見る

はじめに

こんにちは！HTML＆CSS入門講座の第10回目へようこそ。

今回は、ウェブサイトの印象を左右する非常に重要な要素「文字修飾（テキストスタイリング）」について解説します。

文字のデザインを整えることは、単に見栄えを良くするだけではありません。読み手に「どの情報が大切か」を伝え、ストレスなく文章を読んでもらうための「おもてなし」でもあります。

2025年から2026年にかけて、CSSではこれまで難しかった細かな調整が簡単にできる新しいプロパティが次々と標準化されました。本記事では、基礎から最新のテクニックまで、初心者の方にも分かりやすく丁寧に説明していきます。

文字修飾の基本：フォントとサイズの設計

まずは全ての土台となる、フォントの種類と大きさの設定から始めましょう。

フォントファミリーの指定（font-family）

ウェブサイトで表示される文字の形（書体）を決めるのが font-family です。ユーザーが使っているパソコンやスマホの種類によって、最初から入っているフォントが異なるため、複数の候補を「優先順位が高い順」に指定するのがルールです ^[1]。

指定の最後には、必ず「総称ファミリー名」を記述します。例えば、ゴシック体なら sans-serif、明朝体なら serif と書きます。これにより、もし指定したフォントが相手の端末になかったとしても、ブラウザが似た系統のフォントを自動で選んでくれます ^[2]。

賢いサイズ指定（remとpxの使い分け）

文字の大きさ（font-size）を指定する際、初心者の頃は「16px」のように固定値で指定しがちです。しかし、アクセシビリティ（誰にとっても使いやすいこと）を考えると、rem という単位を使うのが現在の標準です ^[4]。

rem は、ブラウザの基本設定（通常は16px）を「1」とする単位です。ユーザーがブラウザ設定で「文字を大きく表示したい」と設定している場合、rem で指定していれば自動的にその設定に合わせて文字が大きくなります。本文なら 1rem（16px相当）、見出しなら 1.5rem（24px相当）のように指定するのが一般的です ^[5]。

読みやすさを決める「余白」の魔法

文字そのものの装飾と同じくらい大切なのが、文字の周りの「余白」です。

行間（line-height）は「単位なし」で指定する

行と行の間の広さを決める line-height は、読みやすさに直結します。ここで最も大切なルールは、「単位を付けずに数字だけ書く」ことです ^[7]。

良い例: line-height: 1.5;

避けたい例: line-height: 1.5em; や line-height: 24px;

単位を付けずに指定すると、その要素のフォントサイズに合わせて行高が自動計算されます。例えば 1.5 と指定すれば、文字サイズが16pxなら24pxの行高に、文字を大きくして32pxになれば48pxの行高に、と常に適切な比率が保たれます ^[8]。本文の推奨値は 1.5 から 1.8 程度です ^[9]。

字間（letter-spacing）で印象を整える

文字と文字の間の間隔を調整するのが letter-spacing です。日本語のフォントは、デフォルトでは少し詰まって見えることがあるため、0.05em 程度のわずかな隙間を空けると、ゆとりが出て高級感や清潔感のある印象になります ^[1]。

進化した下線と強調のテクニック

かつてCSSの下線は「単純な一本線」でしたが、最新のCSSでは非常に細かなカスタマイズが可能になりました。

text-decoration の新しい書き方

text-decoration は、線の種類・色・太さをまとめて指定できる便利なプロパティです ^[12]。

css

p {
  text-decoration: underline wavy #ff6b6b 2px;
}

このように書くと、「赤っぽい色の、2ピクセルの太さの、波線の下線」を引くことができます。波線（wavy）は、注意を促したい箇所や、少し遊び心を入れたいデザインに最適です ^[13]。

日本語を美しく見せる text-underline-offset

日本語に下線を引くと、文字の「はらい」や「点」と線が重なってしまい、読みにくくなることがあります ^[15]。そんな時に役立つのが text-underline-offset です。このプロパティを使うと、文字と下線の間の「距離」を調整できます。例えば text-underline-offset: 0.2em; と指定すると、文字から少し離れた場所に下線が表示され、日本語の文字の形を邪魔せずに美しく強調できます ^[16]。

日本語特有の「圏点（傍点）」をつける

文章の重要な一文字ずつに「・」を打つ、日本語ならではの強調表現を「圏点」と呼びます。これを実現するのが text-emphasis プロパティです ^[18]。text-emphasis: filled circle; と指定するだけで、文字の上に自動的に点が付きます。色は text-emphasis-color で自由に変えることができます ^[19]。

2026年の新常識：レスポンシブとレイアウトの新機能

デバイスの画面サイズが多様化する現代、文字修飾も「流動的」であることが求められています。

clamp() で作る「勝後に縮む」文字

スマホで見るとちょうどいい大きさなのに、パソコンで見ると小さすぎる……。そんな悩みを解決するのが clamp() 関数です ^[21]。

css

h1 {
  font-size: clamp(1.2rem, 3vw + 1rem, 2.5rem);
}

この一行で、「最小1.2rem、最大2.5remの範囲内で、画面幅（vw）に合わせてスムーズにサイズを変えてね」という命令になります。複数のメディアクエリを書く必要がなく、どんな画面サイズでも理想的な文字サイズを維持できる画期的な手法です ^[22]。

見出しを綺麗に折り返す text-wrap: balance

長い見出しが2行になったとき、1行目はとても長く、2行目はたった1文字だけ……という不格好な改行を見たことはありませんか？最新の text-wrap: balance プロパティを使うと、ブラウザが自動で計算して、各行の長さが均等になるようにバランス良く折り返してくれます ^[24]。

究極の余白調整：text-box-trim

2025年後半から主要なブラウザ（Chrome 133, Safari 18.2など）でサポートが始まった最新機能が text-box-trim です ^[27]。通常、文字の上下には「ハーフ・レディング」と呼ばれる目に見えない余白が存在します。これが原因で、デザインツール（Figmaなど）で作成した正確な余白が再現できないことがありました。text-box: trim-both; を指定すると、文字の上下にある余計な空白をぴったり削ぎ落とすことができ、ボタンの中の文字を完璧に中央に配置するといったことが可能になります ^[28]。

誰にでも読みやすく：アクセシビリティの視点

最後に、非常に重要な「色のコントラスト」についてお話しします。

コントラスト比の基準を守ろう

文字の色と背景の色の組み合わせには、守るべきルールがあります。視覚が弱い方や、太陽光の下でスマホを見ている方でも内容が読めるように、十分なコントラスト（明暗差）を確保しなければなりません ^[31]。世界的なガイドライン（WCAG）では、通常のテキストで 4.5:1 以上のコントラスト比を確保することが推奨されています ^[32]。デザイン重視で薄いグレーの文字を使いたくなることもありますが、読みやすさを第一に考え、「ダークレッド」や「濃いグレー」など、はっきり識別できる色を選びましょう ^[33]。