質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

8607閲覧

【CSS】このデザインはCSSで実装できますか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

6クリップ

投稿2015/09/30 07:34

編集2015/09/30 09:05

イメージ説明

上図のようにBには背景色を設定しております。
Wの部分にある文字は黒で、Bの部分にある文字は白で表示したいと考えおります。
このBは大きウインドウ幅により位置が変わります。
その位置にあわせて文字が変わる場所も変更されるようにしたいと考えております。

【質問】

背景の位置がウインドウ幅にあわせて動的に変わり、それにあわせて文字の色を変えることはできますか?

CSS3のグラデーションで文字色を変えることは可能ですが、背景位置に合わせて変えるとなるとアイデアが思いつきません。
コードを記述いただけると大変助かりますが、アイデアだけでも結構ですのでご教示ください。
基本的なHTML/CSS/jQueryの知識はあります。

レスポンシブで作成し、スマホとPCサイズではデザインが異なるため、「ABDEFG」の文字の部分は出来れば画像ではなくテキストで実現できると嬉しいです。

ご存じの方いれば、教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

なかなかサイズの加減が難しそうですが。
http://jsfiddle.net/h9uLwLff/

HTML

1<div id="black">ABCDEF</div> 2<div id="white">ABCDEF</div>

CSS

1div{ 2 font-size:50px; 3} 4#black{ 5 width:100%; 6 position:absolute; 7 background-color:black; 8 color:white; 9} 10#white{ 11 width:calc(100% - 400px); 12 overflow:hidden; 13 position:absolute; 14 background-color:white; 15 color:black 16}

投稿2015/09/30 09:12

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/30 12:31

おお、すげー!! CSSだけで実装できないと思っていましたが、こんな方法があるんですね。 背景黒の白文字の上に、背景白の黒文字を乗せて、overflow:hiddenで白幅を超える文字を表示させないというやり方ですね。 この「width:calc(100% - 400px)」という指定に一番驚きました。 白幅を可変に、黒幅を固定に見せるために、-400pxする発想はお見事ですね。 この指定方法は今後も役に立ちそうです。 回答ありがとうございましたm(__)m
guest

0

既に終わってた。蛇足になりますが…

HTML

1<style type="text/css"> 2<!-- 3div { 4 background: 5 -webkit-linear-gradient(right 6 , black 0px, black 400px 7 , white 400px, white 100% 8 ); 9 max-width:800px; 10} 11p { 12 background:inherit; 13 -webkit-background-clip: text; 14 -webkit-filter: invert(100%); 15 color: transparent; 16 font-size:150px; 17} 18--> 19</style> 20<div> 21 <p>ABCDE</p> 22</div>

Pの背景にdivの背景コピーして階調反転し、文字でマスクするパターン
chromeでだけ動作確認

投稿2015/09/30 13:11

編集2015/09/30 13:14
hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/30 14:37

フィルターを使う手法もあるんですね。 フィルターは存在しかしらず、使ったことがないので、これを機に試してみます。 参考になりました。 回答ありがとうございましたm(__)m
guest

0

思いつきですが

・Bのデザインで完全な背景を作成してWidthを100%で表示
・Wのデザインで完全な背景を作成してBのデザインに完全に重ねる
・ウィンドウのリサイズに反応させてWの横幅だけを縮める

なんて方法でもよいですかね?

投稿2015/09/30 08:26

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/30 09:03

回答ありがとうございます。 なるほど、2種類の背景を用紙して、Wの方だけサイズを変える手法ですね。 勉強になります。 私が質問で画像でも結構ですと記載していたため、上記の方法をご提示頂きましたが、よくよく考えるとレスポンシブで作成するため、出来れば画像ではなくテキストで実現できると嬉しいです。 折角ご回答頂いたのに誠に申し訳ございませんm(__)m ご回答頂いた手法はとても参考になりました。 ありがとうございました。
takito

2015/09/30 10:03

いえいえ、謝っていただくようなことは何もないですよ たくさんの人がいろんな解釈でそれこそ十人十色の回答をすると思います その中から質問者様の判断で取捨選択し、問題の解決に至れば、どのような回答も(誤った認識の回答でもそれは違うということが具体的になることで)意味を持つ思いますので
退会済みユーザー

退会済みユーザー

2015/09/30 12:33

優しいお言葉ありがとうございます。 また、機会がありましたらよろしくお願いしますm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問