こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
デザイン性の高いWebサイトを作るとき、「文字の中をくりぬいて背景を透かして見せたい」と思ったことはありませんか？
このようなデザインは、画像編集ソフトを使わなくても CSSだけで実装可能 です！
本記事では、CSSだけでくりぬき文字を作る方法 を2つ紹介します。
どちらもテキストとして編集可能なので、SEOにも強く、動的なデザインにも適用できます！
方法1：background-clip: text を使う
background-clip: text を使うと、文字の中に背景をくりぬくことができます。
この方法では、背景に画像やグラデーションを適用し、文字の形で切り抜くことが可能です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- 背景に画像やグラデーションを設定できる
- -webkit-background-clip: text を使用（モダンブラウザ対応）
- color: transparent;で文字の色を消す
デメリット
background-clip: text は一部の古いブラウザで非対応
背景を動かす場合は追加の工夫が必要
背景を動かす場合は追加の工夫が必要
方法2：mix-blend-modeを使う
mix-blend-mode を活用すると、背景と文字を合成し、くりぬき風の効果を作ることができます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- 背景とのブレンド効果でくりぬき表現ができる
- 動的な背景やアニメーションとの相性が良い
- CSSだけで実装可能
デメリット
背景の色によって視認性が変わる
古いブラウザでは正しく表示されない可能性あり
古いブラウザでは正しく表示されない可能性あり
まとめ
- 画像を背景として使うなら background-clip: text を活用
- 背景とのブレンド効果を使うならmix-blend-mode を試す
- どちらの方法もブラウザの対応状況をチェックしながら使うのがポイント
一方、mix-blend-mode はより動的な背景やアニメーションと組み合わせるのに向いています。
どちらの方法もCSSだけで簡単に実装可能なので、ぜひ試してみてください！
こんなお悩みありませんか？
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
集客できるWebサイトをお求めやすい価格で制作します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
![静岡県浜松市中区や東区を中心にWeb・ホームページ制作をしているフリーランスWEBデザイナー[satokotadesign]](https://satokotadesign.com/blog/wp-content/uploads/2022/03/ogp_image-150x150.png)
