/*サーチコンソール*/ /*google adcense*/

文字のサイズと太さの指定方法【CSS】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回は文字サイズと文字の太さの指定方法について、初心者向けに解説していきます。もしCSSについてよくわからないという方は「CSSの基本書式【初心者向け】」を先に読むと、この記事をより理解できます。

文字のサイズと太さの指定方法
この記事の要点まとめ
文字サイズを変更
文字サイズを変更するには「font-size」プロパティを使用する。
pxで指定
pxで文字サイズを指定するのはオススメしない。
%で指定
個人的に文字サイズは%で指定するのがベスト。
相対サイズで指定
元のサイズより大きくする場合は「lager」、小さくする場合は「smaller」を使用。
文字の太さを変更
文字の太さを変更するには「font-weight」を使用。
ヒナとハリボーの部屋

文字サイズを変更

ハリボー
ハリボー

文字サイズって変える意味あるの?

もちろん!そのサイトやブログに合った文字サイズや、ターゲットに合わせた文字サイズを指定する必要があるよ。

ヒナ
ヒナ

文字サイズを変更するには、「font-size」プロパティを使用します。値には指定したい文字サイズを記述します。

この文字サイズの値は、「単位を指定」「%で指定」「絶対サイズで指定」「相対サイズで指定」する4つの方法があります。さらに、この中で単位や絶対サイズには数種類あります。これを全て説明していくと長くなってしまうので、また別の記事で説明していきます。

今回はこの中から抜粋して簡単にご紹介します。文字サイズの値の指定方法として、以下のものを抑えておけば問題ありません。

pxで指定

まずは「px」という単位を指定した方法をご紹介します。pxは「ピクセル」と読み、web制作ではよく使用される単位です。

サイズの単位と聞くと「cm」などが一般的で、「1pxは何cm?」と思われるかもしれません。しかしこれに答えることは難しく、1pxのサイズは使用するデバイスの画面サイズや規格によって変わってきます。これを説明するには画面の解像度の説明からする必要がありますが、CSSをする上でこの知識はとりあえずは必要ありません。この記事では簡単に説明しますので、記憶の片隅にでも置いてください。

今これを見ているPCやスマホの画面は「小さな点の集合体」でできています。この小さな点一つが1pxで、「画素」と呼ばれます。画素数(それぞれのデバイスを構成する画素(px)の数)は、画面のサイズによって異なります。わかりやすい例としてスマホでは綺麗に見える画像でも、PCでは荒く見えることがあります。これは「スマホに適した画素数のものを、PCで無理やり拡大」することによって起こる現象です。

文字サイズをpxで指定するのは「一文字に対して何個の画素を使用して表示するか」という指定をするということです。察しの良い方はもう気づいたかもしれませんが、「自分の使用デバイスで最適サイズに指定しても、別デバイスで見ると文字が大きい、もしくは小さい」という問題が発生することがあります。

僕もブログを始めたばかりの頃は、よくわからず文字サイズをpxで指定していました。ですが、このような問題を避けるためにも、pxで文字サイズを指定することはオススメしません。

文字サイズをpxで指定する
クリックで拡大

%で指定

前章で「pxで文字サイズを指定することはオススメしない」といいました。では何で指定すればいいのかとなりますが、僕はこの「%で指定する」方法をオススメします。

%は、「それぞれのデバイスで表示されている基本的なサイズの何%のサイズで表示する」というものです。基本サイズは100%で、それよりも大きくしたい場合は100%以上、小さくしたい場合は100%以下で指定します。

もともとある文字のサイズから大きさを指定するので、pxのように別デバイスで見たときに画面サイズに対して大きい、小さいと言った問題は発生しません。

相対サイズで指定

これは%に近い指定方法です。「何%でもいいけどとりあえず文字を大きくしたい、小さくしたい」という人はこちらの方がいいかもしれません。pxや%は「font-size: 16px」「font-size: 120%」のように値にサイズを指定しますが、サイズを指定せず、もとのサイズよりも大きいか小さいかだけで指定する方法です。

もとの文字サイズよりも1段階大きくしたい場合は「lager」、小さくしたい場合は「smaller」を指定します。

See the Pen 相対サイズ指定 by Kosei@SplaTech (@pompom_stk) on CodePen.

文字の太さを変更

ハリボー
ハリボー

大切なポイントの文字を太くしたり、よくするよね。

文字の太さを変更するには「font-weight」プロパティを使用します。値には指定したい太さを記述しますが、数値で指定する方法とキーワードで指定する方法があります。

数値で指定するには、100、200、300〜900まで、の9段階で行います。数値が大きくなれば文字も太くなります。1/10や1/100での指定はできないので、注意しましょう。

キーワードで指定する場合は以下の通りです。どれも数値で表すこともでき、どのキーワードがどの数値に該当するかも参考までに載せておきます。

キーワード 説明 該当する数値
normal 標準の太さ 400
bold 太字に指定 700
light 現状より1段階細く指定 現状の数値-100
bolder 現状より2段階太く指定 現状の数値+100

僕は普段boldで指定していますが、下のCodePenを作るのに初めて数値で指定してみました。文字を細く指定するのも初めてですが、100と400ってあまり変わったように見えませんね(笑)400と700は明らかに違い、700と900はよく見れば違うというレベルです。

文字の太さに対するこだわりが強い方以外は、太字に指定する値はboldだけでいいんじゃないかなと思います。

See the Pen 文字の太さを指定 by Kosei@SplaTech (@pompom_stk) on CodePen.

ヒナとハリボーの部屋

ハリボー
ハリボー

久しぶりだね、このコーナー。

そうだね。記事の終わらせ方に悩んだんじゃないかな。

ヒナ
ヒナ
ハリボー
ハリボー

なるほどね、そんなことはいいとして、文字のサイズと太さの指定する方法がわかったよ!

そこまで難しくなかったでしょ。サイズも太さもサイトを見やすくするのに大切だから、状況に応じて変えて行こうね。

ヒナ
ヒナ

※ヒナとハリボーの部屋は僕が以前、動物ブログをしていたとき、記事の最後に設けていたコーナーです。記事の最後は二人に会話してもらった方が楽しくまとめられるかなと思って、今回このブログで初めて使用しました。決して記事の終わらせ方に悩んだというわけではありません(笑)