2020.09.27  2021.04.04

CSSでテキストにグラデーションをかける方法を紹介!

こんにちは!マコブログです!

本日は、CSSでテキストにグラデーションをかける方法をご紹介していきたいと思います。

WEBサイト制作をするにあたって、単色のテキストだけをただ並べているだけだと何か物足りない感じになりますよね…。

そんな時、今回ご紹介するCSSを加えるだけでH1タグなどの大事な場所を目立たせたり、サイト全体の雰囲気をオシャレにすることができるんです!



自分も実際テキストへのグラデーションのかけ方がわからず、そういった場合は画像処理をするなどして対応していました…
SEOとか表示速度とかいろいろ考えるとなるべくプログラムで処理したいですよね…。)

CSSでテキストにグラデーションをかけてみる

それではまず、グラデーションをかけたい要素をHTMLファイルで準備してください。
例)↓

<h1><span class="ここにcssを充てる">テキスト</span></h1>

※注意点:グラデーションをかける際、おおもとのタグがブロック要素の場合、上記のようにspanタグ(インライン要素)でテキストを囲ってあげましょう。
(これをしないとうまくグラデーションがかからない場合があります。)

次に、使用しているCSSファイル内に下記のように記述しましょう↓

color: transparent;
background-image: linear-gradient(45deg, #1463ca, #0f94f4);
-webkit-background-clip: text;
background-clip: text;
background-size: 100%;

必ず先ほど囲ったspanタグに上記のCSSを充てるようにしてください。

上記のCSSを分かりやすく説明すると、フォントカラーを透明にすることで背景色がそのまま文字色として見えるようになります。

さらに背景の領域をテキスト部分のみに設定することで、グラデーションがテキストの裏側に適応され、透明化した文字にグラデーションが適用されるという感じです。


まとめ

いかがでしたでしょうか?

今回はCSSでテキストにグラデーションをかける方法をご紹介しました。

今まで画像処理などで終わらせてしまっていた方は是非、今回の内容を忘れず試してくださいね!

以上!マコブログでした!

こちらの記事も是非チェックしてみてください↓
cssでポリゴン型切り抜き clip-path が便利すぎる!

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →