レッスン 5: CSSの基礎 – テキストのスタイリング

この記事の概要

このレッスンでは、HTMLにスタイルを加えて、テキストの見た目を整えるCSSの基礎を学びます。CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLの内容に装飾を施す役割を持っています。今回は、文字の色やサイズ、フォントなど、テキストの基本的なスタイリングを理解し、簡単なデザインができるようになります。

CSSの基本構文

CSSはHTMLとは別のファイルに記述することもできますが、まずはHTMLファイル内に直接書き込む方法を試してみましょう。スタイルを適用するためには、HTMLの<head>内に<style>タグを使います。

<!DOCTYPE html>
<html>
<head>
    <title>テキストのスタイリング</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: gray;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>スタイリングされた見出し</h1>
    <p>これは、スタイルを適用した段落です。</p>
</body>
</html>

テキストのスタイリング方法

1. 文字の色を変更する

colorプロパティを使うと、文字の色を変更できます。CSSでは、色の指定に名前や16進数コード（例：#ff0000）、RGB形式などを使用できます。

h1 {
    color: blue;
}

2. フォントサイズを変更する

font-sizeプロパティで、文字の大きさを指定します。単位にはpx（ピクセル）がよく使われますが、emや%も使用可能です。

p {
    font-size: 16px;
}

3. フォントファミリーを設定する

font-familyプロパティを使うと、使用するフォントを指定できます。複数のフォントをカンマで区切って指定し、ブラウザが対応しているフォントを使用します。

body {
    font-family: Arial, sans-serif;
}

実践：CSSでテキストにスタイルを適用する

以下のHTMLコードをテキストエディタに入力し、テキストの色やフォントを変更してみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>CSSでテキストをスタイリング</title>
    <style>
        h1 {
            color: #3366cc;
            font-size: 28px;
            font-family: 'Arial', sans-serif;
        }
        p {
            color: #666666;
            font-size: 18px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>テキストのスタイリングを学ぼう</h1>
    <p>この段落はCSSを使って色とサイズを調整しました。フォントファミリーも指定されています。</p>
</body>
</html>