Markdownで文章を書いていて、こんなことを思ったことはありませんか？
- 大切な部分を赤い文字で強調したい
- 注意書きを黄色い文字で目立たせたい
- 見出しとは違う方法で文字を装飾したい
実は、Markdown標準では文字色の変更はできません。
しかし、HTMLタグを組み合わせることで、文字に色をつけることができます。
この記事では、Markdownで文字色を変える方法と、どこで使えるのかを詳しく説明します。
Markdownで文字色は変えられるの？
基本的なMarkdownでは色は変えられない
Markdownの標準的な記法では、以下のような装飾はできますが、文字色の指定はありません：
- 太字（
**太字**） - 斜体（
*斜体*） - ~~取り消し線~~（
~~取り消し線~~） コード（`コード`）
HTMLタグを使えば色をつけられる
多くのMarkdownエディタやサービスでは、HTMLタグを書くことができます。
これを利用して、文字に色をつけることが可能です。
ただし注意：すべての環境で使えるわけではありません。
文字色を変える具体的な方法
基本的な書き方
HTMLのspanタグとstyle属性を使います：
<span style="color:red">赤い文字</span>
色の指定方法
色名で指定：
<span style="color:red">赤い文字</span>
<span style="color:blue">青い文字</span>
<span style="color:green">緑の文字</span>
カラーコードで指定：
<span style="color:#ff0000">赤い文字</span>
<span style="color:#0000ff">青い文字</span>
<span style="color:#008000">緑の文字</span>
RGB値で指定：
<span style="color:rgb(255,0,0)">赤い文字</span>
<span style="color:rgb(0,0,255)">青い文字</span>
<span style="color:rgb(0,128,0)">緑の文字</span>
よく使う色の例
| 色名 | カラーコード | 使用例 |
|---|---|---|
| red | #ff0000 | <span style="color:red">重要</span> |
| blue | #0000ff | <span style="color:blue">リンク風</span> |
| green | #008000 | <span style="color:green">正常</span> |
| orange | #ffa500 | <span style="color:orange">注意</span> |
| purple | #800080 | <span style="color:purple">特別</span> |
背景色も一緒に変える
文字色だけでなく、背景色も変えることができます：
<span style="color:white; background-color:red">白文字・赤背景</span>
<span style="color:black; background-color:yellow">黒文字・黄背景</span>
どこで使える？使えない？
使える環境
✅ ブログサービス：
- はてなブログ
- WordPress
- Ghost
- 多くの個人ブログ
✅ ドキュメントサービス：
- Notion（一部制限あり）
- GitBook
- Confluence
✅ エディタ：
- Visual Studio Code（プレビュー）
- Typora
- Mark Text
使えない環境
❌ GitHub：
- README.md
- Issues、Pull Requests
- GitHub Pages（Jekyll標準）
❌ 一部サービス：
- Qiita（セキュリティ制限）
- Stack Overflow
なぜ使えない環境があるの？
セキュリティ上の理由：
- 悪意のあるHTMLコードを防ぐため
- サイトのデザインを統一するため
- 安全性を保つため
統一性の理由：
- サイト全体のデザインを保つため
- 読みやすさを重視するため
実用的な使い方
注意書きを目立たせる
<span style="color:red; font-weight:bold">⚠️ 重要な注意事項</span>
この設定を変更すると、データが削除される可能性があります。
ステータスを色分けする
プロジェクトの進行状況：
- <span style="color:green">完了</span>：ホームページ作成
- <span style="color:orange">進行中</span>：システム開発
- <span style="color:red">未着手</span>：テスト実施
コードの説明を色分けする
以下のコードで、<span style="color:blue">青い部分</span>が変数名、
<span style="color:green">緑の部分</span>が関数名です。
段階的な手順を色分けする
設定手順：
1. <span style="color:blue">設定画面を開く</span>
2. <span style="color:green">項目を選択する</span>
3. <span style="color:red">保存ボタンを押す</span>
使用時の注意点
アクセシビリティに注意
色だけに頼らない：
- 色覚に障害がある人も考慮する
- 色以外の情報も組み合わせる
良い例：
<span style="color:red">❌ エラー</span>：ファイルが見つかりません
<span style="color:green">✅ 成功</span>：保存が完了しました
悪い例：
<span style="color:red">ファイルが見つかりません</span>
<span style="color:green">保存が完了しました</span>
読みやすさを保つ
適度に使う：
- 色を使いすぎると読みにくくなる
- 本当に重要な部分だけに使う
コントラストを考慮：
- 背景色と文字色の組み合わせに注意
- 薄い色は見えにくい場合がある
環境の確認
事前テスト：
- 実際に表示される環境で確認する
- 複数のデバイスで見え方をチェック
代替案の準備：
- 色が表示されない場合の代替表現を考える
- 太字や記号での強調も併用する
代替手段
色が使えない場合の装飾方法
絵文字を活用：
✅ 完了した項目
⚠️ 注意が必要な項目
❌ エラーが発生した項目
🔥 緊急の項目
記号を活用：
[重要] この設定は慎重に行ってください
[注意] データのバックアップを取ってください
[完了] 設定が正常に保存されました
Markdownの標準機能を活用：
**重要**：この部分は太字で強調
*注意*：この部分は斜体で強調
`コード`：この部分はコード風の表示
まとめ
Markdownで文字色を変える方法は、HTMLタグを使うことで可能ですが、環境によって使えない場合があることを覚えておきましょう。
この記事のポイント
- Markdown標準では文字色変更は不可能
- HTMLの
spanタグを使えば色をつけられる - GitHub、Qiitaなど一部サービスでは使用不可
- アクセシビリティと読みやすさに注意
- 色が使えない場合の代替手段も準備
使用前のチェックリスト
- 利用する環境で色が表示されるか確認
- 色だけでなく記号や太字も併用
- 読みやすいコントラストを選択
- 使いすぎず、重要な部分にのみ使用
よくある質問
Q: GitHubのREADMEで文字色を使いたいのですが？
A: GitHubでは安全性のためHTMLタグが無効化されます。絵文字や記号、太字を活用してください。
Q: 色が表示されない場合はどうすればいいですか？
A: 環境の制限が原因です。太字や絵文字など、別の方法で強調してください。
Q: どの色を使えばいいかわからないのですが？
A: 一般的には、赤（警告）、緑（成功）、青（情報）、オレンジ（注意）がよく使われます。
コメント