CSSで見出しと本文をきれいに分ける方法！初心者でもわかるスタイルの使い方

見出し（h1〜h6）と本文テキストのスタイル分け

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

生徒

「ウェブサイトの見出しと本文の文字を、見た目でちゃんと分けたいです！」

先生

「それは大事ですね。CSSで見出し（h1〜h6）と本文の文字スタイルを変えると、読みやすくてデザイン的にも良くなりますよ。」

生徒

「どうやって設定すれば良いんですか？」

先生

「まずは見出しタグの種類や意味、それからCSSでの具体的な設定方法を一緒に見ていきましょう！」

1. 見出しタグ（h1〜h6）とは？HTMLでの意味を知ろう

HTML（エイチティーエムエル）では、h1からh6までの見出しタグがあり、それぞれの数字が小さくなるほど重要度が高いことを表しています。

たとえば、h1はそのページで一番大事なタイトル、h2はその中の小見出し、h3はさらに細かい見出し…というように使い分けます。

このルールを守ると、検索エンジン（Googleなど）にも見やすく伝わり、SEO（検索エンジン最適化）にも効果的です。

2. 本文テキストはpタグで書こう

本文（普通の文章）を書くときは、pタグを使います。「p」は「Paragraph（パラグラフ）」の略で、日本語で「段落」という意味です。

見出しはタイトル的な役割、本文はその説明や内容を伝える部分になります。役割が違うので、見た目も変えてあげると読みやすくなります。

3. CSSで見出しと本文の文字スタイルを分けよう

CSS（シーエスエス）とは、ウェブページのデザインを指定するルールのことです。文字のサイズや色、太さなどを自由に設定できます。

見出し（h1〜h6）と本文（p）にそれぞれCSSを使ってスタイルを設定することで、見た目の違いをはっきりと分けることができます。


<style>
h1 {
    font-size: 36px;
    font-weight: bold;
    color: navy;
}
h2 {
    font-size: 30px;
    color: darkblue;
}
h3 {
    font-size: 24px;
    color: darkslateblue;
}
p {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}
</style>

<h1>サイトのメインタイトル</h1>
<h2>セクションの見出し</h2>
<h3>さらに細かい見出し</h3>
<p>ここに本文テキストが入ります。読みやすく、文章の情報をしっかり伝えるためにスタイルを整えましょう。</p>

ブラウザ表示

4. フォントサイズと色を変える意味とは？

見出しと本文を同じ見た目のままにしてしまうと、読む人が混乱してしまいます。

「あれ？どこが重要なの？」「文章がダラダラ続いて見づらい…」というように、読みにくいページになります。

CSSを使って、見出しは大きく・太く・色を目立たせて、本文は読みやすくシンプルにするのがポイントです。

5. よく使うCSSプロパティを知っておこう

見出しや本文テキストのスタイルを設定するときによく使うプロパティ（設定項目）を紹介します。

font-size：文字の大きさを変えます。
color：文字の色を指定します。
font-weight：文字の太さを設定します（boldは太字）。
line-height：行と行の間の高さを調整します。

たとえば、本文がぎゅうぎゅうで読みにくいときは、line-heightを大きめにすると見やすくなります。

6. フォントの違いで読みやすさが変わる

「フォント」とは、文字のデザインのことです。CSSでフォントを指定すると、ページの印象がガラッと変わります。

日本語でよく使われるフォントは、ゴシック体（見た目がはっきり）や、明朝体（新聞のような書体）があります。

CSSではfont-familyというプロパティで指定できます。


<style>
h1 {
    font-family: 'Arial', sans-serif;
}
p {
    font-family: 'Yu Gothic', '游ゴシック', sans-serif;
}
</style>

<h1>これは見出しです</h1>
<p>これは本文です。フォントを変えることで、見た目が大きく変わります。</p>

ブラウザ表示

7. スマホでも見やすくするために

最近はスマートフォンからウェブページを見る人が多いですよね。だからこそ、文字サイズや見出しのバランスがとても大切です。

スマホでは大きすぎる文字だと読みづらくなることもあるので、画面サイズによってフォントサイズを調整するのもおすすめです。

その方法は「メディアクエリ」という少し進んだCSSの技術で行いますが、まずは見出しと本文を明確に分けることが基本です。

