記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

CSS【フォントサイズ】+【フォントカラー】+【フォントウェイト】サンプルコード付き(初心者向け)

「フォントサイズ」「フォントカラー」「フォントウェイト」の3点を中心に初心者のかた向けに解説。 基礎知識・使用方法をサンプルコード付きで詳しく解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「フォントサイズの指定がしたい・・!」「フォントカラーを変えたい・・!」「文字の太さを変えたい・・!」
フォントについてもっと詳しく知りたいと思っている、初心者WEB製作者の方も多いのではないでしょうか?
今回は、初心者の方向けに「フォントサイズの指定方法」「フォントカラーの指定方法」「フォントウェイト(太さ)の指定方法」を中心に詳しく解説していきます。

font-sizeとは?

font-sizeとは文字のサイズを指定する、CSSプロパティで、文字の大きさを指定する事ができます。
基本記述は、下記のように、セレクタ{font-size: 値;}となります。
フォントサイズ基本記述

値に大きさを指定する事で、変更する事ができます。

サンプルコード表示結果↓
文字大きさ1
文字大きさ2

HTMLサンプルコード

CSSサンプルコード

サンプルコードでは、単位をpxで指定しましたがその他にも、「px」「%」「em」「rem」「vh」「vw」などがあります。
下記より指定できる単位を解説します。

font-sizeに指定できる単位

font-sizeに指定できる単位を6点紹介しますが、少し長くなりますので最初に用途別のオススメを2点紹介します。

●オススメ1
初心者のうちは1番目に紹介する「px」が最もオススメです、理由は最もポピュラーで、分かりやすく明示的に指定できる単位だからです。

●オススメ2
レスポンシブ デザインをするなら4番目に紹介する「rem」が最もオススメです、
理由は、親要素単位での文字サイズの影響受けず、最上位からの、文字の大きさを相対的に指定する事ができるからです。

少し分かりづらいと思うので、初心者のうちは「px」。
スマホ用のレスポンシブ を実装したいと思ったら「rem」も気にしてみる、という理解で大丈夫です。

PX

最もポピュラーで、分かりやすく明示的に指定できる単位です。
数字が大きくなればなるほど、文字を大きく指定できます。

サンプルコード表示結果↓

フォントサイズ16pxのテキスト

フォントサイズ30pxのテキスト

HTMLサンプルコード

CSSサンプルコード

%

%は親要素に対しての割合で指定します。 下記にて例を出します。

サンプルコード表示結果↓

文字

HTMLサンプルコード

CSSサンプルコード

親要素(sample-1)に対してfont-size、30pxを指定すると、子要素p(文字)も30pxに指定されます。
ここで子要素p(文字)に50%を指定すると。
文字サイズが親要素のfont-size: 30px;の50%で表示されます。
つまり15pxで表示されます。

CSS追加サンプルコード

子要素p(文字)に50%を指定したサンプルコード表示結果↓

文字

%は親要素に影響され文字の大きさが決まります。

em

emも%と同じで親要素に影響を受けて大きさが決まります。
単位としては、「1em=100%」「1.5em=150%」「2em=200%」となります。
今回は親要素の大きさ(文字サイズ30px)、子要素に1.5emを指定する事で45pxで表示されます。

サンプルコード表示結果↓

文字

HTMLサンプルコード

CSSサンプルコード

emも親要素の影響を受け、文字の大きさが決まります。

rem

HTMLタグに指定された文字サイズを基準とする、相対的な文字サイズ指定の単位です。
「%」や「em」は親要素からの影響を受けますが、remは「最上位」からの影響を受けます。
rem(主要なブラウザのデフォルト文字サイズは16px 1rem=16px、2rem=32px)

つまり「rem」は親要素単位での影響を気にせず、文字の大きさを相対的に指定する事ができます。
emとremの親要素の値の引き継ぎ方の違い「レスポンシブ デザイン」にremが向いているのは、上記のためです。
今回、レスポンシブ デザインとremの関係について詳しくは解説しませんが、詳しく知りたい方は、下記を参考にしてください。
emとremの親要素の値の引き継ぎ方の違い
https://web-roku.com/css-rem

サンプルコード表示結果↓

文字

HTMLサンプルコード

CSSサンプルコード

※解説
フォントサイズの値を2remと指定する事で、32pxの文字サイズを表示する事ができています、これは主要ブラウザの文字サイズのデフォルト値が16pxだからです。 (1rem=16px、2rem=32px)

VH

画面の高さを基準に、文字の大きさを指定します。
1で高さの1%、10で10%の大きさになります。
分かりづらいと思うので下記のサンプルコードを、ご自身のコードにコピペで貼り付けて、画面幅を縦に伸ばしてみてください、文字の大きさが変わり、理解が深まります。

HTMLサンプルコード

CSSサンプルコード

vw

画面の横幅を基準に、文字の大きさを指定します。 1で横幅の1%、10で10%の大きさになります。 分かりづらいと思うので下記のサンプルコードを、ご自身のコードにコピペで貼り付けて、画面幅を横に伸ばしてみてください、文字の大きさが変わり、理解が深まります。

HTMLサンプルコード

CSSサンプルコード

font-color(文字の色)

fontタグにはカラーを指定する事ができます。
指定方法は、CSSプロパティcolorを指定します。

値には、カラーネームか6桁のカラーコードで指定します。
カラーネームは「red」「blue」「green」などの英語で色を指定

カラーコードは、16進数で色の数値を指定、詳しく知りたい方は下記を参考にしてみてください。 http://www.netyasun.com/home/color.html

今回は、分かりやすくカラーネームで指定してみます。

サンプルコード表示結果↓

フォントカラーレッドのテキスト

フォントカラー指定なしのテキスト

HTMLサンプルコード

CSSサンプルコード

文字色が赤色で表示されました、簡単に指定する事ができますね。
お好みのカラーに変更してみてください。

font-weight(文字の太さ)

文字の太さを指定する事ができます。
指定方法はCSSプロパティfont-weightを使用します。

指定できる値を下記より紹介していきます。

指定できる値

normal・blod

narmalが初期値、boldが太字になります。 表示してみます

サンプルコード表示結果↓

フォントの太さ普通のテキスト

フォントの太さ太字のテキスト

HTMLサンプルコード

CSSサンプルコード

数値での指定

太さを指定できる数値は、100.200.300.400.500.600.700.800.900の9段階あります。 しかしほとんどの日本語フォントは細かい対応ができず、普通か、太字のみで、数値も700以上から太字で反映される設定になっています。

サンプルコード表示結果↓

フォントの太さ100指定

フォントの太さ300指定

フォントの太さ700指定

HTMLサンプルコード

CSSサンプルコード

まとめ

今回は、初心者の方向けに「フォントサイズの指定方法」「フォントカラーの指定方法」「フォントウェイト(太さ)の指定方法」を中心に詳しく解説しました。
最後にポイントをまとめます。

1.フォントサイズの指定方法は、
セレクタ{
font-size: 値;
}

2.font-sizeで指定できる単位を6点紹介
「px」「%」「em」「rem」「vh」「vw」
初心者にオススメの値は「px」
レスポンシブ にオススメな値は「rem」

3.フォントカラーの指定方法は
セレクタ{
color: 値;
}

4.フォントウェイトの指定方法は
セレクタ{
font-weight: 値;
}

指定できる値3点紹介
「normal」「bold」「数値」

いかがだったでしょうか?
WEBサイトの大部分は文字、テキストがしめます。
この記事を参考に、理解・実践できる様になったら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。