on:2017年3月27日sponsors文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。他のカラーでも利用でき、レスポンシブにも完全対応しています。最近増えてきた2分割のレイアウトにも使えますね。目から鱗のアイデア最初に思いつく方法として、ブラックとホワイトの「a」を2つ用意するがあるかもしれませんが、テキストとして「aa」となるのはいただけません。HTMLは、下記のように実装されています。Side</h1>「a」だけでなく、テキスト全体を2つ用意し重ねます。これならspanなどの余計なタグも不要です。背景のホワイトとブラックで半々にグラデーションで指定されており、レスポンシブにも対応しています。テキストはデータの方はホワイト、data属性は:before疑似要素で配置し、ブラックにします。#000;}デモ実際のデモは、下記でお楽しみください。レスポンシブ対応で、カラーの境界やサイズが変更されます。