6日でできる 新HTML入門｜文字書式のCSS②

行間や文字の並びを整えることで、Webページの文章はさらに読みやすく、心地よく伝わるようになります。

文字サイズや文字色、太さ、フォントを指定すると、文章の印象を大きく変えられます。しかし、読みやすい文章を作るためには、文字そのものの形だけでなく、行と行の間隔、文字の揃え方、文字と文字の間隔なども大切です。

たとえば、文章の行間が狭すぎると、上下の文字が詰まって見えてしまいます。反対に、行間が広すぎると、同じ段落の文章がばらばらに見えることがあります。また、見出しや画像を中央に配置したり、案内文を右側に揃えたりすることで、ページの構成を分かりやすく見せられます。

ここでは、行間を指定するline-height、複数の文字書式をまとめるfont、文字や画像の水平方向の位置を整えるtext-align、文字間隔を指定するletter-spacing、単語間隔を指定するword-spacingについて解説します。

それぞれのプロパティの役割と使い方を理解し、読みやすさを意識した文字デザインを作っていきましょう。

line-heightで行間を調整する

line-heightは、文章の行の高さを指定するCSSプロパティです。横書きの文章では、各行を配置する行ボックスの高さを設定するため、見た目としては行と行の間隔を調整する働きがあります。

文章が1行だけの場合は、line-heightによる違いが分かりにくいことがあります。複数行の段落に指定すると、行間が広がったり狭くなったりする様子を確認しやすくなります。

基本的な書き方は次のとおりです。

line-height:1.8;

1.8は、要素の文字サイズを基準にして行の高さを1.8倍にする指定です。単位を付けない数値を指定した場合、その数値と要素のfont-sizeを掛けた値が行の高さとして使われます。

たとえば、文字サイズが16pxでline-height:2;を指定した場合、行の高さはおおよそ32pxになります。

指定例内容
line-height:normal;ブラウザの標準的な行の高さを使う
line-height:1.5;文字サイズの1.5倍を行の高さにする
line-height:2;文字サイズの2倍を行の高さにする
line-height:24px;行の高さを24pxにする
line-height:150%;文字サイズに対して150%の行の高さにする

単位なしの数値で指定する方法

line-heightでは、1.5や1.8のような単位なしの数値がよく使われます。

p {
  line-height:1.8;
}

この指定は、p要素の文字サイズに合わせて行の高さを計算します。文字サイズが変わった場合でも、それぞれの文字サイズを基準に行の高さが調整されます。

line-heightは子要素へ継承されるプロパティです。単位なしの数値を使うと、子要素自身の文字サイズを基準に計算されるため、継承による予想外の表示を避けやすくなります。MDNでも、多くの場合は単位なしの数値が好ましい指定方法として案内されています。

本文では、次のような指定から試すと分かりやすいです。

line-height:1.5;

line-height:1.8;

line-height:2;

数値が大きくなるほど、行と行の間隔が広くなります。ただし、広げすぎると同じ段落の文章がつながって見えにくくなるため、実際の文章量や文字サイズを見ながら調整しましょう。

単位を付けて指定する方法

line-heightには、pxなどの単位を付けた長さも指定できます。

line-height:24px;

この場合は、文字サイズに対する倍率ではなく、行の高さを24pxとして指定します。

固定した長さで行の高さを管理できる一方、文字サイズが大きくなっても行の高さは自動的に同じ割合で広がりません。そのため、あとからfont-sizeを変更すると、文字と文字が接近したり、行の高さが足りなくなったりする可能性があります。

指定方法特徴
line-height:1.8;文字サイズを基準に倍率で調整する
line-height:24px;行の高さを固定した長さで指定する
line-height:150%;文字サイズを基準に割合で指定する
line-height:normal;ブラウザやフォントに応じた標準値を使う

文章を読みやすくする目的では、まず単位なしの1.5や1.8などを試し、必要に応じて調整するとよいでしょう。

図1：line-heightによる行間の違い

この図から分かること

line-heightを指定すると、文章の行と行の間隔を調整できます。normalではブラウザの標準的な行間が使われ、2を指定すると文字サイズのおおよそ2倍の行の高さになります。

行間を少し広げると、複数行の文章を目で追いやすくなります。ただし、行間が広ければ広いほどよいわけではありません。文章の文字サイズや1行の長さを確認しながら、読みやすい値を選ぶことが大切です。

line-heightを比較するHTMLファイルの例

ここでは、2つの段落に異なるline-heightを指定し、行間の違いを確認します。

