Q&A
各画像のサイズを教えていただけませんか？
前提・実現したいこと
bt画像をクリックすると
したに隠れているimg2が出るようなものを作っています。
img1の指定の位置にBTの画像を置きたいです。
###エラー
img1を親にpositionを使っているのですができていないようで全体から(？)の
位置になってしまっている。
該当のソースコード
html
1 2<body> 3 <div class="grad-wrap"> 4 <div id="main"><img src="img1.jpg"></div> 5 <input id="trigger1" class="grad-trigger" type="checkbox" > 6 <label class="grad-btn" for="trigger1"><img src="bt.jpg"></label> 7 <div class="grad-item"><img src="img2.jpg"></div> 8</div> 9 <img src="img3.jpg"> 10 <img src="img4.jpg"> 11 <img src="img5.jpg"> 12 <img src="img6.jpg"> 13</body>
css
1<style type="text/css"> 2#main{ 3 position: relative; 4} 5 6.grad-btn { 7 /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/ 8 position: absolute; 9 top: 90%; 10 left: 30%; 11 12} 13.grad-btn:hover{ 14 opacity: 0.8; 15 cursor: pointer; 16} 17.grad-btn::before { 18 content: ""; 19} 20.grad-item { 21 position: relative; 22 overflow: hidden; 23 height: 0px; /*隠した状態の高さ*/ 24} 25.grad-item::before { 26 display: block; 27 position: absolute; 28 bottom: 0; 29 left: 0; 30 width: 100%; 31 content: ""; 32 33} 34.grad-trigger { 35 display: none; /*チェックボックスは常に非表示*/ 36} 37.grad-trigger:checked ~ .grad-btn::before { 38} 39.grad-trigger:checked ~ .grad-item { 40 height: auto; /*チェックされていたら、高さを戻す*/ 41} 42.grad-trigger:checked ~ .grad-item::before { 43 display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/ 44} 45 46</style> 47
試したこと
コードを少し変えてみたりしたのですがそうしたら指定の場所に配置はされるけど
クリックするとBTの画像が消えてしまったりしました。
コメントありがとうございます。
imgはすべて900pxです。
btのサイズが今正確なものがわからないのですが、おそらく600-750pxくらいだったと思います。
返信ありがとうございます。
> imgはすべて900pxです。
縦横どちらも 900px ということで良いでしょうか？
また、1つの画像しか`div#main`内に入っていませんが、これは意図した記述でしょうか？
失礼しました、img1.2.3.4は横幅が900pxで縦はそれぞれ異なります。
縦はどれもサイズが違うのですがどれも1500px以上です。
btは縦幅が正確にわからないのですが150pxくらいです。
positionを使うには親にするものにidをふらなきゃいけないと習っていて、先ほどコーティングしていた時はimgにidをつけれると知らなくてdivにid＝mainをつけてみました。
特に意図があってしたものではないです、すみません、、
回答2件
0
ベストアンサー
先の回答でimg2が表示されないのは、
セレクタ「～」は同階層以降に使えるので、checkedに連動する要素(.grad-item)の階層が離れるのが原因です。
（grad-triggerとgrad-itemの階層の関係）
labelだけを♯mainの中に入れてみてください
html
1 <div id="main"> 2 <img src="img1.jpg"> 3 <label class="grad-btn bt" for="trigger1"><img src="bt.jpg"></label> 4 </div> 5 <input id="trigger1" class="grad-trigger" type="checkbox" > 6 <div class="grad-item"> 7 <img src="img2.jpg"> 8 </div>
投稿2019/01/18 13:22
編集2019/01/18 13:25
総合スコア955
お返事ありがとうございます！
無事解決できました！
一人で試行錯誤してみたのですがその発想に至らなかったため、とても勉強になりました。
追加で気になることがあり、もしよろしければ質問させていただきたいです。
回答でいただいたコードを違う画像を使って繰り返したい場合どこにIDを振ればよいのでしょう？
mainに続き同じようにmain2,main3と続けていく予定です。
今は
#main{
position: relative;
}
.grad-btn {
position: absolute;
top: 10%;
left: 0%;
}
で場所を指定しているのですが、繰り返しする場合
#main2{
position: relative;
}
.grad-btn {
position: absolute;
top: 10%;
left: 0%;
}
#main3{
position: relative;
}
.grad-btn {
position: absolute;
top: 10%;
left: 0%;
}
のようにgrad-btnをposition: absolute;にすると繰り返したすべてが top: 10%; left: 0%;になってしまうと思い、input id="trigger1" をposition: absolute;にしてみたのですが、そうするとまたposition: absolute;が適用されなくなってしまいました。
もしよろしければご回答お願いしたいです。
よろしくお願いいたします。
ごめんなさい。現状が理解できないのですが
とりあえず、#trigger1は非表示ですよね？absoluteする必要が無いと思うのですが。。。
0
positionは親要素に対して有効です。
HTML
1<input id="trigger1" class="grad-trigger" type="checkbox" > 2<label class="grad-btn" for="trigger1"><img src="bt.jpg"></label>
を
<div id="main"> の小要素にしてみて下さい。 ```HTML <div id="main"> <img src="img1.jpg"> <input id="trigger1" class="grad-trigger" type="checkbox" > <label class="grad-btn" for="trigger1"><img src="bt.jpg"></label> </div> ```投稿2019/01/18 07:49
総合スコア51
<div class="grad-wrap">
<div id="main">
<img src="img1.jpg">
<input id="trigger1" class="grad-trigger" type="checkbox" >
<label class="grad-btn" for="trigger1"><img src="bt.jpg"></label>
</div>
<div class="grad-item"><img src="img2.jpg"></div>
</div>
でやってみましたがそうするとimg2が表示されませんでした。
またabsoruteも適用されませんでした。どこが間違っているのかわからないのですがどうしたらよいでしょう、、、
もしくは
.grad-wrap
に
position: relative;
を指定してみてはいかがでしょう？
いずれにしても
.grad-btn
に指定しているpositonの対象が既存のソースだと
bodyになっている事が要因です。
そうするとbtがimg2の後ろに来てしまいました。
もう一度自分で考え直してみます。
ありがとうございました。
あなたの回答
tips
プレビュー
