CSSだけで「画像に重ねた文字のはみ出し部分」のテキスト色を変える方法

2019年11月17日

流行りの文字が画像からはみ出たデザインで、画像の上だけ文字色を変えたい！

最近流行りの画像から文字ズラすデザイン、CSSだけで簡単にできるので、やり方を解説しよう！

いくつかやり方はあるが、今回はCSSだけでシンプルに２つのテキストを重ねる方法で解説しよう！

背景画像が可変しても問題無い方法であり、さらに２つの同じテキストが、SEO的にスパム扱いされないように考慮した方法で解説したいと思う！

実際のHTMLとCSSのコード

まずは、実際のコードをCodePenで見てみよう！

See the Pen
ズラしテキスト by stand4u (@stand4u)
on CodePen.

テキストはみ出し部分を色変更する「仕組み」

基本的な仕組みとしては、まったく同じテキストを２つ同じ位置に重ねて、上になっている方のテキストの親ボックスを背景画像のBOXと同じ位置、同じ大きさに設定した上でoverflow:hedden;をかける事で、はみ出た部分を非表示にする。

はみ出た部分は、下に重なっているテキストが見えているだけというシンプルな仕組み。

ただ、同じテキストを２つ記述するのは、SEO的にスパム扱いされても困るので、片方のテキストは疑似要素の::afterで記述するという方法だ。疑似要素はSEO的に文字として認識されないはず。

HTMLのコード解説

<div class="outer">
  <h1 class="black">
    HELLO <br>WORLD
  </h1>
  <div class="white"></div>
<div>

HTMLのコードを解説すると、外側のdiv.outerが背景画像を入れるBOXであり、その子要素としてH1のテキストを入れ、分かりやすく.blackと名づけている。

H1と並列（兄弟）要素として、空のDIVを作り、コチラは.whiteと名付ける。この空DIVは、擬似要素::afterを使ってH1と同じテキストを設定するためのもの。

CSSコードの解説

.outer {
  position:relative;
  background-color:#ccc;
  width:50%;
  height:300px;
}
.black{
  position:absolute;
  right:-120px;
  top:90px;
  font-size:50px;
  color:#000;
  z-index:-1;
}
.white{
  position:relative;
  width:100%;
  height:300px;
  overflow:hidden;
}
.white::after{
  position:absolute;
  right:-120px;
  top:90px;
  content:"HELLO \A WORLD";
  white-space: pre;
  font-size:50px;
  font-weight:bold;
  color:white;
  z-index:1;
}

上から順に解説していこう。.outerには任意のサイズを設定し、必要に応じて背景画像などを設定。position:relative;に設定して、positionの基準BOXとする。

次にH1（.black）にタイトルテキストを入れて、position:absolute;で画像からはみ出るように位置をずらす。right:-120pxと指定する事で、背景画像（親要素）の右からの位置を指定できる。

また、.blackにはz-index:-1;を指定する事で、背景画像よりも背面に配置しておく。

次に、上から重ねる文字の設定。

空DIVである.whiteは、背景画像用の.outerと全く同じ大きさに設定する。

こちらもposition:relative;に設定して、positionの基準とした上で、oveflow:hidden;を設定する。このボックスからはみ出した部分が消えるという仕組みにする為だ。

最後に、.white::afterで疑似要素を指定して、H1と同じテキストで同じ大きさ同じ位置に配置し、z-index:1;で最前面に設定した上で、文字の色を白など任意の色に設定。