模写修行メディア

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

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

この記事をシェア:

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

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

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

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

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

デバイス仕様
SPテキストカラーを白にする
Tablet左右のテキストカラーを反転
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;
}

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

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

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


💡 Tablet時のCSS

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

.text-black{
  display: block;
}

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

.text-inner{
  width: 50%;
  overflow: hidden;
}
黒テキストに幅50%を指定し、半分のサイズにした図

左半分を黒テキスト、右半分を白テキストにしたいので、上に重なっている黒テキストに 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”の横幅を元に戻せば完成です。

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

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

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

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

TANGO CREATION PLATFORM

TANGO CREATION PLATFORM

Otto van den Toorn

Otto van den Toorn

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材