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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

Q&A

解決済

1回答

3755閲覧

画像にアニメーションを正確に重ねるCSSを教えてください。

sheep_70

総合スコア13

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

0グッド

1クリップ

投稿2015/11/20 23:23

編集2015/11/22 18:59

教えてください。
背景画像img-bg.jpgにネコの画像cat.pngを乗せて、ネコに目の画像catseye.pngを重ねてアニメーションanimated tadaを右目と左目で動かしたいのですが、きちんと目を定位置に重ねることができません。レスポンシブで画面の大きさを変えると微妙にずれてしまいます。
あと、目の大きさも画面の大きさに伴って拡大縮小されず、大きさが変わりません。
背景画像とネコ画像はキチンとレスポンシブ対応されているので目の画像をきちんと重ねて、目の大きさもレスポンシブ対応になるようCSSコードの修正箇所を教えてください。
当方、初心者でググリながらコードをコピーしていますのでメチャクチャのコードだと思いますが、わかりやすく教えていただけると助かります。
何卒ご教授お願いいたします。

HTML

<section id="intro" class="intro"> <div class="cat"><img src="img/cat.png"> <div id="catseye-l" class="animated tada"><img src="img/catseye.png"></div> <div id="catseye-r" class="animated tada"><img src="img/catseye.png"></div> </div> <div class="slogan"> <h1><div class="animated pulse"><img src="img/job-like-logo500.png"></div></h1> <p>アイウエオカキクケコ</p> <a href="#about" class="btn btn-skin scroll">くわしくはコチラ</a> </div> </section> <!-- /Section: intro --> コード

CSS

#intro{ background: url(../img/img-bg.jpg) right bottom no-repeat; height: 0; padding-bottom: 58.53%; background-size: contain; margin:25px 0 0 0; z-index:1; } .cat{ position:relative; width:70%; height:auto; margin:0 auto; } .cat img{ position:relative; width:100%; height:auto; margin:0 auto; z-index:2; } #catseye-l{ position:absolute; max-width:100%; height:auto; left:24%; top:8%; } #catseye-r { position:absolute; max-width:100%; height:auto; left:50%; top:7%; } コード

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

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

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

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

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

Lhankor_Mhy

2015/11/21 08:44

このソースで画像表示されてますか? contentプロパティは before疑似要素がないと働かないのではなかったかな、と。
sheep_70

2015/11/21 09:10

ありがとうございます。 はい、表示はされていますが、カンタンにググって見ると、そもそもcontentプロパティを使わなくても良さそうですね。。。
sheep_70

2015/11/21 11:36

コードを修正しました。現コードに対しての解決方法をお願いいたします。
Lhankor_Mhy

2015/11/22 08:12

実際の画像URLを公開できますか? 想定しているものがちょっと分からないもので……せめて画像のサイズが分かればなんとか……
sheep_70

2015/11/22 18:45

ご丁寧にありがとうございます。ちょっと公開ができないもので、、、。でも教えて欲しいです。。。困りました、、、
guest

回答1

0

ベストアンサー

実際に表示させたい画像が不明なので正確なコードは記載できませんが、
猫の目を絶対配置させる際の座標基準となる要素が .intro になっているのが良くないと思います。

  1. 猫の顔の表示サイズは .cat img ではなく 親要素である.cat で指定する。
  2. 猫の顔画像とその親要素.catのサイズがイコールになるよう、余計なpadding等はつけない
  3. .catをposition:relativeとし、猫の目を絶対配置する際の基準ボックスとする
  4. 猫の目画像のサイズ/座標位置を、元となる猫の顔画像の縦横サイズを基準として正確に%で計算し、指定する

理論的にはこれで猫の顔画像に対して猫の目画像を正確に配置できるはずです。

投稿2015/11/22 14:44

aKusano

総合スコア3763

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

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

sheep_70

2015/11/22 19:05

ありがとうございます。正確にコード記載していないのにご回答助かります。 初心者なので回答に対してうまく理解もできない中でコード修正してみました。 おかげさまで猫の目の位置は微妙なズレまでいきました。正確な位置の計算方法はありますか? あと、猫の目はレスポンシブの画面拡大縮小に伴って大きさが変わらなくて一定のままなのです。 どこを変更すればよろしいのでしょうか? よろしくお願いします。
aKusano

2015/11/23 07:26

>猫の目はレスポンシブの画面拡大縮小に伴って大きさが変わらなくて一定のまま 固定サイズで良いならwidthとheightをpx指定すれば良いです。 ただ、ベースの顔のサイズが変わるのに、目のサイズが変わらないと 位置調整がかなり大変になりますね。おそらくCSSでは最後の微調整はできないので、 拡大した猫の目画像が配置されるべき位置から、原寸サイズの猫の目画像が配置される位置までの誤差を計算して、それをJavaScrptでリアルタイムに補正しないといけないと思います。
sheep_70

2015/11/25 09:35

ありがとうございます。ちょっと難しそうですね。違うデザインにしてみます。 ご丁寧にありがとうございました。 また、何かありましたらよろしくお願いおいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問