見出しと本文の大きさを、画面の中で考える。
国東バスケットボールクラブの制作から

KOOL:CREAT;2026.10.20

写真も文章もそろった。色もイメージに近い。それでも、画面を見ていると「何か弱い」「少し読みづらい」と感じることがあります。

国東バスケットボールクラブのトップページに、活動支援の案内を追加したときも、見出しの文字が小さいのではないか、という確認をしました。

文字を大きくする操作そのものは、CSSの数値を変えるだけで済むこともあります。でも、どの文字を、どのくらい大きくするかは、写真や本文との関係を見て考える必要があります。

今回は制作途中の画面を使いながら、見出しと本文の役割、文字サイズの決め方、修正を反映する手順を整理します。掲載画像は当時の制作記録です。後半の見え方の比較とコードは、本記事の学習用に作成したものです。元のサイトの修正前・修正後を示す画像ではありません。

この記事に必要な知識

読むだけならコードの予備知識は必要ありません。画面を見て確認するポイントから説明します。修正を試すならWordPressで編集する場所を開き、現在のコードを控え、保存とプレビューができること。今回覚えることfont-size、line-height、pxとrem、対象を絞ってCSSを変える方法。作業の範囲見出し１か所と、その下の本文。サイト全体の文字サイズは変更しません。

読む目安：約10〜15分。コードは、下書きの練習ページやテスト環境で試す想定です。

この記事の内容

1. 写真の横で、見出しが小さく感じた
2. 見出しと本文は、役割から大きさを考える
3. 最初に覚えるCSSと、サイズの目安
4. 練習：１か所だけ、文字の大きさを変える
5. 大きくしたのに、読みやすくならないとき
6. AIへの相談文と、最後の確認

01

写真の横で、
見出しが小さく感じた。

トップページの活動支援セクションでは、右側に集合写真、左側に見出し・説明文・ボタンを配置しました。黄色の背景で、支援についての案内が目に入りやすい構成です。

この画面では、写真が大きな面積を占めています。その横で、最も伝えたい「子どもたちの挑戦を、地域の力で。」という言葉に、十分に目が向くかを考えました。

ここでの確認は、単に「何pxだから小さい」という話ではありません。写真に対してどう見えるか。見出しと本文の違いが分かるか。ページをスクロールしてきた人が、何の案内なのかをつかめるか。文字を周囲との関係で見ることが出発点になります。

また、縮小されたスクリーンショットを見ただけでは、実際の文字サイズは正確に判断できません。元の画面を普段の表示倍率で確認し、必要なら、その見出しに設定されているCSSも調べます。

02

すべての文字を、
同じ大きさにしない。

文字には、それぞれ役割があります。見出しは「ここに何が書いてあるか」を知らせ、本文は内容を伝えます。注釈は補足し、ボタンは次の行動を案内します。

文字の役割	確認すること
見出し	最初に目に入り、内容をつかめるか。本文と大きさや太さの差があるか。
本文	続けて読んでも疲れにくいか。スマホで無理なく読めるか。
ボタン	何ができるか分かるか。文字を大きくしても枠に収まるか。
注釈	補足であっても、読む必要のある情報が小さすぎないか。

活動支援の専用ページでは、同じ言葉をページの冒頭で大きく見せていました。

同じ文章でも、ページ全体の最初に置くのか、途中の案内に置くのかで、適した強さは変わります。専用ページの大きさをそのままコピーするより、今の場所で何を伝えたいかを考えます。

本文を読みやすい大きさに整え、その本文より見出しをはっきり見せる。初心者の方は、この関係から始めると、判断しやすくなります。

03

まずは、文字サイズと
行の高さを知る。

今回使うCSSは、主に次の３つです。すべて暗記するより、何を変える指定なのかを押さえます。

CSSの指定	担当すること	例
font-size	文字の大きさ	1.125rem
line-height	１行分の高さ	1.9
font-weight	文字の太さ	700

line-height: 1.9;のように単位なしで書くと、その要素の文字サイズに対する倍率で行の高さを指定できます。［1］文字サイズが18pxなら、１行分の高さは34.2pxです。文字そのものの下に34.2pxの空白ができる、という意味ではありません。

