Webページを作成していると、「この文字だけ色を変えたい」「重要な部分だけ目立たせたい」といった場面があります。
例えば、注意事項だけ赤色にしたり、商品名だけ太字にしたり、キーワード部分に背景色を付けたりすることで、ユーザーに情報を伝えやすいページを作成できます。
このように文章の一部分だけデザインを変更したい場合に便利なのがspanタグです。spanタグで装飾したい文字を囲むことで、その部分だけにCSSを適用できます。
ここでは、CSSの5つのプロパティであるcolor・background-color・font-size・font-weight・text-decorationを使って、spanタグで囲んだ文字の一部分を装飾する方法を解説します。
文字色や背景色、文字サイズ、太字、アンダーラインなどの基本的な装飾方法を、サンプルコードを交えながら順番に学んでください。
spanタグの基本的な書き方
spanタグ で文字を装飾する場合は、まず装飾したい部分を spanタグ で囲みます。
その後、CSS を適用する方法として、インラインCSS・id属性・class属性などを使ってデザインを指定できます。
spanタグにCSSを適用する方法については、spanタグの基本的な使い方を参照してください。
文字色を変更する：color
文字色を変更する場合は、CSS の colorプロパティ を使用します。
span で囲んだ部分に color を指定することで、文章の中の一部分だけ色を変更できます。
例えば、お知らせページで重要な情報だけ赤色にして目立たせたい場合は、以下のように記述します。
HTML
<p>
ご注文の受付は<span class="attention">2026年7月31日まで</span>となります。
</p>CSS
.attention{
color:red;
}ブラウザでの表示
このように、文章全体の色を変更するのではなく、注意して見てほしい部分だけを強調できます。
color は、重要なお知らせやエラー表示、キャンペーン情報、リンク風の装飾など、特定の文字を目立たせたい場面でよく使われます。
また、色の指定は名前だけでなく、カラーコードや RGB などを使って細かく設定できます。
.attention {
color: #ff0000;
}.attention {
color: rgb(255, 0, 0);
}【学習ポイント】
- color は文字の色を変更する CSSプロパティ です。
- span で装飾したい部分を指定し、color を適用することで、その部分だけ自由に文字色を変更できます。
背景色を付ける：background-color
文字の背景に色を付けて目立たせたい場合は、CSS の background-colorプロパティ を使用します。
spanで囲んだ部分に background-color を指定すると、文章の一部分だけに背景色を設定できます。
例えば、記事内で重要なキーワードをマーカーのように強調したい場合は、以下のように記述します。
HTML
<p>
初めてご利用の方は<span class="marker">初回限定キャンペーン</span>をご確認ください。
</p>CSS
.marker {
background-color: yellow;
}ブラウザでの表示
このように、span で囲んだ部分だけに背景色を付けることで、文章の中で特に注目してほしい情報を目立たせることができます。
background-color は、蛍光ペンで線を引いたような強調表現だけでなく、注意事項の表示や重要なキーワードの強調、ラベル風のデザインなどにも活用できます。
また、背景色は yellow のような色名だけでなく、カラーコードや RGB で細かく指定することも可能です。
.marker {
background-color: #fff3a3;
}.marker {
background-color: rgb(255, 243, 163);
}黄色よりも薄い色を指定すると、Webページになじみやすいマーカー風のデザインになります。
【学習ポイント】
- background-color は、要素の背景色を変更する CSSプロパティ です。
- span で指定した範囲だけに背景色を設定できるため、文章内の一部分を強調したい場合に便利です。
文字サイズを変更する：font-size
文字の大きさを変更したい場合は、CSS の font-sizeプロパティ を使用します。
span で囲んだ部分に font-size を指定すると、文章全体ではなく、一部分だけ文字サイズを変更できます。
例えば、記事内で重要なキーワードや見逃してほしくない情報だけを大きく表示したい場合は、以下のように記述します。
HTML
<span class="big">重要</span>です。CSS
.big{
font-size:36px;
}ブラウザでの表示
※「重要」の文字だけ大きく表示されます。
このように、span で囲んだ部分だけ文字サイズを変更することで、読者の視線を集めたいキーワードや重要な情報を強調できます。
font-size は、重要事項やキャンペーン情報、見出しの一部、価格表示など、文章の中で特に目立たせたい箇所によく使用されます。
また、文字サイズは px だけでなく、em や rem などの単位でも指定できます。
.big-em {
font-size:5em;
}ブラウザでの表示
CSS
.big-rem {
font-size:5rem;
}ブラウザでの表示
それぞれの単位には特徴があります。
・px：指定したサイズで表示されるため、初心者にも分かりやすい単位
・em：親要素の文字サイズを基準に拡大・縮小される単位
・rem：HTML要素（html）の文字サイズを基準に計算される単位で、サイト全体のデザインを統一しやすい
一般的なWebサイトでは、細かくサイズを指定したい場合は px、レスポンシブデザインや保守性を重視する場合は rem がよく利用されています。
【学習ポイント】
- font-size は、文字の大きさを変更する CSSプロパティです。
- span と組み合わせることで、文章の一部分だけ文字サイズを変更できます。
- 単位には px・em・rem があり、用途に応じて使い分けることが大切です。
文字を太字にする：font-weight
文字を太字にして強調したい場合は、CSS の font-weightプロパティ を使用します。
span で囲んだ部分に font-weight を指定すると、文章の一部分だけを太字で表示できます。
例えば、注意事項や重要なキーワードを目立たせたい場合は、以下のように記述します。
HTML
<span class="weight-bold">重要</span>です。CSS
.weight-bold{
font-weight:bold;
}ブラウザでの表示
または、数値で太さを指定することもできます。
.weight-700{
font-weight:700;
}ブラウザでの表示
このように、span で囲んだ部分だけを太字にすることで、読者に伝えたい内容を分かりやすく強調できます。
font-weight は、重要なお知らせや見出しの一部、商品名、価格、キーワードなどを目立たせたい場面でよく使用されます。
なお、font-weight:bold; と font-weight:700; は、一般的なWebフォントではほぼ同じ太さで表示されます。
【学習ポイント】
- font-weight は、文字の太さを変更する CSSプロパティです。
- span と組み合わせることで、文章の一部分だけを太字にできます。
- bold または 700 を指定すると、一般的な太字として表示されます。
文字にアンダーラインを付ける：text-decoration
文字に下線を付けて強調したい場合は、CSS の text-decorationプロパティ を使用します。
span で囲んだ部分に text-decoration を指定すると、文章の一部分だけにアンダーラインを表示できます。
例えば、特に注目してほしい内容や補足情報を強調したい場合は、以下のように記述します。
HTML
>重要</span>です。CSS
.line{
text-decoration:underline;
text-decoration-color: red;
}ブラウザでの表示（分かりやすいようアンダーラインを赤字で示しています）
【学習ポイント】
- text-decoration は、文字に下線などの装飾を付ける CSSプロパティです。
- span で囲んだ部分に text-decoration: underline; を指定することで、文章の一部分だけにアンダーラインを表示できます。
- 重要なキーワードや注目してほしい情報を強調したい場合に利用できます。
- text-decoration にはアンダーライン以外にも複数の装飾方法がありますが、詳しい使い方は別記事で解説します。
複数のCSSを組み合わせて装飾することもできる
spanタグ では、1つの要素に複数のclassを指定できます。
複数の class を指定する場合は、class属性 の値を半角スペースで区切って記述します。
HTML
<span class="text bg">重要なお知らせ</span>です。この例では、textとbgという2つのclassを指定しています。
CSS
.text{
color:red;
}
.bg{
background-color:yellow;
}ブラウザでの表示
このように、複数の class を指定すると、それぞれの class に設定した CSS が同時に適用されます。
・text → 文字色を赤に変更
・bg → 背景色を黄色に変更
というように、役割ごとに CSS を分けて管理できます。
半角スペースで区切る理由
複数のclassを指定するときは、必ず半角スペースで区切ります。
正しい書き方：
<span class="text bg">重要</span>間違った書き方（値の間隔を全角スペース）：
<span class="text bg">重要</span>後者は text bg という1つの class名 として扱われます。
HTML では、class名 の区切りとして認識されるのは半角スペースです。
そのため、日本語入力中に入力される全角スペースでは、CSS が正しく適用されません。
1つのclassに複数のCSSを書く方法との違い
「1つの class に複数の CSS を書けば同じでは？」
と思う方もいるかもしれません。
例えば、以下のような CSS です。
.important{
color:red;
background-color:yellow;
}HTML
<span class="important">重要なお知らせ</span>です。この方法でも、赤文字＋黄色背景の表示になります。
しかし、2つの方法には使う場面の違いがあります。
・1つの class に複数の CSS を書く場合
.important{
color:red;
background-color:yellow;
}これは、完成したデザインを1つのセットとして使いたい場合に向いています。
例えば、
・注意事項
・警告メッセージ
・特別なお知らせ
など、「このデザインをそのまま使う」という場合に便利です。
・複数class を組み合わせる場合
HTML
<span class="text bg">重要なお知らせ</span>こちらは、装飾を部品として組み合わせたい場合に向いています。
例えば、
<span class="text">赤文字だけ</span>
<span class="bg">背景色だけ</span>
<span class="text bg">赤文字＋背景色</span>
のように、必要な装飾だけを自由に組み合わせられます。
そのため、同じ装飾を別の場所でも使い回したい場合は、複数class方式が便利です。
【学習ポイント】
- 1つの要素に複数のclassを指定する場合は、class名を半角スペースで区切ります。
- 全角スペースで区切ると、別々のclassとして認識されません。
- 1つのclassに複数のCSSを書く方法は、完成したデザインを使い回す場合に向いています。
- 複数classを組み合わせる方法は、装飾ごとにCSSを分けて再利用したい場合に便利です。
