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

文字サイズ、色、太さ、フォントを整えれば、文章はもっと読みやすく、ページの印象もぐっと伝わりやすくなります。

HTMLで文章の構造を作れるようになると、次に気になってくるのが文字の見た目です。見出しをもっと目立たせたい、本文の文字を読みやすい大きさにしたい、重要な部分に色を付けたい、作品名を斜体で表したいなど、Webページでは文字の見せ方を工夫する場面がたくさんあります。

このような文字の見た目を調整するときに使うのがCSSです。CSSを使うと、文字サイズ、文字色、太さ、斜体、下線、取り消し線、フォントの種類などを細かく指定できます。

ここでは、文字書式の基本として、font-size、color、font-weight、font-style、text-decoration、font-familyを扱います。どのプロパティが何を指定するのかを確認しながら、実際のHTMLサンプルで使い方を見ていきましょう。

文字書式のCSSでできること

文字書式のCSSは、文章の読みやすさやページの印象を整えるために使います。HTMLだけでも文章は表示できますが、すべてが同じような見た目だと、どこが重要なのか、どこに注目すればよいのかが分かりにくくなることがあります。

CSSを使うと、たとえば次のような調整ができます。

CSSプロパティ指定できる内容
font-size文字サイズを指定する
color文字色を指定する
font-weight文字の太さを指定する
font-style斜体などの文字スタイルを指定する
text-decoration下線、上線、取り消し線などを指定する
font-family使用するフォントの種類を指定する

文字書式を整えると、ページ全体が読みやすくなります。たとえば、重要な見出しを少し大きくしたり、注意書きを目立つ色にしたり、作品名を斜体にしたりすることで、読者が内容を理解しやすくなります。

ただし、装飾を増やしすぎると、かえって読みにくくなることもあります。CSSは、目立たせたい部分をはっきりさせるために使うと効果的です。

図1：文字書式のCSSで調整できること

この図から分かること

CSSの文字書式プロパティを使うと、文章の見た目を細かく調整できます。文字サイズを変えると情報の優先度を示しやすくなり、文字色を変えると注目してほしい部分を強調できます。

また、文字の太さやフォントを調整すると、ページ全体の雰囲気も変わります。文字書式は単なる飾りではなく、読みやすさや情報の伝わりやすさに関わる大切な指定です。

font-sizeで文字サイズを指定する

font-sizeは、文字の大きさを指定するCSSプロパティです。本文を読みやすくしたいときや、特定の文章を目立たせたいときに使います。

文字サイズは、数値と単位を組み合わせて指定できます。

font-size:24px;

この指定では、文字サイズを24pxにしています。pxはピクセルを表す単位で、Webページのサイズ指定でよく使われます。

font-sizeでは、px以外にもpt、em、%などの単位を使えます。

単位読み方特徴
pxピクセル画面上のピクセルを基準に指定する
ptポイント印刷物でも使われる単位
emエム現在の文字サイズを基準に相対指定する
%パーセント親要素などを基準に割合で指定する

学習を始めたばかりの段階では、まずpxを使うと分かりやすいです。たとえば、font-size:16px; や font-size:24px; のように指定すると、文字サイズの違いを確認しやすくなります。

数値で文字サイズを指定するHTMLファイルの例

ここでは、映画レビューのページを例にして、一部の段落だけ文字サイズを大きくしてみます。

ファイル名： Lesson10-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>映画レビュー</title>
</head>
<body>
  <h1>今月のおすすめ映画</h1>
  <p>話題の映画から、映像やストーリーが魅力的な作品を紹介します。</p>
  <p style="font-size:24px;">星空の旅人は、美しい映像と心温まる物語が魅力のファンタジー映画です。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、2つ目のp要素にstyle属性を使ってfont-size:24px;を指定しています。そのため、この段落だけ文字サイズが大きくなります。

style属性は、指定した要素だけにCSSを適用する方法です。ここでは、1つの段落だけを目立たせるために使っています。

font-sizeを使うときは、数値だけでなく単位も忘れずに書きます。24だけではなく、24pxのように指定することが大切です。

font-sizeで使えるキーワード指定

