全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSSでテキストにグラデーションや背景を設定する方法
2022.10.18
※この記事は2022年10月18日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
コーディングでのテキストの装飾は、基本的なフォント指定以外では画像で処理するのが一般的でした。
現在は、いくつかのプロパティを使用することで、CSSだけでも簡単にテキストへグラデーションや背景を装飾することができます。
今回は、知っておくと便利な、テキストへグラデーションや背景を装飾する方法をご紹介します。
テキストへグラデーションを指定する
例として、2色のグラデーションを指定します。
（例：#4158D0、#C850C0）
CSSの指定は以下の通りです。
① 背景にグラデーションを指定（background → 背景を指定する）
② テキストでくり抜く（-webkit-background-clip → 背景の範囲を指定する）
③ くり抜いた部分へ背景を表示（-webkit-text-fill-color → 要素を透明にする）
テキストへ画像をを指定する
例として、この画像をパターン画像として指定します。
（例：画像名20221017_img1.png）
CSSの指定は以下の通りです。
① 背景にパターン画像を指定（background → 背景を指定する）
② テキストでくり抜く（-webkit-background-clip → 背景の範囲を指定する）
③ くり抜いた部分へ背景を表示（-webkit-text-fill-color → 要素を透明にする）
まとめ
デザインに忠実なコーディングをするため画像で処理をしていたテキスト装飾も、今回紹介したCSSでの設定方法を指定すれば簡単です。
尚、レスポンシブでのウィンドウサイズの可変に対して、見た目のクオリティを落とすことなく柔軟に表現できる方法でもあります。
ぜひ、参考にしてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
