HP初心者講座
Webサイトを作ろうとすると、「文字を好きな色にしたい」「背景色を付けたい」と思うことがありますよね。
この記事では、初心者向けにやさしく解説します。
色の指定方法について
英語の色の名前で指定する
一番わかりやすい方法です。
<p style="color: red;">赤い文字</p>
<p style="color: blue;">青い文字</p>
<p style="color: green;">緑の文字</p>このように、「red」「blue」「green」などの英語の色の名前を使います。
16進数（カラーコード）で指定する
より正確に色を指定したいときは、カラーコード（16進数）を使います。
たとえば、
<p style="color: #ff0000;">赤い文字</p>
<p style="color: #0000ff;">青い文字</p>
<p style="color: #00ff00;">緑の文字</p>カラーコードは # のあとに6ケタの数字やアルファベットを書きます。
- 前2ケタが 赤の強さ
- 次の2ケタが 緑の強さ
- 最後の2ケタが 青の強さ
（それぞれ0〜255を「00〜ff」で表します）
ポイント
- 英語名は簡単だけど、使える色が限られています。
- 16進数コードはちょっと難しいけど、好きな色を自由に作れます！
文字の色を変える
HTMLでは <span> タグと style 属性を使うと簡単に文字色を変えられます。
<p>これは <span style="color:red;">赤色の文字</span> です。</p>color:の後に色名（red, blue, green など）や16進数カラーコード（#ff0000など）を指定- 強調したい部分だけ色を変えるのがおすすめ
ポイント
文字色はアクセントとして使うと見やすくなります。
背景色を付ける
背景色は同じく style 属性で設定できます。
<p style="background-color:yellow;">この部分の背景が黄色になります。</p>実際の表示
この部分の背景が黄色になります。
background-color:の後に色名やカラーコードを指定- 背景色と文字色のコントラストを意識すると読みやすいです
初心者向けのコツ
- 強すぎる色は避ける
- 文字色と背景色の差を大きくすると視認性アップ
色を組み合わせて装飾する
文字色と背景色を同時に変えることもできます。
<p style="color:white; background-color:blue;">白文字×青背景</p>実際の表示
白文字×青背景
;で複数のスタイルを区切る- 少しずつ試して、自分の好きな配色を見つけるのが楽しい！
まとめ
- 文字色は
<span style="color:色名">文字</span> - 背景色は
<p style="background-color:色名">テキスト</p> - 強調したい部分にアクセントとして使うと見やすくなる
HTMLとCSSの基本だけでも、サイトの印象はグッと変わります。
次の記事では「文章を読みやすくする枠線の付け方」を紹介します。
初心者の皆様へ
「自分で作りたいけど、できるか不安…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！
