テクニックだけで文字の色を半分だけ変える方法を紹介します。言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。https://on-ze.com/demo/css3-black-white/上記のサンプルではレスポンシヴにも対応。すべてのデバイスで同じように表示させることに成功しています。同じテキストを2回記述するのではなく、カスタムデータ属性を追加しただけの非常にシンプルなコードです。White</p>ここではカスタムデータ属性は『data-inverted』と名付けています。続いてキモとなるスタイルシートの記述です。{content:attr(data-inverted);overflow:hidden;position:absolute;left:0;top:0;width:50%;color:#000;}HTML側で追加したカスタムデータ属性をCSSのcontent:attr(data-inverted);でコピーして、ベースのテキストとは違う色を指定します。理屈がわかれば簡単ですが、目からウロコの斬新な発想ですよね。ちなみに、このスタイルシートの設定でwidth:50%;の箇所をheight:50%;に変えると、文字の左右ではなく、上下で違う色を指定することが可能です。縦バージョンのデモは以下。https://on-ze.com/demo/css3-black-white-verticalぜひお試しください。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。Layout]を使ってみました。【CSS3】ブラウザによって異なるフォーム要素のデザインをリセットする方法。CSS】新しい「スタイルシート・リセット」のカタチ。【CSS3】ブラウザの限界を突破した極小サイズの文字を表示させてみた。【CSS】番号リストの表示を変更する方法。