- ベストアンサー
CSSで rotate 値が書き換えられない理由
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
"rotateX(" + p + ")deg" ; ではなく "rotateX(" + p + "deg)" ; でしょう。
関連するQ&A
- CSS/HTML で画像 2枚重ねた上に文字。
最近ホームページを作成しているのですが、画像 2 枚を重ねて、その上にリンク付きの文字を のせるにはどのようにしたらよいでしょうか。 CSS を構い始めたのは 1 週間程度なので、基礎的なこともわかってない部分があります。 いろいろ試して、(3)が近いような気がしますが、(1)、(2)に付け加える形でもよいので、 ご教授お願いします。 以下、私が試した 3 パターンの方法です。数値、画像は適当な値です。 (1) 画像 1 枚の上に文字を入れた形。※画像 2 枚目を重ねられませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } --- HTML --- <DIV class="img1">タイトルなどのテキスト</div> --------------------------- (2) 画像を 2 枚重ねた形。 ※文字を上に載せれませんでした。 --------------------------- --- CSS --- #img1 { background-image : url(img1) ; background-repeat : no-repeat ; width : 100px; height : 100px; /* -- 各ブラウザ対応用 -- */ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .img2 { padding: 50px 0 0 0px; /*2枚目の画像の位置調整*/ } --- HTML --- <div id="img1"> <img class="img2" src="red-star.png" width="横" height="高さ"> </div> --------------------------- (3) 画像 2 枚を重ねた上に文字を載せた場合。 ※思ったとおりに表示できました。が、何故か<a href="#">テスト</a> のリンクができません。。。 --------------------------- --- CSS --- #img1 { position: relative; bottom :-100px; left: -80px; width : 250px; height : 80px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 2; } #img2 { position: relative; bottom :90px; left: 80px; width : 200px; height : 40px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 1; } #MENU { position: relative; bottom :725px; left: -25px; transform: rotate( -15deg ); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); z-index: 3; } --- HTML --- <div id="img1"><img src="img1" width="100" height="100"></div> <div id="img2"><img src="img1" width="100" height="100"></div> <div id="MENU"><a href="#">テスト</a></div> ---------------------------
- 締切済み
- HTML
- Javascriptのエラー
HTML中のJavascriptのがエラーになって表示されません。どうすればいいでしょうか… HTMLは以下の通りです。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javascript</title> <style> .box{ width: 100px; height: 100px; bockground-color: skyblue; cursor:pointer; transition: 0.8s; } .circle{ background-color: pink; border-radius: 50%; transform: rotate(360deg;) } </style> </head> <body> <div class="box" id="target"></div> <script> 'use dtrict'; document.getElementById('target').addEvenListener('click',()=>{ document.getElementById('target').classList,add('circle'); }); </script> </body> </html> Chromeのデペロッパーツールでは、26行目がエラーになっていると書いてありますが（添付画像参照）、どこがエラーなのかがさっぱり分かりません。 どなたか詳しい方、どこがエラーで、どうすれば直るかを教えていただけないでしょうか。 26行目は、 document.getElementById('target').addEvenListener('click',()=>{ と記述してあるところです。 ちなみにこのHTMLソースコードは、「ドットインストール」と言うサイトの講座の「はじめてのJavascript」を参考にして書きました。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- CSS3回転済み要素上のevent.x,yについて
■概要 IEのDXフィルターがIE10で廃止されたのをきっかけに、CSS3に手を出し始めました。 回転にはスタイルシートの属性値としてtransfar:rotate([number]deg)を用いますが、この回転を行った要素についておかしな点があったので質問させていただきます。 回転処理を行った要素上でマウスイベント（mousedown,move,up他）の座標メンバ（x,y）を取得すると、意味のわからない座標になっています。 規則性を見つけようとしましたが、効率の良い方法が見つからず悩んでいます。 やりたかったことは、回転済み要素をマウスでＤ＆Ｄすることですが、マウスダウンの瞬間、座標がすっとんで、要素がワープします。 この現象の原因、仕組み、解決策等、ご回答よろしくお願い致します。m(_ _)m ■以下備考、随時補足させていただきます。 ・動作環境はIE10inWIN7、他は試していない。 ・rotate無しだと期待通りの動作。 ・ありだとたとえrotate(0deg)でもこの現象が起きる。 ■以下ソースコード：ローテートの行を消したりつけたりしてみてください。 <div id=asdf> aaa </div> <script> function SQUARE(){ this.posX = 0; this.posY = 100; } var elm; var square = new SQUARE(); function MainLoop(){ elm.style.left = square.posX; elm.style.top = square.posY; InputQWER(elm.style.left + ", " + elm.style.top); } function InputQWER(str){ var elm = document.getElementById("qwer"); elm.value = str; } function InputZXCV(str){ var elm = document.getElementById("zxcv"); elm.value = str; } function main(){ elm = document.getElementById("asdf"); elm.style.width = 100; elm.style.height = 100; elm.style.background = "yellow"; elm.style.position = "absolute"; //■■■■■■■■■■■■■■■■■■■■■■ ローテートの行 elm.style.msTransform = "rotate(30deg)"; elm.attachEvent("onmousemove", function(evt){ square.posX = evt.x; square.posY = evt.y; InputZXCV(evt.x + ", " + evt.y); }); timer = setInterval("MainLoop()", 100); } setTimeout("main()", 10); </script> <input id=qwer> <input id=zxcv>
- 締切済み
- JavaScript
- onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- 締切済み
- JavaScript
- CSSで記述した数値が取得できない
あるdivタグのサイズを640px*480pxにしようと思い、以下のように記述しました。 （省略） <style type="text/css"> <!-- #oshiete { width: 640px; height: 480px; } //--> </style> </head> <body> <div id="oshiete"></div> （省略） その後、これをJavaScriptで動的に変化させようとしたのですが、 document.getElementById("oshiete").style.width などでの数値の取得が出来ません。 調べてみたところ、divタグに <div id="oshiete" style="width: 640px; height: 480px;"></div> と直接スタイルを記述していれば数値の取得が出来ました。 しかしスタイルシートを使う以上、タグに直接スタイルを書いていたのではせっかくの効果が発揮できません。 スタイルシートをheadタグに記述、あるいは外部CSS呼び出しを使いつつ、JavaScriptから数値を取得する方法を教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- css javascriptについて教えて下さい。
下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。 そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count; box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Ｐタグを生成</button> </body> </html>
- ベストアンサー
- HTML
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- プルダウンメニューでページ内の表示を変える の派生質問
某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1～3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか？ ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ１</option> <option value="item2">ディブ２</option> <option value="item3">ディブ３</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>
- 締切済み
- JavaScript
お礼
誤りをご指摘していただき助かりました。 どうもありがとうございました。