🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

HTML/CSS

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

Author:Jyu

この記事の目次

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

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

参考サイト

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

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

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

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

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

完成版のDEMOをご覧ください。

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


aria-hidden="true"

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

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

ブラウザには、目の不自由な方でも操作できるよう、画面情報を音声で読み上げるスクリーンリーダーという機能が組み込まれています。

今回のレイアウトを再現するにあたり、2つの同じテキスト(webkore Text Split Layout)を用意していますが、スクリーンリーダーはこの2つのテキストを読み上げてしまいます。

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

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-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;を指定してください。

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

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

css
.text-black{
  display: none;
}

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

css
.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時は、左右のテキストカラーを反転させます。左半分が黒、右半分が白といった状態です。

css
.text-black{
 display: block;
}

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

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

黒テキストに幅50%を指定し、半分のサイズにした図

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

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

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

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

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

文字をピッタリ合わせて、かつ左半分は黒い文字、右半分は白い文字にした図

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

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

その倍にしたいので、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;
}

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

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

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

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

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

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

白テキストと黒テキストをピッタリと重ね合わせた図

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

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

計算式の図

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

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

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

完成図

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

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

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

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

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

TANGO CREATION PLATFORM

TANGO CREATION PLATFORM

https://tango-creation.jp/

Otto van den Toorn

Otto van den Toorn

https://www.ottografie.nl/

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

Coming Soon
© 2021 模写修行 media.