HTMLのテキストを赤字にする方法とは？CSSのスタイル指定についても解説
HTML内のテキストを赤字にしたいときがあると思います。
HTMLで重要な箇所に色を付ける方法が分かれば、サイトがより見やすくなりますよね。
今回は、HTML内のテキストを赤字にする方法を知りたいという方のために、
- 赤字にするには？
- CSSについて
- 非推奨な方法について
以上の項目に沿って、解説していきますね。
この記事を読めば、HTML内のテキストを赤字にする適切な方法が分かるようになりますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSで指定する
CSSとは「Cascading Style Sheets」の略で、HTMLで書いた文書のスタイルを設定できる言語です。
文字の色の指定は、colorプロパティでできます。
赤字にしたいのであれば、「color:red」「color:#ff0000」と書きます。
「#ff0000」はカラーコードといい、6桁の16進数で色指定をする方法です。
カラーコードで検索すると、色を探せるサイトやツールが出てきますので、参考にしてみてくださいね。
ここでは、実際の書き方を3つ紹介します。
CSSファイルで指定
HTMLファイルとは別にCSSファイルを作成する方法です。
1つのCSSファイルを作成すれば、複数のページのレイアウトができるので、基本的にはこちらの方法をおすすめします。
CSSファイルには、以下のように指定します。
p{color:red;}上記では、p要素のみに赤字を指定しています。
pの部分をセレクタといいます。ここには、要素名の他、ID名やクラス名の指定ができます。
HTMLの方では、CSSファイルを読み込む必要があります。
CSSファイルの名前を「style.css」としていた場合、以下のような記述で読み込めます。
<link rel="stylesheet" href="style.css">これをHTMLのhead内に書くとスタイルが適用されます。
link要素において、rel属性とhref属性の指定は必須となります。
hrefにはCSSファイルまでのパスを記入します。
また、読み込むファイルがスタイルシートの場合は、「rel=”stylesheet”」と書きます。
HTMLファイルのstyle要素で指定
HTMLのhead内にstyle要素を書いて指定します。
<html>
<head>
<meta charset="UTF-8">
<title>文字を赤くする</title>
<style>
p{color:red;}
<style>
</head>
<body>
<h1>指定していない部分</h1>
<p>ここが赤くなる</p>
</body>
</html>こちらの方法はHTMLファイル内で完結します。
サイト内に複数のページがあり、レイアウトを統一させたいときには、あまり向いていない方法です。
個別のページで指定したいものがあるときに、使用すると良いでしょう。
HTMLファイル内に記述
HTMLのタグの中にstyle属性を指定する方法です。
<p style="color:red">ここを赤くする</p>直接指定できるので分かりやすい反面、1つ1つ指定しなくてはいけないので面倒ですね。
テストしたいときなどに使用しましょう。
まとめ：HTML内テキストの赤字指定は基本
今回は、HTML内のテキストを赤字にする方法を解説してきました。
CSSファイルを作成して、colorプロパティで指定するということでしたね。
テキストの色を変える指定は、HTML・CSSの学習において今回の記事が参考になれば幸いです。