font-sizeは、数値と単位だけでなく、キーワードでも指定できます。キーワードを使うと、現在の文字サイズを基準に大きくしたり、小さくしたりできます。

<p style="font-size:larger;">次回作はさらに迫力ある映像が楽しめます。</p>

largerは、現在の文字サイズより一段階大きくする指定です。反対に、smallerを使うと一段階小さくできます。

値説明
smaller現在の文字サイズより一段階小さくする
larger現在の文字サイズより一段階大きくする
xx-smallとても小さいサイズ
x-small小さいサイズ
smallやや小さいサイズ
medium標準的なサイズ
largeやや大きいサイズ
x-large大きいサイズ
xx-largeとても大きいサイズ

キーワード指定は、相対的に文字サイズを調整したいときに使えます。ただし、細かくサイズを決めたい場合は、pxやemなどの単位を使うほうが分かりやすいです。

colorで文字色を指定する

colorは、文字色を指定するCSSプロパティです。見出しを落ち着いた色にしたり、注意文を目立つ色にしたりするときに使います。

色は、色名や16進数カラーコードなどで指定できます。

color:navy;

この指定では、文字色をnavyにしています。navyは濃い青色を表す色名です。

CSSには、red、blue、green、white、black、navy、tealなど、名前で指定できる色があります。最初は色名で指定すると分かりやすいです。

色名色のイメージ
red赤
blue青
green緑
black黒
white白
navy濃い青
teal青緑
orangeオレンジ

色を使うときは、読みやすさも大切です。背景色と文字色の差が小さいと、文字が読みにくくなります。文字色を変えるときは、背景との見え方も意識しましょう。

色名で文字色を指定するHTMLファイルの例

ここでは、レビュー一覧ページを例にして、見出しと段落の文字色を変えてみます。

ファイル名： Lesson10-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>映画レビュー一覧</title>
</head>
<body>
  <h1 style="color:teal;">レビュー一覧</h1>
  <p style="color:navy;">ヒューマンドラマ作品は、登場人物の心の動きが丁寧に描かれている点が魅力です。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、h1要素にcolor:teal;を指定し、p要素にcolor:navy;を指定しています。

colorは文字そのものの色を変えるプロパティです。背景色を変えるbackground-colorとは役割が違います。

CSSプロパティ役割
color文字色を指定する
background-color背景色を指定する

文字色だけを変えたいときはcolorを使います。要素の背景に色を付けたいときはbackground-colorを使います。

16進数カラーコードで色を指定する

CSSでは、色名だけでなく16進数カラーコードでも色を指定できます。16進数カラーコードは、#から始まる6桁の文字で色を表します。

<p style="color:#e91e63;">アクション作品は、スピード感のある展開が見どころです。</p>

#e91e63のように指定すると、色名では表しにくい細かな色も指定できます。

代表的な色の例を見てみましょう。

色の名前代表的な16進数カラーコード色のイメージ
red#FF0000赤
blue#0000FF青
green#008000緑
aqua#00FFFFシアン
orange#FFA500オレンジ
black#000000黒
white#FFFFFF白

16進数カラーコードを使うと、デザインに合わせて細かい色を指定できます。Web制作では、企業サイトやブランドカラーに合わせるために、カラーコードを使う場面がよくあります。

図2：文字サイズと文字色の指定

この図から分かること

font-sizeは文字の大きさを指定し、colorは文字色を指定します。文字サイズを変えると、重要な情報を目立たせやすくなります。文字色を変えると、ページの雰囲気や注目ポイントを調整できます。

色は色名でも16進数カラーコードでも指定できます。学習初期は色名で試し、慣れてきたらカラーコードを使うと、より細かな色指定ができるようになります。

font-weightで文字の太さを指定する

font-weightは、文字の太さを指定するCSSプロパティです。通常の太さにしたり、太字にしたり、数値で細かく指定したりできます。

font-weight:bold;

この指定では、文字を太字にします。

font-weightでよく使う値は次のとおりです。

値説明
normal標準の太さ
bold太字
100とても細い
400標準に近い太さ
700太字に近い太さ
900とても太い

