【CSS】画像を境にテキストカラーを変える方法を解説

この記事の目次

こちらのサイト「https://i-ne.co.jp/」のキービジュアルを見ていただくと、右に画像、左にテキスト、そして画像とテキストの重なりを境にテキストカラーが左右で異なっています。このように画像など何らかの要素を境に、テキストカラーを左右で反転させているレイアウトを最近よく見かけます。

日本のサイトでもそうですし、海外のサイトとなると今回紹介するレイアウトを採用しているサイトがグッと増える印象です。実装の解説も少ないようなので、この機会にシェアしていきたいと思います。

HTML,CSSのみで実装できますので、是非チェックしてみてください!

HTML,CSSだけで画像を境にテキストカラーを反転させる

デモの仕様は以下になります。

今回のデモは、ウェブサイトのフルスクリーン(100vw/100vh)のキービジュアルを想定して作成していきます。PCにて、ブラウザ幅を変更しながら確認してください。

  • SP時は、テキストカラーを白にする
  • Tablet時は、左右のテキストカラーを反転
  • PC時は、レスポンシブに対応させ左右のテキストカラーを反転

HTML

以下が全体のHTMLコードとなります。

html
<div class="kv">
  <div class="bg">
    <div class="text-block text-white">
      <p class="text">WEBKORE<br>TEXT SPLIT LAYOUT</p>
    </div>
  </div>

  <div class="text-block text-black">
    <div class="text-inner">
      <p class="text">WEBKORE<br>TEXT SPLIT LAYOUT</p>
    </div>
  </div>
</div>

大まかな実装の流れになります。詳しくは、CSSのセクションにて解説していきます。

  1. 白と黒の2色のテキストを用意
  2. 2色のテキストをピッタリと重ね合わせる
  3. テキストの親要素等にwidthやoverflowを指定し、はみ出た部分を非表示にしていく

KV画像は、backgroundにて指定していますが、img要素を使用しても問題ありません。ご自身の作成するレイアウトに合わせコーディングして下さい!

class=”text-white”は、KV画像を指定しているclass=”bg” 内に記述しています。class=”text-black”と同階層に配置していない理由については、CSSのPC時レイアウトの解説にて行います。

また、class=”text-black”のみテキストをclass=”text-inner”にて囲っているところにも注意してください!

CSS

以下が全体のCSSコードとなります。

css
.kv{
  height: 100vh;
  position: relative;
}

.bg{
  height: 100%;
  background: url(../img/kv.png) no-repeat center/cover;
}

.text-block{
  width: 100%;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}

.text-black{
  display: none;
}

.text{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .04em;
}

.text-white .text{
  color: #fff;
}

.text-black .text{
  color: #222;
}

@media screen and (min-width: 560px) {

  .text-black{
    display: block;
  }

  .text-inner{
    width: 50%;
    overflow: hidden;
  }

  .text{
    font-size: 40px;
  }

  .text-black .text{
    width: 200%;
  }

}

@media screen and (min-width: 960px) {

  .bg{
    width: 80%;
    height: 80%;
    position: relative;
    overflow: hidden;
    margin-left: auto;
    z-index: 1;
  }

  .text-block{
    transform: none;
  }

  .text-white{
    bottom: 12.5%;
    left: -12.5%;
  }

  .text-black{
    bottom: 30%;
    left: 10%;
  }

  .text-inner{
    width: 100%;
  }

  .text{
    font-size: 54px;
    text-align: left;
    letter-spacing: .1em;
  }

  .text-black .text{
    width: 100%;
  }

}

SP時のCSS

SP時は、白テキストを指定の位置に通常配置するだけです。 それでは順に見ていきましょう!

css
.kv{
  height: 100vh;
  position: relative;
}

position: relative;

text-split1

SP, Tablet時は、テキストをKVを基準に配置しますので、class=”kv”position: relative;を指定してください。現段階では、上記の画像のように両テキストが表示された状態です。*画像は分かりやすいよう横並びにし、背景色をつけています。

css
.text-block{
  width: 100%;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}

position: absolute;/bottom: 100px;/left: 50%;/transform: translateX(-50%);

text-split2-768x241

両テキストを左右で中央、bottom: 100px;の位置に配置しています。両テキストの配置は、KVが基準となっているため、position: absolute;に同じ値を指定することで、ピッタリと重なります。

黒テキストが上、白テキストが下に重なっているため、上記の画像のように画面上には黒テキストのみ表示されているような状態になります。

SP時は白テキストのみ表示する仕様ですので、class=”text-white”にのみposition: absolute;を指定し、黒テキストであるclass=”text-black”は非表示にすればいいのでは?と思った方もいるかもしれませんが、Tablet時にも重ねて配置し、レイアウトを組んでいきますので、この段階でclass=”text-block”に対して指定しています。

css
.text-black{
  display: none;
}

text-split3-768x240

黒テキストを非表示にし、白テキストのみ表示しています。

css
.text{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .04em;
}

.text-white .text{
  color: #fff;
}

.text-black .text{
  color: #222;
}

テキストのスタイルを指定しています。

Tablet時のCSS

Tablet時は、左右のテキストカラーを反転させます。左半分が黒、右半分が白といった状態です。 それでは順に見ていきましょう!

css
.text-black{
 display: block;
}

text-split2-768x241

SP時に非表示にしていた黒テキストを表示します。
SP時に両テキストを重ねているので、再度、上記の画像のように画面上には黒テキストのみが表示されているような状態になります。

css
.text-inner{
 width: 50%;
 overflow: hidden;
}

