プログラミング
Tips

Home　>　記事　>　HTML/CSS　>　【CSS】文字色を2色に分割！グラデーションで文字を彩るテクニック

【CSS】文字色を2色に分割！グラデーションで文字を彩るテクニック

2025/12/08
こんにちは。ひらくです。 今回はCSSを使って、文字の色を2等分（ツートンカラー）にする方法をご紹介します。 画面上で文字の上半分と下半分で色が違うデザインや、綺麗なグラデーション文字を見かけることがあると思います。 難しそうに見えますが、実はちょっとしたテクニックを使えばCSSだけで簡単に実装できます。 ぜひ一緒に手を動かしてやってみましょう。
動画で確認したい方はこちら↓

事前準備：HTMLとベースのCSS

まずはフォルダを作り、index.html と style.css を用意します。 今回は例として、「ひらくのプログラミング教室」という文字を表示させます。

HTML (index.html)

<body>
  <p>ひらくのプログラミング教室 </p>
</body>

CSS (style.css)

見やすくするために、文字のサイズや太さを調整し、余白（リセットCSSの代わり）を調整しておきます。
p {
   margin: 0;
   padding: 0;
   font-size: 48px; /* 大きめに見やすく */
   font-weight: bold; /* 太字にする */
}
これでブラウザに大きな黒文字が表示されれば準備完了です。

文字を2色に染める手順

ここからが本題です。文字色を変えるのではなく、「背景色を作って、文字の形に切り抜く」というアプローチをとります。

ステップ①：背景をグラデーションで2色にする

まずは color ではなく background プロパティを使います。 linear-gradient を使い、途中で色がくっきりと分かれるように指定します。
p {
   margin: 0; padding: 0; 
   font-size: 48px;
   font-weight: bold;

   /* 180度（上から下へ）、50%の位置で色を切り替える */
   background: linear-gradient(180deg, #aaccff 50%, #ffccaa 50%);
}
  • ポイント： 50% までを青色、50% からを赤色（例）と指定することで、グラデーションではなく「くっきりとした分割」になります。
この時点では、文字の背景が四角く2色になっている状態です。

ステップ②：背景を文字の形に切り抜く

次に、この背景を「文字の形」に合わせて切り抜きます。ここで使うのが background-clip です。 （Chromeなどのブラウザ対応のため、-webkit- プレフィックスを付けるのが推奨されています。）
p {
  margin: 0; padding: 0;
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(180deg, #aaccff 50%, #ffccaa 50%)

  /* 背景を文字で切り抜く */
  background-clip: text;
  -webkit-background-clip: text; /* Chrome/Safari用ベンダープレフィックス */
}
しかし、これだけでは文字自体が黒色のままなので、切り抜いた背景が見えません。

ステップ③：文字色を透明にする

最後に、文字の色を透明にして、背景が見えるようにします。
p {
   margin: 0; padding: 0;
   font-size: 48px;
   font-weight: bold;                 
   background: linear-gradient(180deg, #aaccff 50%, #ffccaa 50%);
   background-clip: text;
   -webkit-background-clip: text; 
                    
   /* 文字を透明にする */
   color: transparent;
   -webkit-text-fill-color: transparent;
}
これで、文字が2色に分かれた状態が完成しました！

注意点：背景の範囲とブロック要素

ここで一つ注意点があります。 <p> タグはブロック要素であるため、検証ツールで確認するとわかるように、横幅（width）が画面いっぱいに広がっています。
例えばグラデーションの角度を 90deg（縦割り）にした場合、画面全体の真ん中で色が切り替わってしまうため、文字のある位置と色の変わり目がズレてしまうことがあります。

解決策：要素の幅を文字に合わせる

文字の中央できれいに色を変えたい場合は、以下のどちらかの方法で調整します。
  1. text-align: center; を使う 文字をブロックの中央に配置することで、背景の中央（色の変わり目）と文字を合わせます。
  2. display: inline-block; を使う ブロック要素が「文字の大きさに応じた幅」になります。そうすることで、左寄せ配置でも文字の真ん中で色が切り替わります。
p {
  margin: 0; padding: 0;
  font-size: 48px;
  font-weight: bold;                  
  background: linear-gradient(180deg, #aaccff 50%, #ffccaa 50%);
  background-clip: text;
  -webkit-background-clip: text; 
  color: transparent;
  -webkit-text-fill-color: transparent;

  display: inline-block; /* 文字幅に合わせて背景を適用 */
}

応用：滑らかなグラデーションにする

今回は「くっきり2分割」にしましたが、linear-gradient の % 指定を外せば、滑らかなグラデーション文字も作れます。
p {
  margin: 0; padding: 0;
  font-size: 48px;
  font-weight: bold;
                     
  /* 滑らかなグラデーション */
  background: linear-gradient(180deg, #aaccff, #ffccaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
こちらの方が利用シーンが多いかもしれませんね。

まとめ

今回のテクニックのおさらいです。
  1. background: linear-gradient(…) で背景を作る。
  2. -webkit-background-clip: text で背景を文字の形に切り抜く。
  3. -webkit-text-fill-color: transparent で文字を透明にして背景を見せる。
  4. 必要に応じて display: inline-block で要素の幅を調整する。
簡単なコードで表現の幅が広がるので、ぜひWebサイトのタイトルなどで使ってみてください。
記事一覧に戻る