初心者でも簡単！HTMLで文字や背景の色を変える方法｜基本とコツを解説

html

「文字の色を変えたい」
「背景に色をつけたい」
「WordやGoogleドキュメントみたいに、簡単に色を変えられないの？」

ホームページやブログを作っているとき、こんなふうに思ったことはありませんか？

HTML（エイチティーエムエル）では、文字や背景に色をつけることで、ページが一気に見やすくおしゃれになります。しかし、タグや指定方法を間違えると、デザインが崩れたり読みづらくなることも。

この記事では、初心者にもわかりやすくHTMLで色を変える基本のやり方から、実際のWebサイトで使える実践的なテクニック、注意したいポイントまでを詳しく紹介します。

スポンサーリンク

HTMLで文字の色を変える基本方法

style属性を使った基本的な指定

HTMLで最もシンプルに文字の色を変えるには、style属性を使います。

基本的な書き方

<p style="color: red;">この文章は赤色です。</p>
<p style="color: blue;">この文章は青色です。</p>
<p style="color: green;">この文章は緑色です。</p>

表示結果

  • この文章は赤色です。（赤色で表示）
  • この文章は青色です。（青色で表示）
  • この文章は緑色です。（緑色で表示）

より詳しい指定方法

<!-- 見出しの色を変える -->
<h1 style="color: navy;">メインタイトル</h1>
<h2 style="color: darkblue;">サブタイトル</h2>

<!-- 強調文字の色を変える -->
<p>この文章の<strong style="color: red;">重要な部分</strong>は赤色です。</p>

<!-- リンクの色を変える -->
<a href="#" style="color: purple;">紫色のリンク</a>

カラーコードを使った詳細な色指定

色は名前だけでなく、#から始まるカラーコード（16進数）でも指定できます。

16進数カラーコード

<p style="color: #FF0000;">赤色（#FF0000）</p>
<p style="color: #00FF00;">緑色（#00FF00）</p>
<p style="color: #0000FF;">青色（#0000FF）</p>
<p style="color: #3366CC;">カスタム青色（#3366CC）</p>

短縮形のカラーコード

<p style="color: #F00;">赤色の短縮形（#F00）</p>
<p style="color: #0A0;">緑色の短縮形（#0A0）</p>
<p style="color: #00F;">青色の短縮形（#00F）</p>

RGB値での指定

<p style="color: rgb(255, 0, 0);">RGB形式の赤色</p>
<p style="color: rgb(0, 128, 0);">RGB形式の緑色</p>
<p style="color: rgba(255, 0, 0, 0.5);">透明度50%の赤色</p>

HSL値での指定

より直感的な色指定ができるHSL値：

<p style="color: hsl(0, 100%, 50%);">HSL形式の赤色</p>
<p style="color: hsl(120, 100%, 50%);">HSL形式の緑色</p>
<p style="color: hsl(240, 100%, 50%);">HSL形式の青色</p>
<p style="color: hsla(0, 100%, 50%, 0.7);">透明度30%の赤色</p>

背景の色を変える方法

background-colorを使った基本指定

文字だけでなく、背景色を変えるには background-color を使います。

基本的な背景色の指定

<p style="background-color: yellow;">背景が黄色になります。</p>
<p style="background-color: lightblue;">背景が水色になります。</p>
<p style="background-color: #FFE4E1;">背景が薄いピンクになります。</p>

文字色と背景色を同時に指定

<p style="color: white; background-color: black;">
白い文字で黒い背景
</p>

<p style="color: #FFFFFF; background-color: #333333;">
白い文字で濃いグレー背景
</p>

<p style="color: navy; background-color: lightcyan;">
濃い青文字で薄い水色背景
</p>

要素別の背景色指定

見出しの背景色

<h1 style="background-color: #4CAF50; color: white; padding: 10px;">
緑色背景の見出し
</h1>

<h2 style="background-color: #2196F3; color: white; padding: 8px;">
青色背景の小見出し
</h2>

段落の背景色

