Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

 > 

フォントの大きさや太さの調整

フォントの大きさや太さの調整


Webサイトは、画像や動画、お問い合わせフォームなど様々なコンテンツから成り立ちますが、その中でも欠かせないのが「文字(フォント)」です。
インパクトのある商品画像があっても、商品の説明文がなければきっと売れません。そして、その説明文が読みづらければ商品はなかなか売れないでしょう。
文字を読みやすく整えることは、CSSの役割の中でも特に重要なところです。
今回は文字を整えるCSSプロパティを紹介していきます。

文字の調整は結構簡単!

CSSの基本がわかってくると色々な調整を加えたくなり、見た目的にちょっと派手な調整をしたくなると思います。
僕もCSSを覚えたての頃は、:hover を使ってマウスホバー時にちょっとしたアニメーションをつけたりするのが好きでした(笑)
一方で、フォントサイズの微妙な調整や、行間隔の調整など「文章を読みやすくする工夫」は地味で見た目も大きく変化するわけではないので、いい加減になってしまっていました。

ですが、実際のウェブ制作の仕事では当然ながら派手なCSSアニメーションよりも、文字の見やすさやバランスが重視されます。
初めてWeb制作のお仕事を頂いた時、フォントのサイズやバランスに細かくご指示を頂いたのですが、当初は正直「ここまで細かくこだわらなくても良くない?」と思いました。(笑)
しかし、指示通りに作ってみると文字のバランスが整っているだけで全体的にもスッキリまとまり、フォント調整という地味だけど基礎的な調整の大切さを学びました。

フォントの調整は、CSSの中ではとても簡単な部類です。ゆえに独自のアレンジを取り入れづらく、「誰がやっても同じ調整になる」というとても地味な作業になります。
ですが、Web制作を行う時にこの地味な作業を避けてしまうと、良いWebサイトは出来上がりません。
誰にも文句を言われない自分のWebサイトなら好き勝手に作っても良いのですが、将来的に誰か他の人のWebサイト制作をやってみたいという方は、こういった地味なCSS調整こそ大事にして頂きたいと思います。
それでは、フォントの調整CSSについて説明していきます!


◆ font-size(フォントサイズ)とは ◆

font-size(フォントサイズ)プロパティは名前の通り、フォントの大きさを調整するプロパティです。

セレクタ { font-size: 16px; }
といった形で単位をつけて記述します。

また、Web制作で使う単位の記事でも話しましたが、px指定だと絶対単位なので、Webブラウザでフォントサイズ調節機能を使ってもフォントの大きさが変わらなくなってしまいます。
ユーザービリティに配慮するのであれば、font-sizeプロパティの値の単位はpxではなく、emやremといった相対単位を使用すると良いでしょう。

font-sizeで相対単位を使用するにあたり、基準となる数値はキリが良い数値にしておくと計算が楽です。
例えばremの基準となるルート要素(html要素)の数値は、デフォルトだと16pxなのですが、これをそのまま使うと1.5remで何pxになるかパッと計算しづらいですよね。
なので、
html { font-size: 10px; }
とした上で、remを使用した方が使い勝手は良くなると思います。

それでは、サンプルコードを見ていきましょう。※分かりやすいように単位はpxを使っています。


HTML
<p>この文章のフォントサイズを20pxに設定</p>