1つ目の段落にはnormal、2つ目の段落には2を指定します。

ファイル名： Lesson11-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>読書案内の行間調整</title>
  <style>
    p.default {
      line-height:normal;
    }

    p.spacious {
      line-height:2;
    }
  </style>
</head>
<body>
  <h1>今月の読書案内</h1>

  <h2>標準の行間</h2>
  <p class="default">
    このページでは、休日にゆっくり読みたい小説を紹介します。
    登場人物の心の変化を丁寧に描いた作品は、
    物語の世界にじっくり入りたいときにおすすめです。
  </p>

  <h2>広めの行間</h2>
  <p class="spacious">
    このページでは、休日にゆっくり読みたい小説を紹介します。
    登場人物の心の変化を丁寧に描いた作品は、
    物語の世界にじっくり入りたいときにおすすめです。
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、p.defaultとp.spaciousという2つのクラスセレクタを使っています。

p.defaultにはline-height:normal;を指定し、ブラウザの標準的な行間を使用しています。p.spaciousにはline-height:2;を指定し、文字サイズの2倍を基準にした行の高さにしています。

クラスセレクタCSS役割
p.defaultline-height:normal;標準の行間にする
p.spaciousline-height:2;行の高さを文字サイズの2倍にする

HTMLソース内の改行やスペースは、通常のp要素ではそのままブラウザ上の改行として表示されるとは限りません。しかし、画面幅に応じて文章が複数行になれば、line-heightによる行間の違いを確認できます。

読みやすい行間を考える

line-heightは、単に文章を広く見せるためではなく、読みやすさを整えるために使います。

本文の行間が狭すぎると、上下の行を見間違えやすくなることがあります。反対に、行間が広すぎると、次の行とのつながりが弱く見えることがあります。

主要な段落コンテンツでは、line-heightを1.5以上にすることがアクセシビリティ上の目安として案内されています。単位なしの値を使うと、文字サイズを拡大した場合にも同じ割合で行の高さが広がります。

文章の種類line-heightの考え方
長い本文1.5から1.8程度を基準に確認する
短い説明文1.4から1.6程度でも読みやすい場合がある
大きな見出し本文より狭めでも読みやすい場合がある
小さい注意書き文字が重ならないよう、行間を十分に確保する

値は固定的な正解ではありません。フォント、文字サイズ、文章量、画面幅によって読みやすさが変わるため、実際のページで確認しながら決めましょう。

fontで文字書式をまとめて指定する

fontは、複数のフォント関連プロパティを1つにまとめて指定できるショートハンドプロパティです。

たとえば、次の5つのCSSを個別に指定するとします。

font-style:italic;
font-weight:bold;
font-size:16px;
line-height:1.8;
font-family:"Yu Gothic", sans-serif;

これらはfontを使って次のようにまとめられます。

font:italic bold 16px/1.8 "Yu Gothic", sans-serif;

1行にまとめられるため、文字書式を短く記述できます。

ただし、fontでは値を書く順番が決まっています。基本的には次の順番で指定します。

font-style font-weight font-size/line-height font-family

font-sizeとfont-familyは基本的に必要です。line-heightを含める場合は、font-sizeの直後にスラッシュを入れて指定します。また、font-familyは最後に書きます。

指定部分記述例内容
font-styleitalic斜体にする
font-weightbold太字にする
font-size16px文字サイズを指定する
line-height/1.8行の高さを指定する
font-family"Yu Gothic", sans-serif使用するフォントを指定する

fontショートハンドの読み方

次の指定を、左から順番に分解してみましょう。

font:italic bold 16px/1.8 "Yu Gothic", sans-serif;
記述対応するCSSプロパティ
italicfont-style
boldfont-weight
16pxfont-size
1.8line-height
"Yu Gothic", sans-seriffont-family

font-sizeとline-heightの間にはスラッシュを入れます。

16px/1.8

これは、文字サイズを16px、行の高さを文字サイズの1.8倍にするという意味です。

フォント名に空白が含まれる場合は、ダブルクォーテーションで囲みます。そのため、Yu Gothicは"Yu Gothic"と書いています。そのフォントが利用できない環境に備えて、次の候補としてsans-serifも指定しています。

fontを使ったHTMLファイルの例

ここでは、紹介文に斜体、太字、文字サイズ、行間、フォントをまとめて指定します。

