CSS 文字色 変更する方法【CSS初心者用】CSS 文字色 グラデーションのやり方も

p {
  color: #〇〇〇〇〇〇;
}

 
「P」タグで囲んだ文字は全て『#〇〇〇〇〇〇』の文字色にするという記述です。

『#〇〇〇〇〇〇』の部分に色のコードを入れよう。仮に#0000FFを入れてみよう。
色見本のコードはこちら

<p>文字を青くしたい</p>

 
「P」タグで囲みます。

文字を青くしたい

h2 {
  background: linear-gradient(#〇〇, #〇〇); 
  color: transparent;　/*文字色を透明*/
  -webkit-background-clip: text; 
  display: inline-block;
}

 
背景グラデーションを設定、文字色を透明に、文字でマスクすれば、でグラデーションがかかったような文字が完成します。さらにdisplay:inline-block;を指定すれば、文字の長さと高さに合わせてグラデーションをかけることができます。

『#〇〇』の部分に色のコードを入れよう。仮に#e66465と#9198e5を入れてみよう。
色見本のコードはこちら

<h2>見出しにグラデーションをかけたい</h2>

 
「h2」タグで囲みます。

CSS 文字 グラデーションの表示例

 
CSS 文字色 グラデーション ジェネレーター

body {
  color: #〇〇〇〇〇〇;
}

 
「P」タグで囲んだ文字は全て『#〇〇〇〇〇〇』の文字色にするという記述です。

『#〇〇〇〇〇〇』の部分に色のコードを入れよう。
色見本のコードはこちら

h2 {
  color: #〇〇〇〇〇〇;
}

 
「h2」タグで囲んだ文字は全て『#〇〇〇〇〇〇』の文字色にするという記述です。

『#〇〇〇〇〇〇』の部分に色のコードを入れよう。仮に#0000FFを入れてみよう。
色見本のコードはこちら

<h2>見出しの文字を青色に</h2>
<p>見出しの文字以外は黒文字で。</p>

 
「h2」タグで囲みます。

見出しの文字を青色に
見出しの文字以外は黒文字で。

CSS 文字色 変更する方法【CSS初心者用】CSS 文字色 グラデーションのやり方も！のまとめ

CSS 文字色 変更する方法【CSS初心者用】CSS 文字色 グラデーションのやり方も！の記事はいかがでしたか？CSSを使って文字色を変更するやり方をお伝えしました。実はついつい、HTMLと混合してしまい、CSSに（font color; #〇〇〇〇〇〇）と記述してしまうので、自分を戒めるためにもこの記事を書きました。筆者は昔HTMLやCSSなど苦手意識があり、意味なんかわからなくてもコピペすればHTMLが書けるって思っていました。実際コピペすればHTMLは作成できるのですが、意味を知っていると理解度が高まり、自分でも書けるようになっちゃうので、ぜひ試してみてくださいね。