コーディング Web制作 HTML

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

【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文字ずつ色を変えることも可能です(そうそうやらないと思いますが)

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

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