width: 50%;

text-split4-768x420

左半分を黒テキスト、右半分を白テキストにしたいので、上に重なっている黒テキストに width: 50%; を指定し、半分のサイズにします。

class=”text-black”は、 position: absolute; を指定し、左右中央配置している要素なので、横幅サイズが変更されてしまうと、そのサイズに伴ったleft: 50%;の位置に再配置されてしまい、白テキストとピッタリ重なった状態が崩れてしまいます。ピッタリと重ねるためには position: absolute; を指定している要素の高さと横幅は同じでなければなりません。

ですので、width: 50%; は、class=”text-black”ではなく、直下のclass=”text-inner”に対して指定します。黒テキストのみclass=”text-inner”を記述しているのはこの為です。

また、現段階では、上記の画像のようにレイアウト崩れが生じた状態となります。 これはclass=”text-inner”が50%のサイズとなったため、子要素であるclass=”text”もその横幅を継承し、50%のサイズとなっているからです。

overflow: hidden;
次の解説セクションで子要素の横幅サイズを元に戻します。その際にclass=”text-inner”からはみ出した黒テキストの右半分を非表示にしたいので、overflow: hidden; を指定します。

css
.text-black .text{
 width: 200%;
}

text-split5-768x242

一つ前のセクションで解説しましたが、class=”text”は親要素の横幅を継承し、50%のサイズとなっているので、元のサイズに戻します。

横幅を%指定する場合、親要素の横幅が基準となり計算されます。
現在、class=”text-inner”の横幅は50%となっている為、子要素であるclass=”text”の100%は、class=”text-inner”と同じサイズになります。

元のサイズは、class=”text-black”と同じサイズですので、

100%(.text-innerと同じ横幅) × 2(元の横幅は、.text-innerの倍) = 200%(元の大きさ)

といった計算で200%になります。

PC時のCSS

PC時は、画像を境に左右のテキストカラーを反転させます。

先に大まかに流れを説明します。 PC時もこれまでと同じように、両テキストをピッタリと重ね、画像を境にはみ出した部分を非表示にするといった流れですが、白テキストの配置の基準が変わります。これまで両テキストはKVを基準に配置されていましたが、PC時では、白テキストはclass=”bg”を基準に配置していきます。class=”bg”を基準にした白テキストとclass=”kv”を基準とした黒テキストをピッタリと重ね合わせ、class=”bg”overflow: hidden; を指定し、白テキストのはみ出した左部分を非表示にするといった実装になります。

それでは順に見ていきましょう!

css
.bg{
 width: 80%;
 height: 80%;
 position: relative;
 overflow: hidden;
 margin-left: auto;
 z-index: 1;
}

width: 80%;
height: 80%;
margin-left: auto;
初めに、KV画像の高さと横幅を80%にし、margin-left: auto;を指定して右寄せにします。

position: relative;
白テキストの配置の基準をclass=”bg”に変更しています。コーディング時に両テキストを同階層に配置せず、class=”bg”内に白テキストを記述したのはこのためです。

overflow: hidden; 初めに流れを説明しましたが、class=”bg”を基準にした白テキストとclass=”kv”を基準とした黒テキストをピッタリと重ね合わせ、class=”bg”overflow: hidden; を指定し、画像を境にはみ出した白テキストの左部分を非表示にしています。

z-index: 1; text-split6-768x354

z-index: 1;を指定しないと、重なり順はKV画像、白テキスト、黒テキストの順になっています。これを上記の画像のように黒テキスト、KV画像、白テキストの順に変更します。

class=”bg”を一つ上に持ってきたところで、白テキスト、KV画像、黒テキストの順になってしまうのでは?と思った方もいるかもしれませんが、白テキストはclass=”bg”を基準に配置されているため、class=”bg”を一つ上に持ってくるだけで、自動的に白テキストもセットで上に配置されます。

重なり順を変更する理由としては、画像を境にはみ出した黒テキストの右部分を画像の下に回り込ませ隠すためです。

css
.text-block{
 transform: none;
}

PCでは、左右中央配置ではなくなるので、class=”text-white”class=”text-black”に指定していた transform: translateX(-50%); をリセットします。

css
.text-white{
 bottom: 12.5%;
 left: -12.5%;
}

.text-black{
 bottom: 30%;
 left: 10%;
}

text-split7-768x353

白テキストと黒テキストをピッタリと重ね合わせます。配置する基準の変更に伴い、各テキストに指定されるtop, bottomの値も変更されますので注意してください。

100%を基準にした時の30%や10%が80%を基準にした時に何%になるか考えて計算すれば良いです。詳しい計算方法は省略しますが、下記の画像をヒントに考えてみてください。

IMG 8324

css
.text-inner{
 width: 100%;
}

.text-black .text{
 width: 100%;
}

text-split8-768x355

Tablet時に変更したclass=”text-inner”class=”text”の横幅を元に戻します。

以上で、デモの実装が完了となります。 今回は基本的な実装解説でしたが、KV画像をスライダーに変更したり、スライダーの切り替えと連動してテキストの変更やカラーの変更も可能ですので、慣れてきたら色々組み合わせてみてはいかがでしょうか!

画像を境にテキストカラーを反転させてるお洒落なサイト5選

株式会社I-ne(アイエヌイー)

ine-2048x1135

https://i-ne.co.jp/

TANGO CREATION PLATFORM

tango-2048x1134

https://tango-creation.jp/

Otto van den Toorn

ottografie-2048x1134

https://www.ottografie.nl/

Share