<p style="background-color: #F0F8FF; padding: 15px; border-radius: 5px;">
薄い青色の背景に囲まれた段落です。padding で余白をつけ、border-radius で角を丸くしています。
</p>

部分的な背景色

<p>
この文章の<span style="background-color: yellow;">ここだけ黄色い背景</span>になります。
</p>

CSSを使った効率的な色管理

内部CSSによる色の指定

HTML内に <style> タグを使って、より効率的に色を管理できます：

<head>
<style>
.red-text {
  color: red;
}

.blue-background {
  background-color: lightblue;
  padding: 10px;
}

.highlight {
  color: white;
  background-color: #FF6B6B;
  padding: 5px;
  border-radius: 3px;
}
</style>
</head>

<body>
<p class="red-text">赤い文字です。</p>
<p class="blue-background">青い背景です。</p>
<p>この文章の<span class="highlight">重要な部分</span>は強調されています。</p>
</body>

クラスを使った色の統一管理

<style>
/* 色のテーマ設定 */
.theme-primary {
  color: #2196F3;
}

.theme-secondary {
  color: #4CAF50;
}

.theme-warning {
  color: #FF9800;
  background-color: #FFF3E0;
  padding: 5px;
}

.theme-danger {
  color: #F44336;
  background-color: #FFEBEE;
  padding: 5px;
}

/* 背景色専用クラス */
.bg-light {
  background-color: #F5F5F5;
}

.bg-dark {
  background-color: #333333;
  color: white;
}
</style>

<h1 class="theme-primary">プライマリー色の見出し</h1>
<h2 class="theme-secondary">セカンダリー色の見出し</h2>
<p class="theme-warning">警告メッセージ</p>
<p class="theme-danger">エラーメッセージ</p>
<div class="bg-light">明るい背景のセクション</div>
<div class="bg-dark">暗い背景のセクション</div>

よく使う色の名前とカラーコード

基本色

色名前カラーコード用途
赤red#FF0000警告、エラー
緑green#008000成功、OK
青blue#0000FFリンク、情報
黒black#000000通常テキスト
白white#FFFFFF背景、反転テキスト
灰色gray#808080補助テキスト

Webでよく使われる色

色名前カラーコード特徴
濃い青navy#000080信頼感、ビジネス
薄い青lightblue#ADD8E6爽やか、清潔感
濃い赤darkred#8B0000重要、緊急
薄いピンクlightpink#FFB6C1優しさ、女性的
濃い緑darkgreen#006400安定、自然
薄い緑lightgreen#90EE90新鮮、成長

実用的な色の組み合わせ例

ビジネス向け

<style>
.business-header {
  color: #FFFFFF;
  background-color: #2C3E50;
  padding: 15px;
}

.business-content {
  color: #2C3E50;
  background-color: #ECF0F1;
  padding: 20px;
}

.business-accent {
  color: #3498DB;
}
</style>

<h1 class="business-header">ビジネスサイトのヘッダー</h1>
<div class="business-content">
  <p>ビジネス向けの落ち着いた配色です。</p>
  <p><span class="business-accent">アクセント色</span>で重要な部分を強調。</p>
</div>

明るく親しみやすい

<style>
.friendly-header {
  color: #FFFFFF;
  background-color: #E67E22;
  padding: 15px;
}

.friendly-content {
  color: #2C3E50;
  background-color: #F39C12;
  padding: 20px;
}

.friendly-accent {
  color: #E74C3C;
}
</style>

<h1 class="friendly-header">親しみやすいサイトのヘッダー</h1>
<div class="friendly-content">
  <p>温かみのある配色で親しみやすさを演出。</p>
  <p><span class="friendly-accent">アクセント色</span>で注目度をアップ。</p>
</div>

実践的な色の使い方

ナビゲーションメニューの色分け

<style>
.navbar {
  background-color: #333333;
  padding: 0;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin: 0;
}

.navbar a {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  padding: 15px 20px;
}

.navbar a:hover {
  background-color: #555555;
}

.navbar a.active {
  background-color: #4CAF50;
}
</style>