pxとremは、何が違う？

pxはCSS上のピクセルという単位です。画面の物理的な１点と、必ず同じ大きさになるわけではありません。remは、ページのルートであるhtml要素の文字サイズを基準にする単位です。［2］

基準が16pxなら、1remは16px、1.125remは18px、2remは32pxです。基準が変われば、対応する大きさも変わります。

最初に試す大きさの一例

ここでは、本文と見出しを見比べるための出発点を示します。公式な基準や、どんなサイトにも当てはまる正解ではありません。

用途	試す値の例	基準が16pxの場合
本文	1〜1.125rem	16〜18px
小見出し	1.25〜1.5rem	20〜24px
セクションの見出し	1.75〜2.5rem	28〜40px

文字の見え方はフォント、太さ、背景色、画面との距離でも変わります。読む方や文章量を考え、実際の画面で確かめて調整します。特に、本文をスマホの横幅に収めるためだけに、小さくしすぎないようにしたいところです。

学習用：本文14px

一つひとつの応援が、子どもたちの次の一歩につながります。クラブの活動を、一緒に支えてください。

学習用：本文18px

一つひとつの応援が、子どもたちの次の一歩につながります。クラブの活動を、一緒に支えてください。

同じ文章・同じ文字色・同じ行の高さの倍率で比較した学習用の表示です。本文の大きさを変えると、折り返しと必要な高さも変わります。

当時保存していた活動支援ページのCSSには、説明文を14pxにした記述がありました。これは制作途中の指定であって、その数値が最適だったことを示すものではありません。記録を残しておくと、後から読みやすさを見直す材料にもなります。

04

練習：１か所だけ、
文字の大きさを変える。

ここからは、見出しと本文を持つ小さな練習用セクションを作ります。前回と同様に、元のサイトへそのまま適用した完成コードではありません。

１．専用の名前を付けたHTMLを用意する

下書きの練習ページで、カスタムHTMLを扱える箇所に次のHTMLを入れます。WordPressの通常の見出し・段落ブロックを使っている方は、まずブロック側の文字サイズ設定で変更できるか確認してください。

<section class="kcj-type-demo">
  <h2 class="kcj-type-demo__heading">
    子どもたちの挑戦を、地域の力で。
  </h2>
  <p class="kcj-type-demo__body">
    一つひとつの応援が、子どもたちの次の一歩につながります。
    クラブの活動を、一緒に支えてください。
  </p>
</section>

classは、CSSから対象を指定するための名前です。この例では、練習用セクションの中にある見出しと本文を、それぞれ区別できる名前にしています。

２．対応するCSSを入れる

次のコードはCSSです。ページ用のCSS欄や、サイトでCSSを管理しているファイルなど、現在の構成に合った場所に入れます。HTMLの本文としてそのまま貼るものではありません。

.kcj-type-demo .kcj-type-demo__heading {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  line-height: 1.5;
  font-weight: 700;
}

.kcj-type-demo .kcj-type-demo__body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .kcj-type-demo .kcj-type-demo__heading {
    font-size: 2.5rem;
  }
}

この例では、基準が16pxの場合、見出しは通常28px、表示領域が768px以上なら40pxになります。本文は18pxのままです。768pxは、この練習で決めた切り替え位置です。

margin: 0 0 1rem;は、見出しの下に余白を取るための指定です。line-heightが文章内の１行分の高さを担当するのに対し、marginは要素の外側の余白を担当します。

このコードでは、対象を練習用の名前に絞っています。h2 { ... }やp { ... }だけで指定すると、他の見出しや本文にも影響することがあります。

３．最初は、見出しの数値だけを変えて比べる

まず上の一式を動かしたら、見出しの1.75remを2remに変えて、狭い画面で比べてみます。ここでは写真や余白の指定を同時に変えず、大きさがどう変わったかを見ます。

768px以上では、後半にある2.5remの指定が使われるため、最初の数値を変えても見た目が変わらない場合があります。どの画面幅の指定を変えたかも、確認するポイントです。実際のサイトを変更するとき