数値指定では、100から900までを100単位で指定できます。ただし、実際にどの太さで表示できるかは、使用しているフォントによって変わります。フォントが細かな太さに対応していない場合、近い太さで表示されることがあります。

font-styleで斜体を指定する

font-styleは、文字を通常表示にするか、斜体にするかを指定するCSSプロパティです。

font-style:italic;

italicを指定すると、文字が斜体になります。作品名や引用的な表現、少し雰囲気を変えたい語句などに使われることがあります。

font-styleで使う主な値は次のとおりです。

値説明
normal標準の表示
italic斜体で表示する
oblique通常の文字を傾けて表示する

italicとobliqueは似ていますが、italicはフォントに用意された斜体を使うイメージです。obliqueは通常の文字を傾けて表示するイメージです。学習段階では、斜体にしたい場合はまずitalicを使うと分かりやすいです。

text-decorationで線の装飾を指定する

text-decorationは、文字に下線、上線、取り消し線などを付けるCSSプロパティです。

text-decoration:underline;

この指定では、文字に下線が付きます。

text-decorationでよく使う値は次のとおりです。

値説明
none装飾なし
underline下線を付ける
overline上線を付ける
line-through取り消し線を付ける

underlineは、重要な語句や注目させたい部分に使われることがあります。ただし、Webページではリンクにも下線が使われることがあるため、通常の文章に下線を多用するとリンクと混同される場合があります。

line-throughは、古い情報や取り消された内容を示したいときに使えます。たとえば、販売終了、変更前の価格、削除された項目などを表すときに使いやすい指定です。

太さ、斜体、装飾を指定するHTMLファイルの例

ここでは、映画紹介の文章に対して、太字、斜体、下線、取り消し線を指定します。

ファイル名： Lesson10-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>映画レビューの文字装飾</title>
</head>
<body>
  <p style="font-weight:normal;">ドキュメンタリー作品は、実際の出来事をもとにした深い内容が魅力です。</p>
  <p style="font-weight:bold;">アクション映画は、迫力ある映像とテンポのよい展開が楽しめます。</p>

  <p style="font-style:italic;">古典名作は、時代を超えて多くの人に親しまれています。</p>

  <p style="text-decoration:underline;">ミステリー作品は、最後まで展開が読めない点が魅力です。</p>
  <p style="text-decoration:line-through;">旧シリーズの上映予定は終了しました。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、5つのp要素にそれぞれ異なるCSSを指定しています。

指定役割
font-weight:normal;標準の太さにする
font-weight:bold;太字にする
font-style:italic;斜体にする
text-decoration:underline;下線を付ける
text-decoration:line-through;取り消し線を付ける

文字の太さ、斜体、線の装飾を使うと、文章の中で意味の違いを表しやすくなります。ただし、すべての文章を太字や下線にしてしまうと、どこが重要なのか分かりにくくなります。強調したい場所を絞って使うと効果的です。

図3：太さ、斜体、装飾で文字の印象を変える

この図から分かること

font-weightは文字の太さ、font-styleは斜体、text-decorationは線による装飾を指定します。同じ文章でも、太字にすると重要に見え、斜体にすると少し特別な表現に見えます。

下線や取り消し線は意味が伝わりやすい装飾ですが、使いすぎると読みにくくなります。文字装飾は、文章の中で目立たせたい部分や意味を補足したい部分に絞って使うと効果的です。

font-familyでフォントを指定する

font-familyは、文字に使うフォントの種類を指定するCSSプロパティです。フォントを変えると、ページの印象が大きく変わります。

たとえば、明朝系のフォントは落ち着いた印象を出しやすく、ゴシック系のフォントは読みやすく現代的な印象を出しやすいです。

font-family:sans-serif;

この指定では、ゴシック系のフォントを使うように指定しています。

font-familyでは、具体的なフォント名を指定することもできますし、フォントの種類を表す総称ファミリーを指定することもできます。

指定説明
serif明朝系、セリフ系のフォント
sans-serifゴシック系、サンセリフ系のフォント
cursive筆記体風のフォント
fantasy装飾的なフォント
monospace等幅フォント

monospaceは、すべての文字幅がそろったフォントです。コードや設定例など、文字の位置をそろえたい場面で使われます。

