【HTML&CSS】文字の色、大きさを指定する方法を解説！

どうも皆さんこんにちは！kwです！

今回は、文字の色、大きさを指定する方法を解説していきます！

これらの技術はウェブデザインの基礎なので、まだ知識が曖昧な方やこれからCSSを学び始める人なども今回で是非覚えちゃってください！

また、CSSの読み込み方が分からない方は自分の別の記事をご参照ください！

文字の色を指定するには、CSSのcolorというプロパティを使います。

使い方は、色を変えたい文字を囲っているタグに、colorプロパティで色を指定します。

具体的な例はコチラ↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

こんな簡単なコードで文字に色をつけることができてしましますね！

※ちなみに、ここでいう色を変えたい文字を囲っているタグとは、<p>タグのことです。

このように、colorプロパティを使えば、文字に色をつけることができます。

なお、今回文字色をredと記述しましたが、もう少し細かい色を指定する場合は、十六進数で表します。

なお、十六進数はややこしいので、redなど適当な色を指定した後に、今回だとredの部分にカーソルを合わせるとカラーピッカーが出現するので、そこから指定することも可能です。

また、代表的な色（red,blue,whiteなど）は十六進数なども必要なく、ただ単に色を入力してあげるだけでしっかり反映されます。

文字の大きさを指定するには、CSSのfont-sizeというプロパティを使います。

先ほどの、文字の色を変える方法と同様に、大きさを変えたい文字を囲っているタグにfont-sizeプロパティで大きさを指定します。

※なお、大きさの単位はpx（ピクセル）です。

実際に例を見てみましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

どうでしたか？

<p>タグなのに文字がものすごく大きいですよね！

このように、font-sizeプロパティを使うと、文字の大きさを自由に変更することができます。

※先ほどと同様に、ここでいう色を変えたい文字を囲っているタグとは、<p>タグのことです。

こんな簡単な技術で文字の大きさを変更することができます。

いかがでしたでしょうか？

今回は、ウェブデザインの基礎である、文字の色、大きさを指定する方法を解説しました。

まだはじめたての人からしたらここで結構つまずいてしまっている方も少なくはないと思います。

ですが、まだまだウェブデザインは奥が深いです。

ここを乗り越えることができれば大きく成長できますので、ここで分からない方も猛威少し頑張ってみてください！

今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。