mosya

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

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

このレッスンでは、文字を好きな色に変えたり、大きさを調整したりする方法を学びます。

文字色を変更する

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

1. 色の名前を英語で指定する

redやblueなど。

2. RGBで指定する

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

ちなみに、緑色はrgb(0, 255, 0)、青色はrgb(0, 0, 255)、黒色はrgb(0, 0, 0)、白色はrgb(255, 255, 255)で表されるよ！

3. 16進数で指定する

#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タグ自体はタグとして特に意味を持たないタグなのですが、意味を持たないからこそ、装飾やスタイルの目的で使われます。