コーディング Web制作 CSS

【CSS】画像の境目でテキストの色を変える方法

【CSS】画像の境目でテキストの色を変える方法
画像の境目でテキストの色を変えるにはどうすればいい?

トップページのファーストビューなどで、画像の上にテキストが乗っているというのは良くあると思います。

さらに画像からテキストをはみ出させるデザインもあったりします。

そして今回ご紹介するのは以下のように画像からはみ出したテキストの色を変える方法です。

テキストを画像にしてしまうという方法もありますが、それだとレスポンシブが難しくなります。

今回の方法であればテキストの位置と画像の端の位置がズレても、ちゃんと色が変わる位置も変わります。

効率よくコーディングしたい人はこちら

CSSのみで画像の境目でテキストの色を変える方法

それでは早速デモを見てみましょう。

See the Pen
画像を境目にテキストの色を変える
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

それではコードを見てみます。まずHTMLはこちら。

<div class="container">
  <p class="color-black">
    <span>
      Lorem ipsum dolor sit amet,<br />
      consectetur adipiscing elit
    </span>
  </p>
  <p class="color-white">
    <span>
      Lorem ipsum dolor sit amet,<br />
      consectetur adipiscing elit
    </span>
  </p>
  <div class="image">
    <img
      src="画像パス"
      alt=""
    />
  </div>
</div>

テキストの色を変えるというテーマですが、実際には同じテキストを2つ用意します。

CSSはこちら。

.container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  max-width: 800px;
  position: relative;
  width: 100%;
}
.image {
  margin-left: 20%; /* テキストの端から画像の端までの長さ */
}
.image img {
  display: block;
  width: 100%;
}
.color-black,
.color-white {
  font-size: 22px;
  height: calc(100% - 40%);
  overflow: hidden;
  position: absolute;
  top: 40%;
}
.color-black {
  width: 20%; /* テキストの端から画像の端までの長さ */
}
.color-white {
  margin-left: 20%; /* テキストの端から画像の端までの長さ */
  width: 100%;
}
.color-black span,
.color-white span {
  position: absolute;
}
.color-black span 
  color: #333;
}
.color-white span {
  color: #fff;
  left: -20%; /* テキストの端から画像の端までの長さ分マイナス */
}
.color-black span {
  width: 500%;
}

CSSはかなり長いのですが、ポイントとなる所だけ解説します。

まず%で指定している所はレスポンシブに対応するためです。

また以下の数字は変更可能ですが、全て同じ数値にします。

.image {
  margin-left: 20%; /* テキストの端から画像の端までの長さ */
}
.color-black {
  width: 20%; /* テキストの端から画像の端までの長さ */
}
.color-white {
  margin-left: 20%; /* テキストの端から画像の端までの長さ */
}
.color-white span {
  left: -20%; /* テキストの端から画像の端までの長さ分マイナス */
}

また、こちらの数値も同じにします。

.color-black,
.color-white {
  height: calc(100% - 40%);
  top: 40%;
}

これは40%の部分ですね。

数値が小さいほどテキストの位置は上になります。

最後にちょっと計算しないといけないのがこちら。

.color-black span {
  width: 500%;
}

ここを100%にするとこのようになります。

これは以下の全体に対して20%の幅に対しての100%という事になります。

.color-black {
  width: 20%; /* テキストの端から画像の端までの長さ */
}

なので.color-black spanは100%だと全体の幅の20%になるので、これを全体の幅の100%にするには100%の5倍である500%にします。

するとこのようになります。

これでOKです。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, CSS