<nav class="navbar">
  <ul>
    <li><a href="#" class="active">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

ボタンの色分け

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007BFF;
}

.btn-primary:hover {
  background-color: #0056B3;
}

.btn-success {
  background-color: #28A745;
}

.btn-success:hover {
  background-color: #1E7E34;
}

.btn-warning {
  background-color: #FFC107;
  color: #000;
}

.btn-warning:hover {
  background-color: #E0A800;
}

.btn-danger {
  background-color: #DC3545;
}

.btn-danger:hover {
  background-color: #C82333;
}
</style>

<button class="btn btn-primary">プライマリーボタン</button>
<button class="btn btn-success">成功ボタン</button>
<button class="btn btn-warning">警告ボタン</button>
<button class="btn btn-danger">危険ボタン</button>

状態表示の色分け

<style>
.status {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.status-success {
  background-color: #D4EDDA;
  color: #155724;
  border: 1px solid #C3E6CB;
}

.status-warning {
  background-color: #FFF3CD;
  color: #856404;
  border: 1px solid #FFEAA7;
}

.status-error {
  background-color: #F8D7DA;
  color: #721C24;
  border: 1px solid #F5C6CB;
}

.status-info {
  background-color: #D1ECF1;
  color: #0C5460;
  border: 1px solid #BEE5EB;
}
</style>

<p><span class="status status-success">成功</span> 処理が完了しました。</p>
<p><span class="status status-warning">警告</span> 確認が必要です。</p>
<p><span class="status status-error">エラー</span> 問題が発生しました。</p>
<p><span class="status status-info">情報</span> 追加情報があります。</p>

色を変えるときの注意点とベストプラクティス

アクセシビリティを考慮した色選択

十分なコントラスト比の確保

<!-- 良い例：十分なコントラスト -->
<p style="color: #000000; background-color: #FFFFFF;">
黒文字、白背景（コントラスト比 21:1）
</p>

<p style="color: #FFFFFF; background-color: #000000;">
白文字、黒背景（コントラスト比 21:1）
</p>

<!-- 悪い例：コントラストが不十分 -->
<p style="color: #FFFF00; background-color: #FFFFFF;">
黄色文字、白背景（見にくい）
</p>

<p style="color: #808080; background-color: #A0A0A0;">
グレー文字、薄いグレー背景（見にくい）
</p>

色だけに頼らない情報伝達

<!-- 良い例：色＋記号で情報を伝達 -->
<p style="color: green;">✓ 成功: 処理が完了しました</p>
<p style="color: red;">✗ エラー: 処理に失敗しました</p>

<!-- 悪い例：色だけで情報を伝達 -->
<p style="color: green;">処理が完了しました</p>
<p style="color: red;">処理に失敗しました</p>

読みやすさを重視した配色

長時間の読書に適した色

<style>
.readable-text {
  color: #333333;           /* 純黒より少し薄い */
  background-color: #FAFAFA; /* 純白より少し暗い */
  line-height: 1.6;
  padding: 20px;
}

.night-mode {
  color: #E0E0E0;           /* 純白より少し暗い */
  background-color: #1E1E1E; /* 純黒より少し明るい */
  line-height: 1.6;
  padding: 20px;
}
</style>

<div class="readable-text">
  <p>長時間の読書に適した日中モードのテキストです。純黒・純白を避けることで目の疲労を軽減します。</p>
</div>

<div class="night-mode">
  <p>夜間モードのテキストです。暗い環境での読書に適しています。</p>
</div>

色の使いすぎを避ける

適切な色の使用例

<style>
.well-balanced {
  color: #333333;
  background-color: #FFFFFF;
}

.well-balanced h1 {
  color: #2C3E50;
  border-bottom: 2px solid #3498DB;
}

.well-balanced .highlight {
  color: #E74C3C;
  font-weight: bold;
}

.well-balanced .note {
  background-color: #F8F9FA;
  color: #6C757D;
  padding: 10px;
  border-left: 4px solid #007BFF;
}
</style>

<div class="well-balanced">
  <h1>バランスの取れた色使い</h1>
  <p>基本的な文章は読みやすい色にして、<span class="highlight">重要な部分だけ</span>強調色を使用。</p>
  <div class="note">
    補足情報は別の色で区別しています。
  </div>
</div>

レスポンシブデザインでの色の考慮

デバイス別の色調整

<style>
.responsive-colors {
  color: #333333;
  background-color: #FFFFFF;
  padding: 20px;
}

/* タブレット用 */
@media (max-width: 768px) {
  .responsive-colors {
    background-color: #F8F9FA;
  }
}

/* スマートフォン用 */
@media (max-width: 480px) {
  .responsive-colors {
    background-color: #F0F0F0;
    font-size: 16px; /* スマホでは大きめの文字 */
  }
  
  .responsive-colors .highlight {
    background-color: #FFEB3B;
    padding: 2px 4px;
  }
}
</style>

<div class="responsive-colors">
  <p>デバイスのサイズに応じて背景色が変わります。</p>
  <p><span class="highlight">強調部分</span>もデバイスに応じて調整。</p>
</div>

カラーピッカーツールと色選択のコツ

推奨されるカラーピッカーツール

オンラインツール

  • Adobe Color: プロレベルの色選択
  • Coolors.co: 配色パレット生成
  • HTML Color Codes: 簡単な色選択

ブラウザ開発者ツール

  • Chrome DevTools のカラーピッカー
  • Firefox Developer Tools の色選択

色選択のコツ

色の心理効果を考慮

<style>
.trust-color {
  color: #2C3E50;
  background-color: #E8F4FD;
}

.energy-color {
  color: #E67E22;
  background-color: #FDF2E9;
}

.nature-color {
  color: #27AE60;
  background-color: #E8F8F5;
}
</style>

<div class="trust-color">
  <p>信頼感を与える青系の色使い（金融・企業サイト向け）</p>
</div>

<div class="energy-color">
  <p>エネルギッシュなオレンジ系（スポーツ・エンターテイメント向け）</p>
</div>

<div class="nature-color">
  <p>自然で安心感のある緑系（環境・健康関連サイト向け）</p>
</div>

色変更のトラブルシューティング

よくある問題と解決法

色が反映されない場合

原因1: CSSの記述ミス

<!-- 間違い -->
<p style="color red;">赤い文字</p>

<!-- 正しい -->
<p style="color: red;">赤い文字</p>

原因2: 優先度の問題

<style>
p {
  color: blue !important;
}
</style>

<!-- このstyle属性は無効になる -->
<p style="color: red;">この文字は青色で表示される</p>

解決法: より詳細なセレクタを使用

<style>
p.red-text {
  color: red !important;
}
</style>

<p class="red-text">確実に赤色で表示される</p>

色が想定と違う場合

原因: 継承による影響

<style>
.parent {
  color: blue;
}

.child {
  /* color を指定していないので青色を継承 */
}
</style>

<div class="parent">
  <p class="child">この文字は青色になる</p>
</div>

解決法: 明示的な色指定

<style>
.child {
  color: black; /* 明示的に指定 */
}
</style>

まとめ

HTMLで色を変えるための重要なポイントをまとめます：

基本的な色指定方法

  • 文字色: style="color: red"
  • 背景色: style="background-color: yellow"
  • カラーコード: #FF0000 や rgb(255, 0, 0) も使用可能

効率的な色管理

  • CSSクラスを使った統一的な色管理
  • 内部CSSでの色のテーマ設定
  • 用途別の色分け（成功、警告、エラー等）

アクセシビリティと読みやすさ

  • 十分なコントラスト比の確保
  • 色だけに頼らない情報伝達
  • 長時間の読書に適した色選択

実践的な活用

  • ナビゲーションメニューの色分け
  • ボタンの状態表示
  • レスポンシブデザインでの色調整

注意点

  • 色の使いすぎを避ける
  • 心理効果を考慮した色選択
  • デバイス別の色調整

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました