テキストの色を中途半端な位置で、そしてCSSで変えたい！

早速ですが、皆さんは下の画像のようなことをしたいと思ったことはないでしょうか？

そう、お気づきだと思いますが、テキストの色が中途半端な位置で変わっています。
え？これ画像でしょ？と思われた方、そうです、これは画像です。
しかし、これと同じことをCSSでもできます！
今回はその方法をご紹介していきます。

HTML

まず、HTMLのソースは以下になります。

1. <div class="wrap">
2.   <div class="img"><img src="img/demo.jpg" alt=""></div>
3.   <p class="txt">
4.     <span class="txt_white">Better microphone doesn't make <br>your voice sound better.</span>
5.     <span class="txt_black">Better microphone doesn't make <br>your voice sound better.</span>
6.   </p>
7. </div>

まずここで注目していただきたいのが、.txt内のspanが2重になっていること。
そして、それぞれのspanに.txt_whiteと.txt_blackが付与されていること。
今回のHTMLでは、ここが重要になってきます。

CSS

次にCSSのソースは以下になります。

1. .wrap {
2.   width: 1000px;
3.   margin: 0 auto;
4.   position: relative;
5. }
6. .img {
7.   padding-left: 18%;
8. }
9. .txt .txt_white {
10.   display: block;
11.   font-size: 42px;
12.   position: absolute;
13.   top: 50px;
14.   left: 0;
15.   color: #fff;
16. }
17. .txt .txt_black {
18.   display: block;
19.   font-size: 42px;
20.   position: absolute;
21.   top: 50px;
22.   left: 0;
23.   color: #000;
24.   white-space: nowrap;
25.   width: 18%;
26.   overflow: hidden;
27. }

それでは解説していきましょう。
まず、.wrapで大事なのが、position:relative;。
理由は後ほどご説明致します。

次に、.imgですが、padding-left:18%;のみになります。
今回はbox-sizing:border-box;を入れておりませんので、こうすることによって.imgのコンテンツ幅は82%となります。
もし、box-sizing:border-box;を入れている場合は、width:82%;でmargin-left:18%;でもOKです！

そして今回の要の.txt_whiteと.txt_blockを見ていきましょう。
まず、両方ともdisplay:block;でブロック要素にします。
その上で、position:absolute;にし、topとleftプロパティに同じ値を入れます。
そうすることによってこの2つの要素が同じ位置で重なります。
この時点では、下に記述されている、.txt_black要素が上に表示されるので、.txt_whiteが下に隠れて、文字色は黒色に見えます。

ここからが今回1番大事なポイントです。
.txt_blackのみ、white-space:nowrap;、width:18%;、overflow:hidden;を設定します。
まず、white-space:nowrap;でテキストがコンテンツ幅を超えても折り返さないようにします。
そして、width:18%;でコンテンツ幅を設定します。今回の場合は画像以外の余白部分がコンテンツ幅になるように設定しています。
その上で、overflow:hidden;でコンテンツ幅を超えたら表示されないようにします。
そうすることにより、幅18%（画像以外の余白部分）を超えたら黒文字が表示されなくなり、そこから先は下に隠れている白文字が表示され、文字色が切り替わっているように見えるというわけです。

これで、こういったデザインが上がってきても、「どうしよう…画像にしようか…でも、更新があると手間がかかるし…」と悩むこともなくなると思います！