HTML Web制作 コーディング

【HTML】部分的にフォントの色やサイズを変える方法

部分的にテキストの色やサイズを変えるのはどうするんだろう?

これはよく使うのでぜひ覚えておきましょう。

今回の完成形

まずは今回の完成形を見てみます(スマホで見る場合はResultをタップして下さい)

See the Pen
spanタグ説明
by junpei (@junpei-sugiyama)
on CodePen.

これも以前書いた記事が元になっていて、主な変更点はテキストが部分的にサイズや色が変わっている点です。

画像の上にテキストを表示させる方法については以下の前回の記事を参考にして下さい。

画像の上にテキストを上下左右中央に表示させる方法

 

spanタグを使って部分的に編集する

テキストを部分的にサイズや色を変えるにはspanタグを使います。

使わない状態と見比べてみましょう。

<!-- 通常のテキスト -->
<div class="top">
  <img src="画像パス" />   
  <p>I'm a Photographer</p>
</div>
<!-- spanタグを使用したテキスト -->
<div class="top">
  <img src="画像パス" />   
  <p>I'm a <span>Photo</span>grapher</p>
</div>

このように変えたい部分をspanタグで挟む感じになります。

spanタグはいくつも付けられますが、CSSが書きにくくなるのでその場合はclassが付いていると書きやすくなります。

そして今回部分的にテキストを装飾したCSSこちらです。

.top span  {
  color: red;
  font-size: 26px;
  font-weight: bold;
}

フォントの色、太さ、サイズを変えました。

これで終わりなんですが・・・これではあっけないのでspanタグを2回使ってみます。

 

1行のテキストにspanタグを2回使ってみる

今度のHTMLはspanタグを2個使ってみます。

<div class="top">
  <img src="画像パス" />   
  <p><span class="yellow">I'm</span> a <span class="bigRed">Photo</span>grapher</p>
</div>

今度はCSSを書きやすいようにclass名を付けました。

そしてspanタグ部分のCSSはこうなります。

.top .yellow  {
  color: yellow;
}
.top .bigRed  {
  color: red;
  font-size: 26px;
  font-weight: bold;
}

今度はspanではなくclass名でCSSを書いたことで、それぞれ別のスタイルをあてられました。

それでは完成形と全てのコードを見てみましょう。

 

See the Pen
spanタグ2個
by junpei (@junpei-sugiyama)
on CodePen.

今回は以上になります。

これを使えば1文字ずつ色を変えることも可能です(そうそうやらないと思いますが)

-HTML, Web制作, コーディング