ファイル名： Lesson11-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>fontによる文字書式の一括指定</title>
  <style>
    .feature-text {
      font:italic bold 16px/1.8 "Yu Gothic", sans-serif;
    }
  </style>
</head>
<body>
  <h1>注目の新刊紹介</h1>

  <p class="feature-text">
    海辺の小さな町を舞台にした物語です。
    登場人物たちの出会いと成長が、落ち着いた文章で丁寧に描かれています。
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、feature-textというクラス名を持つp要素に、fontを使って複数の文字書式をまとめて適用しています。

個別に書く場合は、次のようになります。

.feature-text {
  font-style:italic;
  font-weight:bold;
  font-size:16px;
  line-height:1.8;
  font-family:"Yu Gothic", sans-serif;
}

fontを使う場合は、次の1行にまとめられます。

.feature-text {
  font:italic bold 16px/1.8 "Yu Gothic", sans-serif;
}

個別指定とfontの使い分け

fontは短く書ける点が便利ですが、必ず使わなければならないわけではありません。

CSSを学び始めたばかりの段階では、font-style、font-weight、font-size、line-height、font-familyを個別に書いたほうが、何を指定しているのか分かりやすい場合があります。

書き方向いている場面
個別のプロパティで指定それぞれの役割を分かりやすくしたい
fontで一括指定複数の文字書式を短くまとめたい
一部だけ変更font-sizeやfont-weightだけを個別に指定したい

fontでは指定順序が決まっているため、順番を間違えるとCSSが正しく適用されないことがあります。まず個別指定で各プロパティの意味を理解し、慣れてからfontを使うとよいでしょう。

図2：fontによる一括指定とtext-alignによる配置

この図から分かること

fontを使うと、斜体、太さ、文字サイズ、行間、フォントをまとめて指定できます。指定する順番にはルールがあり、文字サイズと行間はスラッシュで区切ります。

text-alignは、文字書式そのものではなく、要素内にある文字や画像などの水平方向の位置を整えるプロパティです。目的に応じて中央揃えや右揃えを使い分けます。

text-alignで水平方向の位置を揃える

text-alignは、ブロック要素や表のセル内にあるインラインレベルの内容を、水平方向にどのように揃えるか指定するCSSプロパティです。文章だけでなく、親要素内にあるインライン画像の位置にも影響します。(MDN Web Docs)

基本的な書き方は次のとおりです。

text-align:center;

この指定では、対象となる要素内の内容を中央に揃えます。

値説明
left左側に揃える
center中央に揃える
right右側に揃える
justify両端に揃える
start文章の書字方向における開始側へ揃える
end文章の書字方向における終了側へ揃える

日本語の横書きページでは、本文は左揃えにすることが一般的です。ページタイトルや短いキャプションでは中央揃え、日付や補助情報では右揃えが使われることがあります。

leftで左揃えにする

leftを指定すると、内容を要素の左側に揃えます。

text-align:left;

通常の日本語本文では、左揃えが読みやすいことが多いです。長い文章を中央揃えや右揃えにすると、行ごとに文章の開始位置が変わり、読み進めにくくなる場合があります。

centerで中央揃えにする

centerを指定すると、内容を中央に揃えます。

text-align:center;

ページタイトル、短い案内文、写真のキャプションなどで使いやすい指定です。

ただし、長い本文をすべて中央揃えにすると、文章の開始位置が行ごとに変わります。数行以上の長い説明文では、読みやすさを確認してから使いましょう。

rightで右揃えにする

rightを指定すると、内容を右側に揃えます。

text-align:right;

更新日、署名、補足情報など、ページの右側に置きたい短い文章に利用できます。

justifyで両端揃えにする

justifyを指定すると、行の左右がそろうように文字間や単語間の空間が調整されます。

text-align:justify;

text-align:justifyは現在の主要なブラウザで広く利用できます。(MDN Web Docs)

ただし、文章の長さや言語、フォント、表示幅によっては、文字間の広がり方が不自然に見える場合があります。特に短い行では、間隔が広く見えることがあるため、実際の文章で表示を確認することが大切です。

text-alignを使ったHTMLファイルの例

ここでは、写真ギャラリーを例にして、中央揃えと右揃えを指定します。

使用する画像ファイルはbeach-view.pngです。Lesson11-3.htmlと同じフォルダに保存しておきます。

ファイル名： Lesson11-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>海辺のフォトギャラリー</title>
  <style>
    .center {
      text-align:center;
    }

    .right {
      text-align:right;
    }
  </style>