複数のフォントを指定する理由

font-familyでは、複数のフォントをカンマで区切って指定できます。

font-family:"Yu Mincho", serif;

この指定では、まずYu Minchoを使おうとします。もし利用者の環境にYu Minchoがない場合は、次の候補であるserifが使われます。

このように、最初のフォントが使えない場合に備えて、次の候補を用意することをフォールバックと呼びます。

書き方意味
font-family:"Yu Mincho", serif;Yu Minchoが使えなければserif系で表示する
font-family:sans-serif;環境にあるゴシック系フォントを使う
font-family:monospace;等幅フォントを使う

フォント名にスペースが含まれる場合は、ダブルクォーテーションで囲むと安全です。たとえば、Yu Minchoのようなフォント名は、font-family:"Yu Mincho", serif; のように書きます。

フォントを指定するHTMLファイルの例

ここでは、映画紹介の文章に明朝系とゴシック系のフォントを指定します。

ファイル名： Lesson10-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>映画レビューのフォント指定</title>
</head>
<body>
  <p style="font-family:"Yu Mincho", serif;">この行は、落ち着いた雰囲気の明朝系フォントを優先して表示します。</p>
  <p style="font-family:sans-serif;">この行は、読みやすいゴシック系フォントで表示します。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、1つ目のp要素でYu Minchoを優先し、使えない場合はserif系のフォントを使うようにしています。2つ目のp要素では、sans-serifを指定しています。

font-familyを使うと、ページの雰囲気を整えやすくなります。小説紹介のような落ち着いたページでは明朝系、案内ページや説明ページではゴシック系のように、内容に合わせてフォントを選ぶと読みやすくなります。

文字書式を組み合わせるときの考え方

CSSの文字書式プロパティは、1つだけで使うこともできますが、複数を組み合わせることもできます。

たとえば、文字サイズを大きくし、文字色を変え、太字にすることもできます。

<p style="font-size:20px; color:navy; font-weight:bold;">注目のレビューを紹介します。</p>

このように、style属性の中に複数のCSS指定を書く場合は、1つずつセミコロンで区切ります。

ただし、装飾をたくさん重ねると、文字が目立ちすぎて読みにくくなることがあります。文字書式を組み合わせるときは、次のように考えると整理しやすいです。

目的向いている指定
文字を大きくしたいfont-size
色で印象を変えたいcolor
重要な部分を太くしたいfont-weight
作品名などを斜体にしたいfont-style
変更前の情報を示したいtext-decoration:line-through;
ページの雰囲気を変えたいfont-family

CSSは、見た目を自由に変えられる便利な仕組みです。だからこそ、読者が読みやすいか、情報が伝わりやすいかを意識して指定することが大切です。

文字書式のCSSで起こりやすいミス

文字書式のCSSを書くときは、入力ミスにも注意しましょう。特に、プロパティ名、コロン、セミコロン、単位の書き忘れはよくあるミスです。

よくあるミス内容
単位を書き忘れるfont-size:24; のようにpxやptを忘れる
プロパティ名を間違えるfont-sizaのようにスペルを間違える
コロンを忘れるfont-size 24px; のように書いてしまう
セミコロンを忘れる複数指定の区切りが分かりにくくなる
全角記号を使う：や；などを使ってしまう
色名を間違えるnavyをnabyのように書いてしまう
フォント名の扱いを間違えるスペースを含むフォント名を正しく囲めていない

CSSがうまく反映されないときは、まずプロパティ名と値を確認しましょう。font-size:24px; のように、プロパティ、コロン、値、セミコロンの順番になっているかを見ると、原因を見つけやすくなります。

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

CSSプロパティ用途主な値の例
font-size文字サイズを指定する24px、18pt、larger、smaller
color文字色を指定するred、navy、teal、#e91e63
font-weight文字の太さを指定するnormal、bold、100から900
font-style斜体などの文字スタイルを指定するnormal、italic、oblique
text-decoration下線、上線、取り消し線などを指定するnone、underline、overline、line-through
font-familyフォントの種類を指定するserif、sans-serif、monospace、"Yu Mincho", serif