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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

1回答

1343閲覧

css:scaleで真上に伸ばしたいのに、斜め右上に伸びてしまう

nan9

総合スコア18

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/10/15 12:20

お世話になりますm(..)m

■やりたいこと
footer をhoverすると、
div:footer_box内のスパンタグが、真上に伸びる(scale)させたく以下書いていますが、

■現状
scaleするときに、なぜか右斜め上方向に、伸びてしまいます。
(hover前の位置とりをpositio:absolute,left:50%指定しているのが
原因?かなと思うものの、left:50%のまま、hover後もニョキッと上に伸ばしたいです><)

html

1 2<footer class="footer"> 3 <div id="footer_box"> 4 5 <img src="../image/dog_kage.png" alt="dog_kage"> 6 <p class="footer_tittle gf">GET IN TOUCH</p> 7 <span class="yokobou"></span> 8 </div> 9</footer> 10 11<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 12<script> 13$(document).ready(function () { 14$(".footer").hover( 15function () { 16$(".yokobou").addClass("new-class"); 17}, 18function () { 19$(".yokobou").removeClass("new-class"); 20} 21); 22}); 23 24$(document).ready(function () { 25$(".footer").hover( 26function () { 27$(".footer_tittle").addClass("font"); 28}, 29function () { 30$(".footer_tittle").removeClass("font"); 31} 32); 33}); 34</script> 35 36 37css--------------------------- 38.footer_box{ 39 position:relative; 40 height: 400px; 41 width: 100%; 42} 43.footer img{ 44 position: absolute; 45 width: 8%; 46 top: 50%; 47 left: 50%; 48 -ms-transform: translate(-50%,-50%); 49 -webkit-transform : translate(-50%,-50%); 50 transform : translate(-50%,-50%); 51} 52div p .font-color{ 53 color: #000; 54} 55.footer_tittle{ 56 position: absolute; 57 color: #FFF; 58 font-weight: 500; 59 font-size: 1.3em; 60 letter-spacing: 0.1em; 61 z-index: 999; 62 top: 50%; 63 left: 50%; 64 -ms-transform: translate(-50%,-50%); 65 -webkit-transform : translate(-50%,-50%); 66 transform : translate(-50%,-50%); 67} 68.yokobou{ 69 color: #FFF; 70 position:absolute; 71 display: block; 72 width: 160px;; 73 height: 5px; 74 background: #FFF; 75 top:54%; 76 left:50%; 77 -ms-transform: translate(-50%,-50%); 78 -webkit-transform : translate(-50%,-50%); 79 transform : translate(-50%,-50%); 80 transition: all 0.6s ease; 81} 82.new-class{ 83 position: absolute; 84 transform: scaleY(10); 85 transform-origin: bottom; 86 width: 160px; 87 left:50%; 88} 89.font{ 90 color:black; 91 font-family: 'Work Sans'; 92 font-weight: 800; 93 font-size: 1.3em; 94 letter-spacing: 0.1em; 95}

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

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

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

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

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

guest

回答1

0

ベストアンサー

まず、htmlでfooter_boxがid指定されているのに、CSSでは.footer_boxとクラスの表記になっているので、#footer_boxとしてください。

それから、想定している動きがよくわからないので的を得ているかわかりませんが、、。
縦に伸びることを想定しているならば、translate(-50%,-50%);では、縦横の方向なので、translateY(-50%);にするべきかなと思います。

文字と.yokobouをきっちりと重ねたいなら、left:50%;では、.yokobouの幅分だけ右に寄ってしまいますので、left:calc(50% - 80px);とします。(80pxは.yokobouのwidthの半分です。)

それから、javascriptで hoverの時に書き足している.new-classの中のleft:50%;も上記と同じくleft:calc(50% - 80px);に変更します。

これで求めている動きに近いはず。

CSS

1.yokobou{ 2 color: pink; 3 position:absolute; 4 display: block; 5 width: 160px; 6 height: 5px; 7 background: pink; 8 top:calc(50% + 30px); 9 left:calc(50% - 80px); 10 -ms-transform: translateY(-50%); 11 -webkit-transform : translateY(-50%); 12 transform : translateY(-50%); 13 transition: all 0.6s ease; 14} 15.new-class{ 16 position: absolute; 17 transform: scaleY(10); 18 transform-origin: bottom; 19 width: 160px; 20 left:calc(50% - 80px); 21}

他にも、translate(-50%,-50%);と書いている部分がありますが、.yokobouが上に伸びる動きとは関係なさそうなので、触れていません。

投稿2018/10/15 16:58

colling

総合スコア798

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

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

nan9

2018/10/17 05:07

この度は、また回答頂きありがとうござます! お手本サンプルを見よう見まねで、参考にしていたのでですが、、 X軸も50%で指定していたの気づかず失礼いたしました。 left:calc(50% - 80px);についても、そういった書き方をすると 今回のやりたいことが出来るのですね>< ご丁寧にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問