CSSを使って画像を境に文字色を反転させる方法を解説

画像を境に文字色を反転させているサイトを見かけることが多くなってきました。

BOTANISTを作っている株式会社Ｉ－ｎｅさんのコーポレートサイトもキービジュアルで、画像を境に文字色を反転させています。

実装方法はいくつかあると思います。今回はその一例として、HTML・CSSのみで実装できる方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

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

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

今回はこのような仕様にします。

完成版のDEMOを下のリンクから確認してみてください。

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" aria-hidden="true">webkore<br>Text Split Layout</p>
    </div>
  </div>
</div>

全体のHTMLコードです。

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”で囲っている点にも注意してください。

---

  <p class="text" aria-hidden="true">webkore<br>Text Split Layout</p>

class=”text-black”のclass="text"にのみ、aria-hidden属性を指定しています。

視覚に障がいがあるがサイトの情報を得る場合、音声読み上げソフト(スクリーンリーダー)を使用しています。

今回のレイアウトを再現するにあたり、2つの同じテキストを用意しています。何も対応しないと、スクリーンリーダーはこの2つのテキストとも読み上げてしまいます。

片方のテキストだけを読み上げの対象としたいので、class=”text-black”のclass="text"には、aria-hidden="true"を指定し、読み上げを無効にしています。

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-transform: uppercase;
}

.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{
    width: auto;
    bottom: 30%;
    left: 10%;
  }

  .text-inner{
    width: 100%;
  }

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

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

}

全体の CSS コードです。長くなるので分割しながら解説していきます。

SP時のCSS

SP時は、白テキストを指定の位置に通常配置するだけです。

今回は、kvの高さをheight:100vh;と指定していますが、実際はspのアドレスバーを考慮し、JavaScript側で高さを取得して指定します。

SP, Tablet時は、テキストをKVを基準に配置するので、class=”kv”にposition: relative；を指定してください。

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

class=”text-block”は両テキストについています。両テキストともに、KV が基準で同じpositionの値が適応されるで、ピッタリと重なります。

.text-black{
  display: none;
}

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

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

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

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

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

.textにtext-transform: uppercase;を指定し、CSS 側でテキストを大文字に変換してい流のは、スクリーンリーダーを考慮しています。

スクリーンリーダーはHTML内の大文字テキストは、「エル エー ワイ オー ユー ティー」のように、アルファベット読みしてしまうことがあります。

Tablet時のCSS

Tablet時は、左右のテキストカラーを反転させます。左半分が黒、右半分が白です。

.text-black{
  display: block;
}

SP時に非表示にしていた黒テキストを表示します。現在テキストは2つピッタリ重なった状態です。

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

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

width: 50%;にすると、現段階では、上の画像のようにレイアウト崩れが生じた状態となります。

これはclass=”text-inner”が 50%のサイズとなったため、子要素であるclass=”text”もその横幅を継承し、50%のサイズとなっているからです。

子要素の横幅サイズを白テキストと同じにすれば良いです。その際に50%からはみ出した黒テキストの右半分を非表示にしたいので、overflow: hidden; を使用しています。

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

これで、白テキストと同じサイズに戻りました。

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

その倍にしたいので、200％を指定しています。

PC時のCSS

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

先に大まかに流れを説明します。

PC 時もこれまでと同じように、両テキストをピッタリと重ね、画像を境にはみ出した部分を非表示にするといった流れです。Tablet時とは白テキストの配置の基準が変わります。これまで両テキストはKVを基準に配置されていましたが、PC時は、白テキストはclass=”bg”を基準に配置します。

• class=”bg”を基準にした白テキスト
• class=”kv”を基準とした黒テキスト

これらをピッタリと重ね合わせ、class=”bg”にoverflow: hidden; を指定し、白テキストのはみ出した左部分を非表示にするといった実装になります。

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

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

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

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

z-index: 1;は重なり順の調整のために入れています。

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

.text-block{
  transform: none;
}

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

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

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

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

100%を基準にした時の30%や10%が80%を基準にした時に何%になるか考えて計算すれば良いです。

詳しい計算方法は省略しますが、こちらの画像をヒントに考えてみてください。

.text-inner{
  width: 100%;
}

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

Tablet 時に変更したclass=”text-inner”とclass=”text”の横幅を元に戻せば完成です。

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

今回紹介した、画像を境にテキストカラーを反転させているサイトを紹介します。

株式会社Ｉ－ｎｅ（アイエヌイー）

TANGO CREATION PLATFORM

Otto van den Toorn

独学に限界を感じていませんか？