8. 見出しと本文のバランスを意識しよう

見出しが大きすぎたり、逆に小さすぎたりすると、全体のバランスが悪くなります。

見出しと本文のサイズ差は1.5〜2倍ぐらいがちょうど良いとされています。読み手の目線がスムーズに動くようなサイズにするのがポイントです。

また、色の使い方も大切です。見出しを濃いめの色にして、本文は黒やグレーなど落ち着いた色にすると、読みやすいデザインになります。

まとめ

見出しタグと本文テキストのスタイルを分けることは、読みやすいウェブデザインを作るうえでとても重要です。特に、h1からh6までの見出しタグは、文章構造をわかりやすく整理し、ページ全体の情報を階層的に示す役割を持っています。こうした見出しの構造がしっかりしていると、読み手が内容を素早く理解できるだけでなく、情報のまとまりが自然と整理され、文章全体の印象も洗練されます。さらに、段落を表すpタグを丁寧に使うことで、文章のまとまりや論理的な流れが視覚的にも掴みやすくなり、読みやすさが大きく向上します。

また、CSSで見出しと本文に異なるフォントや色、サイズを適用すると、視覚的な強弱がはっきりと生まれ、読者の目線を自然に誘導できます。見出しは大きく太めに、本文は落ち着いたトーンで行間を広めにすると、文章全体が柔らかく読みやすく感じられます。こうしたスタイル設定は、情報を整理するだけでなく、デザインの印象にも大きく影響します。たとえば、やや濃い色の見出しと落ち着いた本文の組み合わせは、視認性を高めつつ統一感のあるレイアウトを作る効果があります。

実際にスタイルを適用するときには、見出しと本文のフォントサイズ差を適切に保つことが重要です。一般的には、見出しと本文の文字サイズに一対二ほどの差をつけると視認性が高まり、ページ全体のバランスも良くなります。フォントの種類も、本文は丸みのあるゴシック体、見出しは少しメリハリのある書体を選ぶと印象が引き締まります。必要に応じてfont-familyで複数のフォント候補を指定しておくと、環境に左右されず安定した見た目を保てます。

さらにスマートフォン利用者が多い現代では、画面サイズに合わせた文字調整も欠かせません。特に見出しが大きすぎるとスマートフォンでは逆に読みづらくなってしまうため、メディアクエリを使ったレスポンシブ調整も検討したいポイントです。まずは基本となる見出しと本文のスタイル分離をしっかり理解し、それをもとにより高度な調整に進むと良いでしょう。

見出しと本文を整えるサンプルプログラム


<style>
    h1 {
        font-size: 34px;
        font-weight: bold;
        color: navy;
    }
    h2 {
        font-size: 28px;
        font-weight: bold;
        color: darkslateblue;
    }
    p {
        font-size: 16px;
        line-height: 1.8;
        color: #333333;
    }
</style>

<h1>見出しタイトルを整えた例</h1>
<h2>読みやすい本文の見出し</h2>
<p>この段落は本文を表しています。見出しとの大きさの違いやフォントの雰囲気を比較しながら、ページの印象を整えることができます。</p>

ブラウザ表示

このように、CSSを用いることで視覚的なまとまりを自然に作ることができ、読者にとって情報を探しやすい構造を作ることができます。また、文字色やフォントの工夫は、文章の雰囲気や印象を大きく左右します。見出しの色を少し濃くするだけで情報の区切りが明確になり、本文が読みやすくなる効果も期待できます。

先生と生徒の振り返り会話

生徒： きょう学んだ見出しと本文のスタイル分け、すごく役に立ちました。文字の大きさや色を変えるだけで読みやすさがこんなに変わるなんて驚きです。

先生： そうですね。読みやすさを左右するのは、文章そのものよりもデザインの整理だったりします。見出しは大事な部分なので目立たせる工夫が必要です。

生徒： これから自分のページでもh1やh2の設定をきちんと整えて、本文も見やすい行間にしてみようと思います。

先生： とても良い考えですね。特に行間の設定は読み手の負担を大きく減らします。スマホでの見え方も意識しながら、全体のバランスを整えていきましょう。

生徒： はい！今日の内容を活かして、自分のサイトをもっと見やすく改善していきます。