Q&A
「初心者」といってもピンキリです。
自身がどの程度理解しているか、調べたことを具体的に記載してください。
本当に何も分からないのであれば、どんな回答も「分かるもの」にはならないと思います。自身の理解度を示すのが先です。
https://m-hand.jp/
このサイトのヘッダーを押すと画面が切り替わるプログラムはjQueryですか？
https://www.kipure.com/article/214/
このサイトを見つけまねしてみたのですがうまく動きません教えてください、お願いします。
progeteのhtml.css.javascriptを終わったぐらいです。
なんとなくではわかりますが、人のコードを読み解くのが難しくてコピペして試してみましたがわかりませんでした。
Progate 全ての人が使うわけじゃないですからね。
それに「終えました」という人ですらピンキリです。
その「なんとなくわかった」部分を具体的に質問本文に記載してください。
今のところ答えられるのは「jQueryですか？」のYes/Noくらいです。これは事実を答えるだけなので解釈不要です。
全て説明するのは不可能ですよ。作った人以外は他人です。
回答2件
0
ベストアンサー
下の様なコードで実行できると思います。
HTML
1<div class="demo_door"> 2 <img src="https://dummyimage.com/600x400/fff/333&text=Hi!" /> 3 <div class="demo_l"></div> 4 <div class="demo_r"></div> 5</div> 6<div class="d_btns"> 7 <div class="demo_btn4 d_btn">Door</div> 8</div>
CSS
1.demo_door { 2 position: relative; 3 background: #eee; 4 width: 300px; 5 height: 150px; 6 overflow: hidden; 7 display: flex; 8} 9.demo_l { 10 position: absolute; 11 transition: all 1500ms 0s ease; 12 background: #555; 13 width: 50%; 14 height: 150px; 15 top: 0; 16 left: 0; 17 background-image: url(https://placehold.jp/10x10.png); 18 background-repeat: repeat; 19} 20.demo_l.open { 21 margin-left: -50%; 22} 23.demo_r { 24 position: absolute; 25 transition: all 1500ms 0s ease; 26 background: #555; 27 width: 50%; 28 height: 150px; 29 top: 0; 30 left: 50%; 31 background-image: url(https://placehold.jp/10x10.png); 32 background-repeat: repeat; 33} 34.demo_r.open { 35 margin-left: 50%; 36} 37.demo_door img { 38 width: 100%; 39} 40 41.d_btns { 42 display: flex; 43 padding: 10px 0; 44} 45.d_btn { 46 cursor: pointer; 47 text-align: center; 48 padding: 10px 10px; 49 margin: 0 10px 0 0; 50 font-size: 14px; 51 color: #fff; 52 background-color: #c00; 53 border-radius: 5px; 54 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 55}
jQuery
1$(function () { 2 $(".demo_btn4").on("click", function () { 3 $(".demo_door .demo_l").toggleClass("open"); 4 $(".demo_door .demo_r").toggleClass("open"); 5 }); 6});
投稿2020/05/20 13:42
総合スコア806
書いてくださったコードをこのようにしたのですが
HTML
<body>
<div class="demo_door">
<img src="https://dummyimage.com/600x400/fff/333&text=Hi!" />
<div class="demo_l">
<img src="dog L.jpg" width="300px" height="200px">
</div>
<div class="demo_r">
<img src="dog R.jpg" width="300px" height="200px" >
</div>
</div>
<div class="d_btns">
<div class="demo_btn4 d_btn">
<button type="button" name="button">押す</button>
</div>
画像がしたにいって何もおきませんしつこく質問して申し訳ありません。
まずは、私がはじめに提示したコードはしっかり動きましたか？
demo_l（左の扉）とdemo_r（右の扉）はCSSの方で画像を設定しているので、HTMLをいじるのではなく、CSSの方を修正してください。
下のコードが例になります。
.demo_door {
position: relative;
background: #eee;
width: 300px;
height: 150px;
overflow: hidden;
display: flex;
}
.demo_l {
position: absolute;
transition: all 1500ms 0s ease;
background: #555;
width: 50%;
height: 150px;
top: 0;
left: 0;
background-image: url(https://dummyimage.com/600x400/eee/333&text=左);
background-repeat: repeat;
background-size: cover;
background-position: center;
}
.demo_l.open {
margin-left: -50%;
}
.demo_r {
position: absolute;
transition: all 1500ms 0s ease;
background: #555;
width: 50%;
height: 150px;
top: 0;
left: 50%;
background-image: url(https://dummyimage.com/600x400/eee/333&text=右);
background-repeat: repeat;
background-size: cover;
background-position: center;
}
.demo_r.open {
margin-left: 50%;
}
.demo_door img {
width: 100%;
}
.d_btns {
display: flex;
padding: 10px 0;
}
.d_btn {
cursor: pointer;
text-align: center;
padding: 10px 10px;
margin: 0 10px 0 0;
font-size: 14px;
color: #fff;
background-color: #c00;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
HTMLに書かず
0
言われたコードを書いたらできました。
ありがとうございます！
投稿2020/05/21 12:38
総合スコア25
あなたの回答
tips
プレビュー
