CSSで文字色やサイズを変更してみよう

初心者のためのCSS入門１2 / 9

前回のレッスンでは、CSSの基本を学びました。
このレッスンでは、文字の色や大きさを変える方法を学んでいきましょう。

文字色を変更する

文字色を変更するにはcolorを利用します。色を表現するには、3つの方法があります。

redやblueなど。

rgb(255, 255, 0)など。
赤・緑・青の3つの色を組み合わせて、色を表現する方法です。RGBの各色は、0から255までの値で表されます。

#000000、#ffffffなど。
0から9までの数字と、AからFまでの文字を使って表現します。16進数では、各色は2桁の16進数で表現され、各色は0から255までの10進数と対応しています。

rgbよりも16進数のほうが短く簡潔に表現できるため、一般的によく使われているよ！

色の組み合わせを正確に表現するために「カラーコード」が使われます。

カラーコードの調べ方

以下のようなサイトを利用することで好みの色のカラーコードを調べることができます。
他にもカラーコードを調べるためのサイトはいくつかあるので必要な場合は利用してみてください。

文字色だけでなく、背景色や線の色などもこの方法を使って色を変えることができます。

背景色を変えたい場合は、background-colorを利用します。

線の色の変え方は、あとのレッスンで学ぶよ！

文字のサイズを変更するにはfont-sizeを利用します。
サイズはpx, em, remなどいくつかの単位で指定できます。

px（ピクセル）

ピクセル（画素）を表します。pxは、画面解像度に応じて自動的に拡大・縮小されるため、異なるデバイスやブラウザでも一定の見た目を保つことができます。ただし、高解像度ディスプレイでは、同じpx値でも小さく表示される場合があるため、注意が必要です。

em（エム）

emは、文字サイズを基準にした相対的な単位で、現在の要素のフォントサイズに基づいてサイズが変わります。例えば、1emは、現在の要素のフォントサイズと同じサイズになります。現在の要素の親要素のフォントサイズを変更すると、emで指定された要素のサイズも変更されます。

.parent {
  font-size: 16px; /* 👈 基準の要素 */
}

.child {
  font-size: 2em; /* 32px */
}

rem（レム）

remは、root要素 のフォントサイズを基準にした単位です。root要素は通常、 html要素 です。つまり、ブラウザの既定のフォントサイズに基づいて、サイズが変わります。remを使用すると、それぞれの要素のフォントサイズが異なっていても、同じ比率でサイズを変更できます。

html {
  font-size: 16px; /* 👈 基準 */
}

p {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

まずは直感的でわかりやすいpx（ピクセル）単位を使ってみましょう。
pxの前の数字が大きくなるほど表示されるサイズは大きくなります。

下は、pタグの文字サイズを30pxにしたコードサンプルです。

p {
  font-size: 30px;
}

例えば、文字サイズや色を同時に変えたい時、下のように2つ以上組み合わせることが可能です。
このように、同じ要素に対して、まとめて書くことができます。

文章の途中で文字の色を変えるにはspanタグが便利です。
spanタグ自体はタグとして特に意味を持たないタグなのですが、意味を持たないからこそ、装飾などの用途で利用されます。