ホームへ

html・CSSで赤字(赤文字)にする方法

「重要な箇所は赤字にして強調したい!赤字にするにはどうするの!?」

html・CSSで赤字にする方法を解説します。

(収益がマイナスという意味の「赤字」ではなく、赤い文字の「赤字」です。)

【一か所の場合】styleを指定する

赤字にしたいテキストを囲っているhtmlタグに「style="color:red;"」を指定します。

テキストテキストテキスト

テキストテキストテキスト

<p style="color:red;">テキストテキストテキスト</p>
<p>テキスト<span style="color:red;">テキスト</span>テキスト</p>

「style」はhtmlタグにCSSを直接指定できるhtml属性です。

「color」は文字の色を指定するCSSです。これに「red」を指定すると赤字になります。

「redじゃちょっと色味が違うんだよなぁ」というかたはカラーコードを指定しましょう。

カラーコードについて詳しくはこちら↓

段落すべてを赤字にしたいならpに、テキストの一部を赤字にしたいならその部分を「span」で囲い、そこに「style="color:red;"」を指定しましょう。

太字にする場合

太字にしたい部分をbタグで囲いましょう。

テキストテキストテキスト

テキストテキストテキスト

<p style="color:red;"><b>テキストテキストテキスト</b></p>
<p>テキスト<b style="color:red;">テキスト</b>テキスト</p>

太字にするにはbタグ、emタグ、strongタグのいずれかを使います。

強調の度合いが異なるものの基本的にほぼ同じです。いずれもhtml5でも使えます。

テキストの一部を赤字にする場合spanの代わりにbタグを使えます。

下線を引く場合

下線を引きたい部分をuタグで囲いましょう。

テキストテキストテキスト

テキストテキストテキスト

<p style="color:red;"><u>テキストテキストテキスト</u></p>
<p>テキスト<u style="color:red;">テキスト</u>テキスト</p>

uタグは下線を引くタグであり、html5でも使えます。

ただし、下線テキストはリンクに間違えられる可能性があるため、おススメしません。

【複数箇所の場合】CSSを指定する

赤字にしたい箇所が複数あるなら別ファイルのCSSに指定するといいでしょう。

テキストテキストテキスト

テキストテキストテキスト

CSS

.red{
    color: red;
}

html

<p class="red">テキストテキストテキスト</p>
<p>テキスト<span class="red">テキスト</span>テキスト</p>

上記のように指定するとhtml側は「class="red"」をつけるだけです。

メリットとしては赤字の色を少し変えたいとき、いっせいに変えることができます。

太字にする場合

「font-weight: bold」を指定すると太字にできます。

テキストテキストテキスト

テキストテキストテキスト

CSS

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

html

<p class="red">テキストテキストテキスト</p>
<p>テキスト<span class="red">テキスト</span>テキスト</p>

または先述したbタグなどで太字にするのもアリです。

下線を引く場合

「text-decoration: underline」を指定すると下線を引けます。

テキストテキストテキスト

テキストテキストテキスト

CSS

.red{
    color: red;
    text-decoration: underline;
}

html

<p class="red">テキストテキストテキスト</p>
<p>テキスト<span class="red">テキスト</span>テキスト</p>

またはuタグを使うのもアリです。

【廃止】fontタグcolor属性

fontタグのcolor属性にredを指定すると赤字にできますが、html5にて廃止です。

テキストテキストテキスト

テキストテキストテキスト

<p><font color="red">テキストテキストテキスト</font></p>
<p>テキスト<font color="red">テキスト</font>テキスト</p>

【まとめ】赤文字にする方法

赤字にしたいテキストを囲っているhtmlタグに「style="color:red;"」を指定する。

以上、html・CSSで赤字(赤文字)にする方法でした。

マンガで読める関連記事