全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
ブロック要素や画像を境にテキストの文字色を変える方法
2022.06.30
※この記事は2022年06月30日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
最近、ブロックの境界を跨いだテキストを、ブロックに重なる部分、そうでない部分で異なる文字色を指定するデザインのコーディングをする機会があり、その際に役に立った手法を紹介します。
【目次】
ブロック要素や画像を境にテキストの文字色を変えるとは？
上図を例にします。
ブロック（画像部分）の境界を跨いだテキストのブロックに重なる部分（テキスト色は白）とそうでない部分を（テキスト色は黒）とし、画像の位置が変わっても、テキストの色をその可変に適応させるということです。
解決方法
テキストを重ね、ブロックからはみ出た部分は重ねたテキストを非表示とする手法で解決できます。
特に、レスポンシブコーディングなどでの可変に適応させたい場合に有効です。
jQueryの実装をお忘れなく。
まとめ
以上、記録の意味合いも込め記事にしました。
手法として、テキストを透過させるわけではなく、マスク的な見せ方をさせるわけでもない、ウィンドウ幅の可変に適応させる、ということで色々と考える結果となりましたが、この方法がベストでした。
是非、参考にしてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