このHTMLを追加すると、練習用の見出しが新しく表示されます。元の見出しを変更する場合は、今使っているHTMLとCSSを確認し、その見出しのどの指定を置き換えるかを決めてから進めます。

05

大きくしたのに、
読みやすくならないとき。

文字サイズを上げると、行数が増えたり、周りの要素との関係が変わったりします。「大きくしたら終わり」ではなく、次の点を見直します。

気になる状態	確認すること
見出しが３〜４行になる	言葉の長さ、文章欄の幅、指定した改行。文字を小さくする以外の方法も考える。
文字が詰まって見える	行の高さ、文字の太さ、文章の密度。まず一つずつ調整する。
写真やボタンと重なる	固定された高さ、配置方法、行数が増える余地があるか。
大きさを変えても読みにくい	背景との色の差、フォント、文章量、１行の長さ。
変更が反映されない	保存場所、対象の名前、画面幅の条件、他のCSSの指定、表示の更新。

例えば、文章を置く場所の高さが固定されていると、行数が増えた分を表示できない場合があります。そこで文字を小さく戻す前に、高さの指定や配置を確認します。

また、文字の太さを数字で変えても、使っているフォントがその太さを持っているかなどによって、見え方は変わります。「数字が大きいほど必ずよい」と考えるより、本文や背景と合わせて見ます。

行数が変わる場合の改行については、第２回で扱った「指定した改行」と「自動の折り返し」の違いも役立ちます。読みやすさを保ちながら、全体の収まりを調整しましょう。

06

「小さい気がする」を、
具体的な相談に変える。

AIには、気になる文字を画面で示し、何と比べて小さく感じるかを伝えます。見た目の画像と、実際に使っているコードをそろえると、対象を確認しやすくなります。

相談文の例｜当時の会話の転載ではなく、記事用に整理した例です

WordPressのトップページにある活動支援セクションです。
添付画像の左側にある
「子どもたちの挑戦を、地域の力で。」が、
右側の集合写真に対して小さく感じます。

現在のHTMLとCSSを添付します。
最初は写真と本文を動かさず、見出しの文字サイズを見直したいです。
必要なら、行の高さや文章欄の幅も確認してください。

変更するCSSの範囲と、追加か置き換えかを説明してください。
パソコンとスマホで別の指定がある場合は、それぞれ示してください。
他の見出しには影響しないよう、対象を絞ってください。

「スマホでも見やすく」とだけ伝えるより、スマホの画面も一緒に添えて、どこが読みづらいかを書きます。まだ画像やコードを用意できていない場合は、先にそろえてから使います。

普段の表示と、拡大した表示を確かめる

パソコンとスマホの普段の表示で読みやすいかを見た後、ブラウザーで拡大したときも確認します。例えば200%に拡大し、文字が欠けたり、ボタンの中に収まらなくなったりしないかを見ます。テキストを拡大しても内容や機能を失わないことは、W3Cの解説でも扱われています。［3］

• 本文が、無理なく読める大きさか。
• 見出しと本文の違いが、ひと目で分かるか。
• スマホで行数が増えても、文字が重ならないか。
• 行の高さが、詰まりすぎたり空きすぎたりしていないか。
• 拡大しても、文章やボタンの文字が欠けないか。
• 変更した場所以外に、意図しない影響が出ていないか。

最後に、ページ全体を上から下まで見直します。一つの見出しだけが極端に目立っていないか、同じ役割の見出しとバランスが取れているかを確認します。

今回の制作メモ

大きさを決める前に、
読んでほしい順番を決める。

活動支援のセクションで気になったのは、数字としての文字サイズだけでなく、写真の横で言葉がどう見えるかでした。

見出しで内容に気づいてもらい、本文で理解してもらい、必要なら次のページへ進んでもらう。その流れが伝わるように、大きさや太さを調整していきます。

本文を読みやすくする。見出しとの違いをつくる。スマホと拡大表示でも確かめる。文字サイズに迷ったときは、この順番から試してみてください。

次回は、文字や写真の周りの「余白」を取り上げます。空きすぎる・詰まりすぎると感じたとき、どの場所を確認すればよいかを整理します。