CSSの書き方について 添付画像は以下のコードにより再現されたものです。「私です！」の文字で水色の背景とかぶっているところのみを白色テキストにしたいです。
CSSの書き方について 添付画像は以下のコードにより再現されたものです。「私です！」の文字で水色の背景とかぶっているところのみを白色テキストにしたいです。 イメージとしては、以下の方のHello Worldです。背景と文字が被っているところのテキスト色のみを変更したいです。 参考サイト：https://stand-4u.com/css/nongrid-text.html CSSの書き方を教えていただければと思います。よろしくお願い致します。 ーーーーーーーーコードーーーーーーーー [HTML] <div class="a"></div> <div class="b"></div> <div class="c"></div> <p class="center__text">こんにちは!私です!</p> [CSS] body { display: flex; flex-direction: row; margin: 0; } p { margin: 0; } div { height: 100vh; box-sizing: border-box; } .a { background: #84DBE4; width: 5vw; } .b { background: white; width: 55vw; } .c { background: #84DBE4; width: 40vw; } .center__text { position: absolute; left: 10vw; top: 50%; transform: translateY(-50%); font-size: 8.2vw; color: #3B372E; z-index: 2; } ーーーーーーーーーーーーーーーーーーーーーーー
ベストアンサー
■■■ はじめに ■■■ まず、 HTML の基本中の基本として、 装飾を目的とした空要素の配置や無駄な囲い込みは推奨されないんで、 質問のコードのように、 スプライト状の模様ために色分けの分だけ <div> を置くのはよくない。 模様については、 背景画像、<svg>、<canvas> などの描画要素によって描画する。 ■■■ 実施例 ■■■ 説明の前に、 まずソースコード全体の実施例を示しておく。 ─[ HTML ]────────── <body> <div class="stripe">こんにちは、私です！</div> </body> ─[ CSS ]─────────── /* ==== ドキュメント ==== */ html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } /* ==== 縦縞ブロック ==== */ .stripe { /* レイヤーの位置座標リセット */ position: relative; /* テキストを中央に固定 */ display: flex; justify-content: center; align-items: center; /* 画面いっぱいに広げる */ width: 100%; height: 100%; padding: 0px; margin: 0px; /* テキスト模様｜パラメータ */ --stripe-stop1: 5%; --stripe-stop2: 60%; --stripe-color1: #fff; --stripe-color2: #84DBE4; --text-color1: #3B372E; --text-color2: #fff; /* テキスト模様｜描画 */ background: linear-gradient( to right, var( --text-color2 ), var( --text-color2 ) var( --stripe-stop1 ), var( --text-color1 ) var( --stripe-stop1 ), var( --text-color1 ) var( --stripe-stop2 ), var( --text-color2 ) var( --stripe-stop2 ) ) no-repeat center center / cover; background-clip: text; -webkit-background-clip: text; /* その他 */ color: #0000; font-size: 8.2vw; } /* ==== 縦縞ブロック｜背面レイヤー ==== */ .stripe::before { content: ""; position: absolute; left: 0px; top: 0px; z-index: -1; width: 100%; height: 100%; background: linear-gradient( to right, var( --stripe-color2 ), var( --stripe-color2 ) var( --stripe-stop1 ), var( --stripe-color1 ) var( --stripe-stop1 ), var( --stripe-color1 ) var( --stripe-stop2 ), var( --stripe-color2 ) var( --stripe-stop2 ) ) no-repeat center center / cover; } ──────────────── ■■■ 解説 ■■■ 【 HTML 】 HTML としては、 テキストを囲うための要素だけ。 その要素に対して CSS 模様を適用するために、 適当なクラス名 stripe を付与しておく。 ──────────────── <body> <div class="stripe">こんにちは、私です！</div> </body> ──────────────── この画面いっぱいに広げて表示するのであれば、 この要素の縦横サイズを <body> に対して 100% にすればいい。 【 CSS 】 質問のように、 背面にストライプ模様を描画し、 手前に重なったテキストに対して、 ストライプの色に重なった部分だけ白にする場合、 mix-blend-mode で描画色の合成モードを変えるだけでは、 各部分をピンポイントで思った色にはできない。 今回のように、 各部分の色をピンポイントで指定したい場合は、 合成モードを切替えるのではなく、 テキストに対して直接、指定色の模様を描画する。 【 ドキュメントのリセット 】 各ブラウザには、 <html> や <body> にもデフォルトで余白が設定されており、 <body> は、 デフォルトでは画面の上下いっぱいに広がっていないため、 <body> 内の要素を画面いっぱいに広げて表示するには、 まず、 <html>, <body> を画面いっぱいに広げておく必要がある。 ──────────────── html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } ──────────────── (※) 画面いっぱいに表示する要素を、 position:fixed で固定表示する場合は、 ドキュメントの余白は影響しないので、 この指定は不要。 【 要素内のテキストを上下中央に固定 】 要素内のテキストを、 上下中央位置に固定して表示したい場合、 要素を display:flex にして、 フレックスレイアウトの揃え位置を中央にするのが 簡単で安定。 ──────────────── .span { … display: flex; justify-content: center; /*左右中央*/ align-items: center; /*上下中央*/ … } ──────────────── 【 テキストへの模様描画 】 CSS の background プロパティに対して、 linear-gradient() 等で模様を描画し、 background-clip を text にすれば、 模様を描いた背景がテキストの形に切り取られる。 そのうえで、 テキストの色を透明色 #0000 等にすれば、 透明のテキストの背面に、 テキストの形状で切り取られた背景模様が表示され、 結果としてテキストに模様が描画される。 ─[ ※１ ]─────────── .stripe { … background: linear-gradient( to right, #fff, #fff 5%, #3B372E 5%, #3B372E 60%, #fff 60% ) no-repeat center center / cover; background-clip: text; -webkit-background-clip: text; … } ──────────────── background-clip:text は、 Chrome など一部のブラウザが、 プレフィックス -webkit- を付けないと対応していないんで、 -webkit-background-clip も合わせて指定しておく。 【 CSS 変数（カスタムプロパティ）の利用 】 今回の場合、 テキストに描画する模様と背面に描画する模様とで、 色の切替え位置（カラーストップ）をぴったり揃えないといけない。 切替え位置を、 5%, 60% のように手打ちしてもいいんだけど、 それだと、 切替え位置を１つ変更したい場合にも、 複数の箇所を同じ数字に直さないといけないため、 効率も悪いし、打ち間違えなどのリスクも増える。 そこで、 各カラーストップ位置を、 CSS 変数（カスタムプロパティ）として定義しておいて、 実際の指定箇所ではこの変数を使って指定すれば、 変数の定義だけ変更することで、 対応する場所すべてに同じ値が適用される。 各変数名を、 １つ目のカラーストップを stripe-stop1、 ２つめのカラーストップを stripe-stop2、 テキストのメイン色を text-color1、 テキストがストライプと重なった部分の色を text-color2、 のように決めた場合、 CSS 変数（カスタムプロパティ）は、 頭にハイフン２つを付けるのが決まりだから、 ──────────────── --stripe-stop1: 5%; --stripe-stop2: 60%; --text-color1: #3B372E; --text-color2: #fff; ──────────────── のようになる。 >> 返信へつづく。
これらの変数を、 それぞれの指定箇所に var() を使って使用すれば、 [ ※１ ] のコードは、 ────────────────
質問者からのお礼コメント
大変わかりやすく丁寧なご回答、ありがとうございました。
お礼日時：1/21 18:38
