Webサイトの見た目を華やかにする上で欠かせない、文字色と背景色の変更です。
HTML,CSSで色を変更する方法を学習中の方にお伝えします。
手を動かしながら理解を深めていただけるようエディタも埋め込んでいます。
Contents
学べる事
この記事を読むことで、下記の事項を学ぶことができます
- CSSの基本的な使い方、文字色や背景色を指定する方法
- 色の指定方法の違いや使い分け方
- アクセシビリティに配慮した配色のこと
- レスポンシブデザインでの色の活用方法
色使いはWebデザインの重要な要素です。この記事を参考に、自分のサイトをさらに魅力的なものにしていきましょう。
↓下のエディタにコピペで試していただけます。
See the Pen html/cssプレイグランド by naoq (@naoq) on CodePen.
文字色を変更する方法（colorプロパティ）
1. CSSでの指定方法
最も一般的な方法は、CSSファイルに色指定を記述する方法です。
CSS
.text-red {
color: red; /* 基本的な色名での指定 */
}
.text-custom {
color: #FF0000; /* 16進数カラーコード */
}HTMLファイルでは、以下のように使用します
HTML
<p class="text-red">この文字は赤色で表示されます</p>2. インラインスタイルでの指定
簡単なテストや一時的な変更の場合は、HTML要素に直接スタイルを指定することもできます
HTML
<p style="color: blue;">背景色を変更する方法（background-colorプロパティ）
1. CSSでの指定方法
CSS
.bg-yellow {
background-color: yellow;
}
.bg-custom {
background-color: #FFFF00;
}HTML
<div class="bg-yellow">
この部分は黄色の背景になります
</div>色の指定方法いろいろ
1. カラーネームを使用する方法
最も分かりやすい方法です。
red、blue、greenなどの基本的な色名が使用できます。
2. 16進数カラーコードを使用する方法
より細かい色指定が可能です。
例：#FF0000（赤）、#00FF00（緑）、#0000FF（青）
3. RGB値を使用する方法
赤、緑、青の3色の組み合わせで指定します。
CSS
.rgb-color {
color: rgb(255, 0, 0); /* 赤色 */
background-color: rgb(255, 255, 0); /* 黄色 */
}4. 透明度を含むRGBA値
透明度を加えた指定が可能です。
CSS
.transparent-bg {
background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
}実践的なTips
- 配色の一貫性を保つ
- サイト全体で使用する色は、あらかじめCSSで変数として定義しておくと管理が楽になります。
- アクセシビリティへの配慮
- 文字色と背景色のコントラスト比に注意を払い、読みやすさを確保しましょう。
- レスポンシブデザインでの活用
- メディアクエリと組み合わせることで、画面サイズに応じた色変更も可能です。
まとめ
文字色や背景色の変更は、Webデザインの基本的なスキルの一つです。
ただし、過度な色使いは逆効果になることもあるので、適度に使い分ける必要があります。
色の指定方法は複数ありますが、サイトの規模や目的に応じて適切な方法を選択することが重要です。
特に大規模なサイトでは、CSSファイルでの一括管理をお勧めします。