CSS
     p {
        font-size: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

毎度のことながらbockground-colorとwidthは、分かりやすくするための記述なので気にしないで下さい。
上記のコードを実行するとこのようになります。


この文章のフォントサイズを20pxに設定


このブログ記事の通常の文字の大きさが16pxなので、ブラウザのフォントサイズ調節機能を変更していなければ、この文章よりもちょっと大きめに表示されているかと思います。

見出しや強調したい部分ではフォントサイズを大きめに設定し、注釈や著作権表示などコンテンツの補足となる部分は小さめに設定するとメリハリが出て見やすいページに仕上がります。

    POINT!
  1. ・font-sizeは文字の大きさを調整する!
  2. ・絶対単位のpxを使うと、ブラウザのフォントサイズ調節機能を使っても文字の大きさを変えられなくなる場合があるので注意!

◆ font-weight(フォントウェイト)とは ◆

font-weightプロパティは、文字の太さを調整するプロパティです。
先述のfont-sizeプロパティと異なる点は、「単位で細かく指定はできない」という点です。

一応、数値でも指定はできるのですが、そもそもフォント自体に「太字・普通・細字」しか用意されていない場合が多く、「あとちょっとだけ太く(細く)したい」という微調整は不可能であることが多いです。
なので、font-weightプロパティの値としては、bold(太字にする)、lighter(細字にする)さえ押さえておけばとりあえずはOKです。(普通サイズはデフォルトなので)

それでは、サンプルコードの紹介です。


HTML
<p>この文章を太字に設定</p>

CSS
     p {
        font-weight: bold;
        background-color: lightyellow;
        width: fit-content;
      }

上のコードを実際に表示させると、下のようになります。


この文章を太字に設定


他の文章とのバランスでフォントサイズを変えたくないけど、文字を強調したい場合などにこうやって太字にすることはよくあります。
ただ、太字にするとやや文字と文字の間が窮屈に見えてしまう場合があるので、その時はletter-spacingプロパティで文字と文字の間隔を少し広げると良いでしょう。
太字部分が2行になることはあまりないかと思いますが、2行以上になる場合は後述のline-heightプロパティで行間隔を空けることも大切です。

    POINT!
  1. ・font-weightは文字の太さを設定する!
  2. ・太字にすると目立たせられるが、読みづらくなる場合もあるので気をつけよう!

◆ line-height(ラインヘイト)とは ◆

line-heightプロパティは、 行間隔 を調整するプロパティです。
font-sizeプロパティや前回記事の 余白の設定 など、ほとんどのプロパティの値には単位が必要ですが、このline-heightプロパティはむしろ単位をつけないことが推奨されています。

先ほどのfont-weightは値に数値を設定できるのに単位をつけられない珍しいプロパティですが、line-heightプロパティは値に単位をつけることもつけないこともできる、これまた珍しいプロパティです。
そして、なぜ単位をつけないことが推奨されているかと言うと、(特に)相対単位を使うと予期しない親要素の値を継承してしまい、思ったような設定にならない場合があるからです。
仮に設定時はうまくいったとしても、あとでCSSをカスタマイズするとなった時に、親要素の基準値を変えたことでline-heightの値にも影響を及ぼしてしまうということも考えられます。
line-heightに関しては単位をつけるメリットは全くないと言えるので、最初から単位なしで設定することに慣れておくのが良いと思います。

またline-heightの値ですが、だいたい1.5~1.7あたりに設定すると読みやすくなります。
それではサンプルコードで確認してみましょう。

HTML
<p>この文章はline-heightを1に設定します。<br>2行にしないと分からないので改行をいれます。</p>

CSS
     p {
        line-height: 1;
        background-color: lightyellow;
        width: fit-content;
      }

上記のコードを表示させると次のようになります。


この文章はline-heightを1に設定します。
2行にしないと分からないので改行をいれます。


いかがですか?line-heightの値が1だと、行間隔が窮屈でちょっと読みづらい感じがしますね。
それでは、今度はline-heightを1.6に設定してみます。(line-heightの値を変えるだけなので、コードは省略します)


この文章はline-heightを1.6に設定します。
2行にしないと分からないので改行をいれます。


行間隔が空いて、読みやすくなったのが分かるかと思います。
line-heightを設定しなくても読めないことはないですし、中にはそこまで気にしない方もいるでしょう。ですが、少しでも多くの人が読みやすくするためには、こういった細かで地味な設定が欠かせません。
CSSによる調整も簡単で単純なぶん、あえて悪いように言うと「やりがいを感じない調整」とも言えちゃうわけですが、Webサイトの土台となるとても大切な設定なので、手を抜かないようにしていきましょう!
…と、自分に言い聞かせています(笑)

    POINT!
  1. ・line-heightは行間隔の調整を行う!
  2. ・値には単位をつけない方が良い!

ワンポイントチェック

文字を太字にするには、今回紹介したfont-weightプロパティを使う方法と、文章の挿入で使うHTMLタグの記事でもご紹介したように、HTMLの<strong>タグを使うという方法もあります。
これらの使い分けはどのようにしたら良いのでしょうか?

全体を太字にする場合はCSSで他のプロパティと同時に設定した方が手間がかかりません。
一方、全体ではなく一部分だけ太字にしたい…たとえばここの部分だけ太字にしたいという場合は<strong>タグを使った方が早いです。
CSSで同じことをやろうと思ったら、太字にしたい部分の前後に<span>タグなどを挟み込み、さらにCSSでfont-weightを設定する必要が出てくるからです。

ですが、ここで問題となるのは「strongタグで太字にしたけど、太字にするだけでなく字の色も変えたい」となった場合です。
最初からCSSで調整していれば、colorプロパティを追加するだけで良いので何の問題もないのですが、strongタグで太字にした場合は、結局spanタグで挟んでCSSで調整する…という二度手間になってしまいます。
太字にする以外にも調整を加える可能性があるのであれば、strongタグではなくCSSで調整した方が良いです。

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。
学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)
HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="font.css">
  </head>
  <body>
    <p class="fontsize32">フォントサイズ32px</p>
    <p class="fontsize16">フォントサイズ16px</p>
    <hr>
    <p class="bold">bold指定で、strongや見出しタグを使わなくても太字になります</p>
    <hr>
    <p class="italic">フォントスタイル=イタリックで、Italic(イタリック)体になります</p>
    <hr>
    <p class="lineheight">比較的長い文章で、何行かに分かれるときの行間隔は「line-height」で設定を行います。<br>
    具体的には「line-height:1.7」でこのような感じになります。<br>
    line-heightを設定しないと、デフォルトでは行間隔が狭すぎたりするので注意しましょう!</p>
  </body>
</html>

CSS

.fontsize32 {
  font-size: 32px;
}

.fontsize16 {
  font-size: 16px;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.lineheight {
  line-height: 10;
}


« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
RO・Y・DO(rowaido)

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン