先生と生徒の会話形式で理解しよう

生徒

「Bootstrapを使うと文字の大きさやフォントって最初から決まっていますよね？自分のサイト用に変えることはできますか？」

先生

「はい、できますよ。BootstrapではSass変数を使って、フォントや文字サイズ、行間を管理しています。代表的なのが$font-family、$font-size-base、$line-height-baseです。」

生徒

「それぞれ何を意味しているんですか？」

先生

「簡単に言うと、$font-familyは『文字の種類』、$font-size-baseは『基本の文字サイズ』、line-heightは『文字の行間』を表しています。これを調整すれば読みやすくて統一感のあるデザインにできますよ。」

1. $font-familyとは？

$font-familyは文字の種類を指定する変数です。Bootstrapの初期設定では「-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto…」など、見やすくて使いやすいフォントが順番に並んでいます。

これは「使えるフォントがなかった場合の保険」として複数のフォントを並べておく仕組みです。初心者の方は「フォントの候補リスト」と覚えると分かりやすいでしょう。例えばブランドサイトなら、自社のイメージに合ったフォントを追加することで雰囲気を統一できます。


<style>
body {
    font-family: "Noto Sans JP", Arial, sans-serif;
}
</style>

<p>これはNoto Sans JPを使った文字です。</p>

ブラウザ表示

2. $font-size-baseとは？

$font-size-baseは「文字の基本サイズ」を決める変数です。Bootstrapのデフォルトは16px（1rem）です。これを基準に、h1やh2などの見出しのサイズが自動的に計算されて決まります。

つまり、この数値を変えるとサイト全体の文字バランスが一気に変わります。例えば「少し大きめの文字で読みやすいブログを作りたい」なら18pxに変更すれば、全体的に文字が大きく見やすくなります。


<style>
body {
    font-size: 18px;
}
</style>

<p>これは18pxに設定した文字です。</p>

ブラウザ表示

line-heightは文字と文字の行間を調整するプロパティです。Bootstrapの初期値は1.5になっており、これは「文字サイズに対して1.5倍の行間」という意味です。

行間は狭すぎると読みにくく、広すぎると間延びした印象を与えます。新聞や本でも読みやすさを考えて行間が設計されています。Webサイトも同じで、line-heightを適切に設定することで「スッキリ読みやすい文章」になります。


<style>
p {
    font-size: 16px;
    line-height: 1.8;
}
</style>

<p>これは行間を1.8に広げた例です。文章が少しゆったりして読みやすくなります。</p>

ブラウザ表示

なぜ文字サイズや行間、フォントを調整する必要があるのでしょうか？理由はシンプルで、「文章はサイトの印象を大きく左右する」からです。

例えば、同じ内容でも文字が小さく詰まっていれば読みにくく、大きめで余白があると読みやすいです。また、フォントの選び方でサイトの雰囲気も大きく変わります。カジュアルな印象を出したいなら丸みのあるフォント、ビジネス向けならシンプルで硬めのフォントが適しています。

BootstrapのSass変数を活用すれば、$font-family、$font-size-base、line-heightを全体で統一できます。ポイントは次の3つです。

これらをバランスよく組み合わせることで、初心者でもプロのように整ったデザインを作ることができます。