LPやシングルページに！画像を境に文字色を変えるCSS解説

## やりたいこと
こんなデザインをCSSで作成する方法です。
[![](https://hirossyi.net/wp-content/uploads/2017/08/funa.png)](https://hirossyi.net/wp-content/uploads/2017/08/funa.png) 

## はじめに

以前サイトを作成している際、いただいたサイトデザイン画像が
「画像を境に文字の色を変える」という仕様になっていました。

CSSの仕様上、文字の途中で文字色を変えるなんてことは普通出来ないので
「こんなん最初から画像用意するしか無いだろ(；´Д｀)」
なんて内心思ってました。

が、その後参考として送っていただいたサイトを確認すると
なんとマジでCSSで実現出来ていることを確認。
**全力でごめんなさい**する事態になりましたm(_ _)m

で、悔しいのでそのサイトを研究。
結果、「考えた人マジですごいな」と心の底から感心するようなHTML+CSSが構築されていたので、
今回ブログにまとめてみることにしました。

## サンプルソース

今回CodePenを使用してみることにしました。便利っすねーこれ(*´∀｀)
<p data-height="265" data-theme-id="0" data-slug-hash="prpEVv" data-default-tab="css,result" data-user="hirossyi73" data-embed-version="2" data-pen-title="sentence-color-two" class="codepen">See the Pen <a href="https://codepen.io/hirossyi73/pen/prpEVv/">sentence-color-two</a> by hirossyi (<a href="https://codepen.io/hirossyi73">@hirossyi73</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 解説

ざっとポイントをまとめてみます。重要な点は赤字で。

・全体を囲むdev"message-block"に背景画像を設定する。また、position:relativeにする

・<font color="Red">**表示する本文を記述するためのdivを2つ作成する。**</font>
本文はそれぞれ、div>span要素内に入れる
両方ともposition:absoluteにし、div要素のtop, left, width, heightを同値にする

・画像内に表示する側"message-white"のdiv要素のwidth・heightを、div内に収まるように設定する(calc値が便利)
そして、<font color="Red">**overflow:hiddenを使用する**</font>（とっても重要）

・画像内に表示する側"message-white"のdiv>span要素を、z-index:1にして表に出す
widthとheightを、div要素のwidth・heightと同値にする
colorを画像に表示する文字色（white）に設定する


表示する文言を2つ作成するというのが盲点でした！
両方ともにposition:absolute、topとleftを同値にしてしまえば、たしかにピッタリ重なりますね。

そして、画像内に表示する側"message-white"では何をしているかというと、
まず直下のdiv要素では、**画像にピッタリ収まるように、widthとheightを設定します。**
これにはcalcを使うと便利です。親要素のdivのwidthから、div"message-white"のleft値を引くと、必要なwidthが出てきます。
どっちかが%指定でも大丈夫。たぶん。
heightも同じことやってください。

widthとheightを記入することで、↓の画像の黄色背景部分が"message-white"に該当します。

[![](https://hirossyi.net/wp-content/uploads/2017/08/funa2-768x341.png)](https://hirossyi.net/wp-content/uploads/2017/08/funa2.png) 

そしてここからが重要なのですが、**div"message-white"に"overflow:hidden"を設定しています。**
これを入れると、<font color="Red">**このdivの子要素がはみ出ていた場合、**</font>
<font color="Red"> **はみ出ていた部分は画面から非表示になります。**</font>
これがこの後効いてきますね。

その後、div"message-white"の直下のspanに、cssを付与していきます。
まず、widthとheightは、もう片方のdiv"message-black"のwidth,heightと同値にします。
そして、"position:absolute"も付与します。
こうすることで、文字数が長くなったとしても、全く同じように改行など行われるわけですね。

**本来("overflow:hidden"がなかった場合)、**span要素は↓の赤背景部分に適用されています。
[![](https://hirossyi.net/wp-content/uploads/2017/08/funa3-768x284.png)](https://hirossyi.net/wp-content/uploads/2017/08/funa3.png) 

が、先ほども記載したように、<font color="Red">**"overflow:hidden"があるために、**</font> <font color="Red"> **実際には画像からはみ出た赤背景部分は、画面から非表示になります。**</font>
そのため実際には、要素"message-white"で表示されている範囲はこうなります。
さっきの黄色背景と同じ範囲ですね。
[![](https://hirossyi.net/wp-content/uploads/2017/08/funa4-768x338.png)](https://hirossyi.net/wp-content/uploads/2017/08/funa4.png) 

ここまで解説した"message-white"と、文字色黒の"message-black"を組み合わせます。
赤背景が"message-white"要素、緑背景が"message-black"要素に該当します。
[![](https://hirossyi.net/wp-content/uploads/2017/08/funa5-768x313.png)](https://hirossyi.net/wp-content/uploads/2017/08/funa5.png)
このCSSを適用することによって、画像を境に文字色を変えることが出来るわけですね。

## おわりに
以上になります。
LPやスタイリッシュなシングルページを作る際には、こんなデザインを作ることがあるかもしれないですね。
しかし理屈が分かった時は本気で感心しました。
これ考えついた人と友達になりたい。

※画像利用元
https://www.youtube.com/watch?v=Bz0mjTp0jVQ
※元記事
https://hirossyi.net/458/color-separate