【CSS】レッスン2-03:テキストスタイルを変更しよう

一つ前の章ではCSSを読み込む3つの方法について学習しました。

今回はテキストスタイルの変更方法について見ていきましょう。

Lesson2-1:CSS学習の入り口|文字に色を付けよう
Lesson2-2:CSSを読み込む3つの方法
Lesson2-3:テキストスタイルを変更しよう ◁今回はココ
Lesson2-4:4種類のセレクタを使いこなそう
Lesson2-5:ボックスモデルを理解しよう
Lesson2-6:ボックススタイルを変更しよう
Lesson2-7:継承とカスケードを理解しよう

ウェブページのデザインにおいてテキストのスタイルは非常に重要な要素です。

文字の大きさや太さ、行間、文字間の調整によって、文章の可読性を向上させたり、視覚的なインパクトを強化したりできます。

適切なテキストスタイルを設定することで、ユーザーがストレスなくコンテンツを読めるようになり、より良いユーザーエクスペリエンスを提供できます。

本記事ではCSS を使用してテキストのスタイルを設定する方法について学びます。

特にフォントサイズ(font-size)やフォントの種類(font-family)、文字の配置(text-align)、行間(line-height など、文章の視認性やデザイン性を高めるための基本的なプロパティについて詳しく解説します。

それではテキストスタイルの基本について一緒に学んでいきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

CSSでのテキストスタイル設定

ウェブページのテキストデザインを整えるために、CSS を使用してさまざまなスタイルを設定できます。

ここでは、文字サイズ、フォントの種類、文字の配置、装飾 など、テキストの見た目を調整するための主要なプロパティを紹介します。

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

font-size プロパティは、テキストのサイズ(大きさ)を指定します。

サイズの指定方法には、以下のような単位があります:

  • px(ピクセル): 絶対的な大きさ(例: 16px
  • em / rem: 親要素やルート要素に基づいた相対的なサイズ(例: 1.2em
  • %: 親要素のフォントサイズに対する割合(例: 120%

コードの例は以下の通りです:

p {
  font-size: 18px;  /* フォントサイズを18ピクセルに設定 */
}

font-weight(フォントの太さ)

font-weight プロパティは、テキストの太さを指定します。

  • normal(標準の太さ)
  • bold(太字)
  • 数値(100~900): 細かい太さの調整(例: font-weight: 700;

コードの例は以下の通りです:

h1 {
  font-weight: bold;  /* 見出しを太字にする */
}

文字を太字にする方法としてはHTMLにて強調タグを使用する方法もありますが、そちらは「意味的な強調」という側面が強いため、単純に見た目の問題で太字を使用する場合はCSSで指定しましょう。

HTMLの強調タグの解説はこちらの記事を参照してください。

text-align(文字の配置)

text-align プロパティは、テキストの配置を指定します。

  • left(左揃え)
  • center(中央揃え)
  • right(右揃え)
  • justify(両端揃え)

コードの例は以下の通りです:

p {
  text-align: center;  /* テキストを中央揃えに */
}

font-family(フォントの種類)

font-family プロパティは、テキストのフォントを指定します。

複数のフォントを指定でき、ブラウザが最初のフォントを利用できない場合、次のフォントにフォールバックします。

コードの例は以下の通りです:

p {
  font-family: Arial, Helvetica, sans-serif;  /* 優先的に Arial を使用 */
}

text-decoration(テキストの装飾)

text-decoration プロパティは、テキストに装飾(下線、打ち消し線など)を追加します。

  • underline(下線)
  • line-through(打ち消し線)
  • overline(上線)
  • none(装飾なし)

コードの例は以下の通りです:

a {
  text-decoration: underline;  /* リンクに下線をつける */
}

これらの5つのプロパティを使用して、以下の条件の文章を書いてみましょう。

・フォントサイズ:20px
・フォントの太さ:太字
・文字の配置:右寄せ
・フォントの種類:Arial
・テキストの装飾:打消し線

行間(line-height)の概念と設定方法

文章の可読性や視認性を向上させるために、行間(line-height)の適切な設定は重要です。

行間を適切に調整することでテキストの見やすさが向上し、デザイン全体のバランスが整います。

CSS の line-height プロパティを使用すると、行の高さを指定し、テキストの上下に適切なスペースを確保できます。

line-height の基本概念

行の高さはフォントサイズ + 余白(leading) で構成されており、CSS では フォントサイズに対する倍率や固定値 を指定して調整できます。

以下の図のように、テキストの上下に均等にスペースが割り当てられます。

  • フォントサイズ(16px) の上下に 半分ずつの余白(Half Leading) が追加され、全体の行の高さが設定されます。
  • line-height を適切に設定することで行同士のバランスが整い、視認性が向上します。

line-heightは行間というよりも「行の高さ」という方が適切ですが、Webデザインの世界では「行間」と呼ぶことが一般的です。

ブラウザの標準的な設定では、多くの場合、line-heightはフォントサイズの1.2~1.4倍に設定されています。

line-height の指定方法と使用例

line-height の指定には、以下の3つの方法があります:

  1. 数値(推奨)
    • フォントサイズに対する倍率を指定
    • 例: 1.5(フォントサイズの 1.5 倍)
  2. 絶対値(px など)
    • 固定のピクセル値を指定
    • 例: 24px(常に 24px の行間)
  3. パーセント(%)
    • フォントサイズに対する割合を指定
    • 例: 150%(フォントサイズの 150%)

以下の例では異なる指定方法を使用して行間を調整します。

p {
  font-size: 16px;        /* 文字サイズを16pxに設定 */
  line-height: 1.5;       /* フォントサイズの1.5倍の行間 */
}

h1 {
  font-size: 24px;
  line-height: 32px;      /* 具体的なピクセル値で設定 */
}

div {
  font-size: 14px;
  line-height: 200%;      /* フォントサイズの2倍の行間 */
}

このようにコンテンツの種類に応じて適切な line-height を設定することで、可読性の向上が期待できます。

line-height のベストプラクティス

効果的な行間の設定に関するポイント:

  1. 可読性を重視
    • 一般的にフォントサイズの 1.41.8 倍の範囲が推奨されます。
    • 例: 本文には line-height: 1.6;、見出しには line-height: 1.2; など。
  2. レスポンシブ対応
    • ビューポートの幅に応じて適切な行間を設定し、モバイルとデスクトップの違いに対応。
  3. フォントとの相性
    • 使用するフォントによって、行間の調整が必要になる場合がある。

letter-spacing(文字間隔)の調整

letter-spacing プロパティを使用すると、文字の間隔を調整できます。

文字が詰まりすぎている場合や、デザイン上の理由でスペースを広げたいときに有効です。

p {
  font-size: 16px;
  letter-spacing: 1.5px;  /* 文字間を1.5px広げる */
}

主な用途:

  • 見出しのデザイン強化
  • 読みやすさの調整
  • 特定のフォントの補正

ベストプラクティス:

  • 通常の本文では控えめに設定(例: 0.5px1px
  • 大きな見出しではやや広めに設定(例: 2px3px

行間と文字間隔を調整し、以下の条件の文章を書いてみましょう。

・フォントサイズは16px、行間は1.5倍
・文字間隔は8px

テキストスタイルのデザインテクニック

テキストスタイルを適切に設定することで、ウェブページの可読性やデザイン性を大幅に向上させることができます。

この章では実際のウェブデザインにおいて役立つテキストスタイルの調整テクニックを紹介します。

可読性を向上させるポイント

ウェブページのテキストは読みやすさが最も重要です。

以下のポイントに注意すると、可読性の高いテキストデザインを実現できます。

  1. 適切なフォントサイズを選択
    • 16px 以上が推奨。
    • 小さすぎるフォントサイズは避け、ユーザーがストレスなく読めるように調整。
  2. 行間(line-height)の調整
    • 行間は 1.41.8 の範囲が一般的。
    • 長い文章には広めの行間を設定し、詰まった印象を避ける。
  3. 文字色と背景色のコントラストを適切に
    • コントラストが低すぎると視認性が低下。
    • 黒文字に白背景、または高コントラストの配色を使用。

フォントの選択と組み合わせ

適切なフォントの選択はデザインの雰囲気を大きく左右します。

以下のポイントに留意してフォントを選びましょう。

  1. Webセーフフォントの活用
    Arial, Helvetica, Georgia, Times New Roman など、多くの環境で表示可能なフォントを選択。
  2. 異なるフォントの組み合わせ
    • 見出しと本文で異なるフォントを使用し、コントラストをつける。
    • 例:見出しに「セリフ体」、本文に「サンセリフ体」

<span>タグを上手に活用しよう

<span> タグはHTMLでよく使用されるインライン要素で、主に「特定のテキスト部分をスタイルやスクリプトで操作する」ために使われます。

  • インライン要素(改行されず、コンテンツの流れに沿って配置される)
  • コンテンツを囲むための汎用コンテナ(意味的な役割はない)
  • スタイルやスクリプト適用のためのターゲットとして使用
  • 特定の部分にCSSクラスやイベントを適用する用途に最適

コードの例は以下の通りです:

<p>この文章の <span style="color: red;">一部</span> だけ赤くなります。</p>

まとめ

ここまでお疲れさまでした!

今回の学習ではテキストスタイルの基本をしっかりと理解し、フォントサイズや行間、文字装飾の設定方法について学びました。

これらの知識を活用することでより見やすく、プロフェッショナルなデザインのウェブページを作成できるようになります。

特に「行間(line-height)」や「文字間(letter-spacing)」 の調整は、見た目だけでなく、ユーザーの快適な読書体験にも大きく影響します。

デザインの世界では細かな調整が大きな違いを生む ことがよくあります。今日学んだことを活かして、実際のプロジェクトでもぜひ試してみてください!

練習問題2-3:テキストスタイルを変更してみよう

VSCで「Lesson2-3.html」と「lesson2-3.css」のふたつのファイルを作って保存してください。

そのファイルにコードを書き、ブラウザに以下のように表示させましょう。

初めてのWebサイトを作ろう2-3

このサイトの Lesson1-1(HTML学習の入り口)Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson2-3のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-3.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-3/HTMLコード)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-3</title>
    <link rel="stylesheet" href="style/color.css">
    <link rel="stylesheet" href="style/text-style.css">
</head>
<body>
    <header>
        <h1>Lesson2-3: テキストスタイルを変更しよう</h1>
        <nav>
            <ul>
                <li>Lesson2-2:<a href="MyWebsite2-2.html">CSSを読み込む3つの方法</a></li>
                <li>Lesson2-4:<a href="MyWebSite2-4.html">4種類のセレクタを使いこなそう</a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>1. テキストのスタイル設定の基本</h2>
            <p>CSSを使用すると、次のような導入的なテキストスタイルの設定が可能です。</p>
            <ul>
                <li><strong>font-size:</strong> フォントのサイズを指定</li>
                <li><strong>font-weight:</strong> フォントの太さを指定</li>
                <li><strong>text-align:</strong> テキストの配置を指定</li>
                <li><strong>font-family:</strong> フォントの種類を指定</li>
                <li><strong>text-decoration:</strong> テキストの装飾を指定</li>
            </ul>
        </section>
        <section>
            <h2>2. 各プロパティの詳細</h2>
            <h3>2-1. font-size</h3>
            <p>フォントの大きさを指定します。例:</p>
            <code>p { font-size: 18px; }</code>

            <h3>2-2. font-weight</h3>
            <p>フォントの太さを指定します。例:</p>
            <code>h1 { font-weight: bold; }</code>

            <h3>2-3. text-align</h3>
            <p>テキストの配置を指定します。例:</p>
            <code>p { text-align: center; }</code>

            <h3>2-4. font-family</h3>
            <p>フォントの種類を指定します。例:</p>
            <code>p { font-family: Arial, Helvetica, sans-serif; }</code>

            <h3>2-5. text-decoration</h3>
            <p>テキストの装飾を指定します。例:</p>
            <code>a { text-decoration: underline; }</code>
        </section>
        <section>
            <h2>3. 行間と文字間隔の設定</h2>
            <h3>line-height</h3>
            <p>行間を調整します。例:</p>
            <code>p { line-height: 1.5; }</code>

            <h3>letter-spacing</h3>
            <p>文字の間隔を調整します。例:</p>
            <code>p { letter-spacing: 1.5px; }</code>
        </section>
    </main>
    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-3.htmlに張り付けてください。

続いてLesson2フォルダの中にあるstyleフォルダの中に「text-style.css」というファイルを作り、以下のテキストスタイルを任意に指定してコードを書きましょう。

・h1、h2、h3のフォントサイズ等
・ボデー部分の行間
・フッター、<aside>タブ部の段落の位置(センターを推奨)

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
@charset "utf-8";
header h1 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
h2{
    font-size: 28px;
    text-decoration: underline; 
}
h3{
    text-decoration: underline; 
}

footer {
    text-align: center;
}

aside p {
    text-align: center;
    font-size: 14px;
}

このコードをコピーしてtext-style.cssに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る