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

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

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

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

Q&A

解決済

2回答

1484閲覧

cssで画像を境に文字や要素の色を変えるには

neginattofan

総合スコア66

CSS

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

0グッド

1クリップ

投稿2020/12/09 03:05

編集2020/12/09 03:57

こちらのサイトに独学でXDから模写したものをあげています。

https://hiroyukitakase.github.io/contact.html

contactページをデベロッパーツールで横幅を375px以下にして見てもらうと分かりますが、

scrollという文字と画像を境に変わる縦棒を置いてあります。

仕様では、おそらく画像を境に白黒が反転するんだと思いますが、方法が分からなかったので、目視で白黒を変えて配置しました。

しかし、写真のheightは画像幅に応じて増減するので、その増減に応じてスクロールバーの縦棒の白黒の境がずれてしまいます。

こういったスクロールバー?を置く簡潔な方法はあるのでしょうか?

画像を境に変えるなら、下の記事のようなものもありますが、

https://webkore.site/text-split/

こちら(http://mr-mr.jp/)のlive the lifeのようにできれば、アニメーションの幅が広がるのでbetterだと思いますが、こちらも方法が分かりません。

スクロールバーの実装のイメージとしては、おそらく後者のサイトのようにするのであって、前者の記事ではないと考えますが。。

このようなスクロールバーの実装方法がわかる方、これ試したらいけるよ、でもいいので詳しい方ご教授ください。

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

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

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

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

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

guest

回答2

0

無事解決できたようで何よりです。
また機会がありましたら宜しくお願い致します。

投稿2020/12/12 23:06

tomtomtomtom

総合スコア563

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

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

neginattofan

2020/12/13 02:35

確認が遅くなってすみません。とても参考になるコードで、勉強になりました!transform-originを使うのは全くわかってませんでした。ありがとうございました。
guest

0

ベストアンサー

一例です。

@media screen and (max-width: 375px) .contact-hero-sp-scroll-container { position: absolute; z-index: 3; top: 100vw; left: 3vw; font-family: 'Montserrat', sans-serif; font-size: 4vw; color: #333333; font-weight: bold; transform: rotate(270deg); display: flex; transform-origin: 0 0 0; width: 30vw;
.contact-hero-sp-scroll-container::before { border-top: 2px solid #fff; content: ""; width: 20vw; position: absolute; top: 1.5vw; left: 28vw;
.contact-hero-sp-scroll-container::after { border-top: 2px solid; content: ""; width: 8vw; top: 1.5vw; position: absolute; left: 20vw;

一応動作確認は行っており境目はずれないかと思います。

投稿2020/12/09 07:39

tomtomtomtom

総合スコア563

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問