• HOME
  • HTML/CSS
  • HTMLで手軽に文字の色や大きさを変える方法（ CSS直接書き換え )
  • HTML/CSS
  • css
  • direct
  • html

HTMLで手軽に文字の色や大きさを変える方法（ CSS直接書き換え )

HTMLで手軽に文字の色や大きさを変える方法（ CSS直接書き換え )

書き終わったHTMLを見て、この1部分だけ色を変えたいと思ったことはありませんか。
そんなときに手軽に色や文字の大きさを変える方法をお伝えします。
この記事では以下の方法について書いています。

※fontタグは廃止されたので、使わないようにしていきましょう。

HTMLにCSSを直接記入する方法

以下の文章の例で説明します。
思わず「あっ」と叫ぶ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>思わず「あっ」と叫ぶ。</p>
  </body>
</html>

出力してみると文字が表示されることが分かります。

文字の色の変え方

まず、この文章で「あっ」の部分だけを赤字にしたいと思います。

この場合、以下のようにstyle=”color:red”と表記することで赤字にすることができます。
使用できる表記は”red”,”blue”,”green”といった色の表現の他に
16進数の表記”FF0000″,”000000″なども使用できます。
またプロパティ(color)と値や色などの部分は””で囲みます。

<p>思わず<span style="color: red">「あっ」</span>と叫ぶ。</p>

出力してみると赤字になっているのが分かります。

  • 16進数の表記にする場合は”red”の部分を変更します。(#008000は緑色)
<p>思わず<span style="color: #008000">「あっ」</span>と叫ぶ。</p>

出力してみると緑色になったのが分かります。

文字の大きさの変え方

今度は「思わず」の部分の文字の大きさを変えたいと思います。

文字の大きさを変えるには、font-sizeを使います。
font-sizeはpxの他にem,%も使えます。

<p><span style="font-size: 32px">思わず</span>「あっ」と叫ぶ。</p>

出力してみると文字が大きくなっているのが分かります。

  • %で表現する場合はpxの部分を%に変えます。
<p><span style="font-size: 150%">思わず</span>「あっ」と叫ぶ。</p>

同じように文字が大きくなっているのが分かります。

太字の変え方

さらに太字にして、より目立たせて見たいと思います。

strongタグで囲みます。
先ほどのサイズを大きくしたパターンを使います。

<p>
  <span style="font-size: 150%"><strong>思わず</strong></span
  >「あっ」と叫ぶ。
</p>

出力してみると太字になっているのが分かります。

そのほか

上記で紹介したものを組み合わせて表現することもできます。

<p>
  思わず<span style="font-size: 150%; color: blue"
    ><strong>「あっ」</strong></span
  >と叫ぶ。
</p>

出力してみると青文字の太字になっているのが分かります。

まとめ

このようにHTMLの本文に直接CSSを記載することで簡単に文字の大きさや色などを変えることができます。
気軽に文字や文章を修正したいときは使ってみてください。
また、今回は代表的なタグについて紹介しましたが、他にも様々なタグがありますので、適宜調べてみてください。