【 初心者向け 】CSSでtextの見た目を変える方法5つを解説

ウェブサイトにおいて、テキストは情報を伝えるという非常に大切な役割を持っています。それだけに、見せ方はとても重要です。

情報を正確に分かりやすく伝えるために、ユーザーの視覚に効果的にアプローチしなければなりません。しかし、HTMLだけでは、それはできません。HTMLは、情報を記述するという役割しか持っていないのです。

テキストの見た目を変えるために必要なのが、CSSです。

この記事では、CSSでテキストの見た目を変える方法を5つ紹介しているので、ぜひ参考にしてください。

CSSでテキストの大きさを変える

テキストが小さいと、読みにくく、ユーザーもWebサイトを見ることを辞めてしまうでしょう。逆に大きすぎても読みにくくなるとともに、一度に表示できる情報も限られてしまいます。

ユーザーの快適な閲覧のためには、テキストは適切な大きさで表示させなければなりません。また、見出しなど、ユーザーの目を引きたいテキストは大きくするという見せ方が一般的です。

テキストの大きさを変えるには、以下のような記述を行います。

CSS
p {
font-size:14px;
}

font-sizeというプロパティで、テキストの大きさを調節します。これで、p要素のテキストが14ピクセルに設定されました。サイトによって設定は異なりますが14ピクセル～16ピクセルが通常のテキストの一般的なサイズです。

テキストのサイズは、さまざまな単位で設定できます。

px

モニターの画素（ピクセル）を基準としている単位です。どんな環境でも、決して大きさが変わりません。そのため、デザインを固定したいときなどに便利ですが、変わらないという点がデメリットになる場合もあります。

そのデメリットとは、デバイスによってテキストの大きさを変えたいレスポンシブデザインのときに、管理が煩雑になってしまうといったケースです。

%

親要素のテキストの大きさを基準として、パーセンテージによって大きさを指定します。親要素が無ければ、htmlのテキストのサイズを参照します。

CSS
p {
font-size:90%;
}

このように記述することで、p要素のテキストは親要素の90パーセントの大きさになります。

フレキシブルに大きさが変わるので、レスポンシブデザインのときなどに便利です。

しかし、テキストのサイズを割合で計算する必要があるため、デザインを完全に再現するには少々難易度が高くなってしまいます。

em

%と似た単位で、親要素の大きさを1として相対的な指定を行います。

CSS
p {
font-size:1.2em;
}

親要素の1.2倍という記述です。これも、レスポンシブデザインなどに向いています。

テキストの大きさの指定においては、%よりも使われることが多い単位です。

親要素の影響を受けるため、同じ指定でもHTMLの記述場所によって大きさが異なるという点には気をつけてください。これは、%も同じです。

rem

HTML（ルート要素）の大きさを1とした記述法です。

CSS
p {
font-size:1.2rem;
}

このように、emとほぼ同じ記述を行います。親要素の影響を受けないので、HTMLのサイズを変更するとすべて一律で大きさが変わります。

テキストの大きさを一括で管理したいときや、レスポンシブデザインのときなどに便利です。

しかし、HTMLの大きさを変えると、すべてのテキストが変わってしまうという点には気を付けてください。思わぬところで、見え方が大きく変わってしまうという可能性もあります。

CSSでテキストの行間を変える

行間も大きさと同様、ユーザーの快適な閲覧にとても大切な要素です。

テキストとテキストの間がくっつきすぎていると非常に読みにくいし、離れすぎていると間延びした印象を与えてしまいます。

行間の指定はほぼ必須と言えるでしょう。以下のように記述します。

CSS
p {
line-height:28px;
}

line-heightが、行間を指定するプロパティです。

line-heightの考え方

上記で紹介したCSSは、単純に28ピクセルの行間がとられるというものではありません。

まず指定された数値から、テキストの大きさを引きます。テキストが14ピクセルだとすると、28-14で14ピクセルが残りました。これを2等分して、テキストの上下に割り当てます。

つまり、7ピクセルがテキストの上下に挿入されます。

文字サイズと行間の差のことを、レディングと呼びます。レディングを2で割った上下の数値は、ハーフ・レディングです。

%やemでもこの考え方は変わりません。1.6emであれば、まずテキストの大きさ分、1.0emが引かれ、残りの0.6emが二等分され、上下に0.3emが挿入されるという計算になります。

行間は単位を記述せず、数値だけでも指定できます。

