【span】タグをつかって一文字単位の文字色や背景色を変える記述方法

こんにちは。ヒロユキです。

前述では、divタグで囲んだ範囲の「文字色」や「背景色」をスタイリングする記述方法について紹介しました。

今回は、一文字単位で部分的なスタイリングをする記述方法を紹介しますね。

部分的に色を変える記述方法

小松田くん

前回はタグで範囲を指定してスタイリングする方法を教えてもらいましたけど、これって一文字だけとか単語の場合はどうしたらいいんですか?

尾地ヒロユキ

タグ全体じゃなくて文中の一部分をスタイリングしたい時は、別の要素をつかうぞ。今回はそのへん見ていこうか!

部分的な指定につかうspanタグ

一文字だけや単語単位で文字色などを指定する場合は、span(!)タグをつかいます。

spanタグ

<span></span>で囲った部分をひとつのグループとする要素。divタグは他のタグをまるごと囲むのに対して、spanタグは他のタグを文字単位で囲むことができる。

部分的に文字色を指定する記述方法

下の画像は、pタグ内の「おじいさん」だけ文字色を赤色に変更したものです。↓

実際のコードはこんな感じ。↓

<h1>桃太郎</h1>
<p>むかしむかしあるところに、<span style="color: red;">おじいさん</span>とおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

では、記述の工程ごとに見ていきましょう!

まず初めに、文字色を変えたい部分をspanタグで囲みます。↓

<p>むかしむかしあるところに、<span>おじいさん</span>とおばあさんが住んでしました。</p>

次に、spanタグ内にstyle属性を記述します。↓

<p>むかしむかしあるところに、<span style=””>おじいさん</span>とおばあさんが住んでしました。</p>

文字色を指定する属性値は「color」なので、style属性の属性値として記述します。↓

<p>むかしむかしあるところに、<span style=”color>おじいさん</span>とおばあさんが住んでしました。</p>

色の指定は「color」の後に「:(色);」を記述します。↓

<p>むかしむかしあるところに、<span style=”color: red;>おじいさん</span>とおばあさんが住んでしました。</p>

はい!これで指定した部分の文字色が変わりました。

小松田くん

色の名前は「英語表記」か「カラーコード」どちらでもオーケーでしたね

部分的に背景色を指定する記述方法

下の画像は、pタグ内の「おじいさん」の背景色をピンク色で指定したものです。↓

実際のコードはこんな感じ。↓

<h1>桃太郎</h1>
<p>むかしむかしあるところに、<span style="background-color: pink;">おじいさん</span>とおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

では、背景色も記述の工程ごとに見ていきましょう!

まず初めに、背景色を変えたい部分をspanタグで囲みます。↓

<p>むかしむかしあるところに、<span>おじいさん</span>とおばあさんが住んでしました。</p>

次に、spanタグ内にstyle属性を記述します。↓

<p>むかしむかしあるところに、<span style=””>おじいさん</span>とおばあさんが住んでしました。</p>

背景色を指定する属性値は「background-color」なので、style属性の属性値として記述します。↓

<p>むかしむかしあるところに、<span style=”background-color>おじいさん</span>とおばあさんが住んでしました。</p>

色の指定は「background-color」の後に「:(色);」を記述します。↓

<p>むかしむかしあるところに、<span style=”background-color: pink;>おじいさん</span>とおばあさんが住んでしました。</p>

はい!これで指定した部分の背景色が変わりました。

尾地ヒロユキ

divをつかった範囲的なスタイリングと基本は同じだぞ。

部分的な指定につかうspanタグのまとめ

  • スタイルを変更したい部分をspanタグで囲む。
  • spanタグの中にstyle属性を記述する。
  • style属性の属性値は、
    文字色→“color:(色);”
    背景色→“background-color:(色);”
  • 指定する色の名前は、英語表記かカラーコードを記述する。

「div」や「span」は文字色と背景色を指定する以外にも、文字のサイズや配置などの簡単なスタイリングに応用できるタグです。

HTMLでスタイリングが出来る方法のひとつとして習得しておきましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