Web制作 CSS

【CSS】画像の境目で文字の色を変える方法【サンプル付きで解説】

画像の境目で文字の色を変えるにはどうすればいい?

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

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

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

画像からはみ出した文字の色を変える

画像からはみ出した文字の色を変える

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

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

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

コーディングの時給アップにはこちら!


CSSのみで画像の境目で文字の色を変える方法

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

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

左上のHTMLやCSSをクリックすると画面幅が狭くなりますが、画像の境目の位置が変わっても文字の色もちゃんと変わっているのが確認できます。

 

コード解説

それではコードを見てみます。まず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="sample-img">
    <img
      src="画像パス"
      alt=""
    />
  </div>
</div>

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

CSSはこちら。

.container {
  margin-inline: auto;
  margin-top: 50px;
  max-width: 800px;
  position: relative;
  width: 100%;
}
.sample-img {
  margin-left: 20%; /* テキストの端から画像の端までの長さ */
}
.sample-img 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はかなり長いのですが、ポイントとなる所だけ解説します。

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

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

.sample-img {
  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%にするとこのようになります。

spanタグがwidth: 100%;の場合

spanタグがwidth: 100%;の場合

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

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

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

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

spanタグがwidth: 500%;の場合

spanタグがwidth: 500%;の場合

これでOKです。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, CSS