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属性です。

html内にCSS・styleを直書きする方法と使い分け

htmlタグの中にstyle属性を指定し、ダブルクォーテーションの中にCSSを直書きします。

この記事を読む

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

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

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

CSSでのカラーコード（色）の書き方

Webサイトでは背景色、線の色、文字の色など色（カラーコード）を指定する場面が多々あります。色（カラーコード）の書き方を3つ紹介します。

この記事を読む

段落すべてを赤字にしたいなら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やhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

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

.red{
    color: red;
}

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

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

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

太字にする場合

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

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

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

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

下線を引く場合

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

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

<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で赤字（赤文字）にする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む