</head>
<body>
  <h1 class="center">海辺のフォトギャラリー</h1>

  <p class="center">
    穏やかな波が広がる海辺の風景<br>
    <img src="beach-view.png" alt="青空の下に広がる海辺の風景">
  </p>

  <p class="right">撮影地：潮風海岸</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、centerクラスを持つh1要素とp要素にtext-align:center;を指定しています。

p要素の中には文章とimg要素があります。img要素はインラインレベルの内容として配置されるため、親となるp要素にtext-align:center;を指定すると、画像も中央に配置されます。

rightクラスを持つ最後のp要素には、text-align:right;を指定しています。

対象class属性CSS
h1要素center中央揃え
画像を含むp要素center文章と画像を中央揃え
撮影地のp要素right文章を右揃え

text-alignを指定する相手に注意する

text-alignは、文字や画像そのものに対して画面全体の位置を直接指定するというより、親となるブロック要素の中で、インラインレベルの内容をどのように配置するか決めます。

たとえば、画像を中央に配置する場合は、画像を囲んでいるp要素にtext-align:center;を指定できます。

<p style="text-align:center;">
  <img src="photo.png" alt="山の風景">
</p>

見出しの文字を中央に揃える場合は、h1要素に直接指定できます。

<h1 style="text-align:center;">写真ギャラリー</h1>

文章全体を中央に移動したいのか、要素そのものの幅や位置を中央にしたいのかによって、使うCSSは異なります。text-alignは、主に要素内の文字やインライン内容の揃え方を指定するプロパティだと覚えておきましょう。

letter-spacingで文字間隔を指定する

letter-spacingは、文字と文字の間隔を調整するCSSプロパティです。指定した値は、フォントが本来持っている文字間隔に加えられます。

正の値を指定すると文字間隔が広がり、負の値を指定すると文字間隔が狭くなります。

letter-spacing:2px;

この指定では、文字と文字の間に2px分の間隔を加えます。

指定例内容
letter-spacing:normal;フォントの標準的な文字間隔を使う
letter-spacing:1px;文字間隔を少し広げる
letter-spacing:2px;文字間隔を2px広げる
letter-spacing:-1px;文字間隔を狭くする
letter-spacing:0.1em;文字サイズを基準に間隔を広げる

見出しや短いキャッチコピーでは、文字間隔を少し広げると落ち着いた印象になる場合があります。一方、本文で大きな値を指定すると、文章がばらばらに見えることがあります。

非常に大きな正の値や負の値は、文字が離れすぎたり重なったりして読みにくくなるため注意が必要です。読みやすい値はフォントによっても異なります。

letter-spacingの指定例

文字間隔を2px広げる場合は、次のように書きます。

<p style="letter-spacing:2px;">
  ゆったりした文字間隔で案内文を表示します。
</p>

少しだけ広げたい場合は、1px程度から試すと変化を確認しやすくなります。

<h2 style="letter-spacing:1px;">
  今月のおすすめ特集
</h2>

負の値を指定すると文字間隔を狭くできます。

<p style="letter-spacing:-0.5px;">
  文字間隔を少しだけ狭くした文章です。
</p>

ただし、負の値を大きくしすぎると文字同士が重なる可能性があります。特別な目的がなければ、本文ではnormalまたは小さな正の値を使うと安心です。

word-spacingで単語間隔を指定する

word-spacingは、単語と単語の間隔を調整するCSSプロパティです。フォントやブラウザが持つ通常の単語間隔に、指定した長さが追加されます。

word-spacing:8px;

この指定では、単語間の空間を8px広げます。

英語のように単語を半角スペースで区切る文章では、効果を確認しやすいプロパティです。

<p style="word-spacing:8px;">
  Web Design Learning Guide
</p>

日本語の文章では、通常は単語ごとにスペースを入れないため、word-spacingを指定しても変化が分かりにくい場合があります。日本語と英語が混ざった見出しや、スペースを含む短い英文などで使うと効果を確認しやすくなります。

指定例内容
word-spacing:normal;標準の単語間隔を使う
word-spacing:4px;単語間隔を4px広げる
word-spacing:8px;単語間隔を8px広げる
word-spacing:-1px;単語間隔を狭くする
word-spacing:0.3em;文字サイズを基準に間隔を追加する

word-spacingも、大きすぎる正の値や負の値を指定すると、単語が離れすぎたり重なったりして読みにくくなります。フォントによって文字幅が異なるため、すべてのフォントで同じように読みやすくなる固定値はありません。(MDN Web Docs)