CSS
p {
line-height:2;
}

これは、テキストの2倍という記述です。つまり、0.5倍の行間がテキストの上下に挿入されます。

このように、line-heightはピクセルではなく、テキストの大きさを基準とした相対的な指定の方が一般的です。

なお、line-heightは1.5～2.0程度の指定が適正とされています。

CSSでテキストの太さを変える

特定のテキストを目立たせたいときなどに、太さを変えて強調することができます。

HTML
<p>サンプルテキスト</p>

CSS
p {
font-weight:bold;
}

font-weightはテキストの太さを変えるプロパティです。boldで太字になります。これは、シンプルにp要素の範囲内すべてを太くするという記述です。

p要素全体を目立たせたい場合は有効ですが、特定の範囲だけを目立たせるということはできません。

以下のような記述で、特定の範囲のテキストだけを強調することができます。

HTML
<p>サンプル<span>テキスト</span></p>

CSS
p span{
font-weight:bold;
}

p要素内に使用可能なspanタグで、「テキスト」の部分だけを囲いました。そしてCSSで、spanにboldを指定しています。これで、文中の特定の箇所だけを強調することができます。

font-weightの値について解説

font-weightに指定できる値は、boldだけではありません。

100、200、300、400、500、600、700、800、900と9段階の数値で指定することもできます。ただし、9種類の太さが用意されているフォントは決して多くなく、指定しても太さが変わらないことは、珍しくありません。一般的には400が通常の太さで、700がboldです。

他に、相対的に一段階細くするlighter、相対的に一段階太くするbolderがあります。これも、数値と同じ理由で、指定しても太さが変わらないことが多くあります。

テキストを太くしたいときは、boldを使うのが一般的で、数値とlighter、bolderはあまり使われていません。

strongも指定できる

テキスト内の特定の部分だけを太くする方法として、HTMLのstrongタグを使うという方法もあります。

これはHTML上で重要な部分を囲うときに使うタグで、SEOの効果があります。spanタグには、こうした効果がありません。

strongタグは多くの場合、デフォルトの設定が太字になっています。見た目上もHTML上も、強調したい内容のときに便利なタグです。

ただし、ごく稀に強調の表現が太字ではないブラウザもあるので、気を付けてください。

CSSでテキストの色を変える

まず最初に、ページ全体のテキストの色を決めなければなりません。

以下のように記述します。

body {
color:#333333;
}

colorがテキストの色を指定するプロパティです。これで、bodyの中すべてのテキストの色が、設定されます。#333333は黒です。純粋な黒は、#000000ですが、これだとユーザーの目が疲れてしまうので、少し色を落とすのが一般的です。#333333も間違いなく黒と呼べる色で、薄くて見づらいということはありません。

個々の要素にも、色を指定できます。

CSS
a {
color:
#0000ff;
}

これで、リンクテキストの色が青くなります。またfont-weightと同様、spanタグで囲って特定の部分だけ色を変えるといったことも可能です。

なお、値はred、blueなど色の名前で指定することも可能ですが、デザインを忠実に再現するためには指定可能なカラーコードがよいでしょう。

CSSでテキストを装飾する

テキストそのものだけでなく、装飾をつけることで見せ方を変えることも可能です。

CSS
p {
text-decoration:underline;
}

text-decorationが、装飾に関するプロパティです。これで、p要素に下線が引かれます。underlineはリンクによく使われる値です。

CSS
a:hover{
text-decoration:underline;
}

hoverは、マウスが乗っているときという意味です。これで、リンクの部分にカーソルが触れたときだけ、テキストに下線が出るようになります。

他に上線のoverline、取り消し線のline-throughがあります。古い情報を訂正しつつ、新しい情報を掲載したいときなど取り消し線は有効な表現です。しかし、text-decorationは文字の装飾なので、spanタグなどで囲ってもSEOの意味はありません。

古い情報に取り消し線を引きつつHTML上の重要度も下げたいというときは、delというタグを使用してください。

CSSでテキストの見た目を変える方法：まとめ

テキストはページの内容を伝える、ウェブサイトにとって命ともいうべきものです。

上手く伝わらなければ、ウェブサイトが役割を果たすことができません。

CSSというとレイアウトなどに気を取られがちですが、テキストの見せ方もとても重要なものです。

読みやすさというのは、なかなか意識しにくいものですが、成果に直結するものでもあります。厳密に指定するようにしてください。