2022/2/24 （更新日: 2022/2/25）

【HTML】文章の一部分だけ文字の色やサイズを変更する方法

文章の一部分だけ文字の色やサイズを変えるにはどうしたらいいの？

そんな疑問にお答えします。

知っていれば簡単なことでも予備知識がない初心者だと、やり方がわからないことってWeb制作にはよくあります。

文章の一部分だけ文字の色やサイズを変えるのもその１つです。

まだ知らない方はぜひ覚えておきましょう。

文章の一部分だけ文字の色やサイズを変更する

See the Pen
spanタグ by toshi (@toshi78)
on CodePen.

このように特定の文字だけを装飾します。

特定の部分だけにスタイルを当てたい場合には「spanタグ」を使います。

<div class="container">
  <p>ぼくは<span>ハスキー犬</span>です</p>
</div>

このように変更する箇所をspanタグで挟みます。

そしてそこにスタイルを当てます。

.container p {
  font-size: 30px;
  color: #fff;
}

.container span {
  font-size: 40px;
  font-weight: bold;
  color: gold;
}

簡単ですね。

このspanで挟むやり方はいろいろ応用が効きます。

See the Pen
spanタグ2 by toshi (@toshi78)
on CodePen.

.container span {
  background:linear-gradient(transparent 85%, #ffdc00 85%);
  font-weight: bold;
}

span部分を変更しています。

See the Pen
spanタグ3 by toshi (@toshi78)
on CodePen.

<div class="container">
  <p><span class="orange">ぼく</span>は<span class="gold">ハスキー犬</span>です</p>
</div>

.orange {
  color: orange;
  font-weight: bold;
}

.gold {
  color: gold;
  font-size: 36px;
  font-weight: bold;
}

複数のspanタグを使う場合はそれぞれにclass名をつけます。

そうすればそれぞれに別々のスタイルを当てられます。

複数でなくてもclass名は逐一つけておいた方が、スタイルは当てやすいと思います。

以上です。

投稿者トシ