letter-spacingとword-spacingを同時に使う

letter-spacingとword-spacingは、同じ要素に同時に指定できます。

<p style="letter-spacing:1px; word-spacing:4px;">
  Simple Web Design Guide
</p>

この指定では、文字間隔に1px、単語間隔に4pxを追加します。

CSS対象
letter-spacing文字と文字の間隔
word-spacing単語と単語の間隔

英語の文章では、letter-spacingを広げると単語内の各文字が離れ、word-spacingを広げると単語同士の間が広がります。

Web Design Guide

letter-spacingは、W、e、bなどの文字間に影響します。word-spacingは、WebとDesign、DesignとGuideの間に影響します。

両方を大きくしすぎると文章全体が広がりすぎるため、まずは小さな値から調整しましょう。

図3：letter-spacingとword-spacingの違い

この図から分かること

letter-spacingは、1文字ごとの間隔を調整します。日本語の見出しや短いキャッチコピーにも使いやすいプロパティです。

word-spacingは、スペースで区切られた単語同士の間隔を調整します。そのため、英語の文章や英単語を並べた見出しで効果を確認しやすくなります。

どちらも、値を大きくしすぎると文字や単語がばらばらに見えます。デザインだけでなく、文章を読みやすい状態に保つことが大切です。

行間、揃え、間隔を組み合わせる

今回学んだプロパティは、同じ要素に組み合わせて指定できます。

.introduction {
  line-height:1.8;
  text-align:left;
  letter-spacing:0.5px;
}

この指定では、行の高さを文字サイズの1.8倍にし、文章を左揃えにし、文字間隔を0.5px広げています。

英語の短い見出しであれば、次のような指定もできます。

.english-title {
  text-align:center;
  letter-spacing:2px;
  word-spacing:6px;
}
目的使用するCSS
行と行の間を整えるline-height
複数のフォント指定をまとめるfont
文字や画像を左右中央に揃えるtext-align
文字と文字の間を整えるletter-spacing
単語と単語の間を整えるword-spacing

複数のプロパティを組み合わせるときは、一度に大きく変えるのではなく、1つずつ値を調整すると違いを確認しやすくなります。

読みやすさを優先して調整する

CSSでは、行間や文字間隔を自由に変更できます。しかし、デザインを目立たせることだけを優先すると、文章が読みにくくなる場合があります。

たとえば、次のような指定には注意が必要です。

注意したい指定起こりやすい問題
line-heightが小さすぎる上下の行が近づき、文章を追いにくくなる
line-heightが大きすぎる同じ段落のつながりが弱く見える
長文をcenterにする各行の開始位置が変わり、読み進めにくくなる
letter-spacingを広げすぎる単語が文字の集まりに見えにくくなる
letter-spacingを狭くしすぎる文字が重なって読みにくくなる
word-spacingを広げすぎる単語同士が離れすぎる
word-spacingを狭くしすぎる単語の境界が分かりにくくなる

CSSを指定したあとは、パソコンだけでなく、画面幅の狭い環境でも読みやすいかを確認することが大切です。

CSSが反映されないときの確認ポイント

今回扱ったCSSが正しく反映されない場合は、次の点を確認してみましょう。

確認項目内容
プロパティ名line-heightやtext-alignを正しく書いているか
コロンプロパティと値の間に半角の:があるか
セミコロン各指定の最後に半角の;があるか
クラス名HTML側とCSS側のクラス名が一致しているか
fontの順番font-style、font-weight、font-size、font-familyの順になっているか
スラッシュfont内のfont-sizeとline-heightを/で区切っているか
単位pxを付ける指定で単位を書き忘れていないか
波かっこCSSの指定範囲を{ }で正しく囲んでいるか
全角記号：や；などの全角記号が混ざっていないか

特にfontは、値の順番が決まっています。font-familyを途中に書いたり、font-sizeを書かずにline-heightを指定したりすると、意図したCSSにならないことがあります。

使用したCSSプロパティ一覧

CSSプロパティ用途主な値の例
line-height行の高さや行間を指定するnormal、1.5、2、24px
font複数のフォント関連CSSをまとめて指定するitalic bold 16px/1.8 "Yu Gothic", sans-serif
text-align要素内の文字や画像の水平方向の揃え方を指定するleft、center、right、justify
letter-spacing文字と文字の間隔を指定するnormal、1px、2px、-0.5px
word-spacing単語と単語の間隔を指定するnormal、4px、8px、0.3em