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

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

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

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

CSS

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

Q&A

解決済

1回答

286閲覧

ボタンクリックで中身表示した際のボタン背景を画像にし、切り替えをしたい。

asa.c

総合スコア9

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/06/29 16:34

編集2019/06/29 17:02

ボタンクリックで中身表示した際のボタン背景を画像にし、切り替えをしたい。

クリックで表示・非表示されるものをinput、labelを使用して作成しています。
その際、ボタンとなる背景に画像を配置し、クリックで中身を表示した時にボタンの背景画像も切り替えたいのですがうまくいきません。
複数設置予定で、一つ一つ画像を変えたいのですがそれもうまくいかず手詰まり状態になってしまっています。
どうすれば実装できるか、、他に方法があればご教示いただきたいです。

該当のソースコード

html

1<div class="btn_area"> 2 <input type="checkbox" id="btn1"> 3 <label for="btn1"></label> 4 5 <div class="hidden_show"> 6 <p>タイトル</p> 7 <p>テキストテキストテキストテキストテキスト<br> 8 テキストテキストテキストテキストテキスト<br> 9 テキストテキストテキストテキストテキスト</p> 10 </div> 11</div> 12 13<div class="btn_area"> 14 <input type="checkbox" id="btn2"> 15 <label for="btn2"></label> 16 17 <div class="hidden_show"> 18 <p>タイトル</p> 19 <p>テキストテキストテキストテキストテキスト<br> 20 テキストテキストテキストテキストテキスト<br> 21 テキストテキストテキストテキストテキスト</p> 22 </div> 23</div>

css

1.btn_area{ 2 margin: 0; 3 padding: 0; 4 text-align: center; 5} 6.btn_area label{ 7 margin: 0%; 8 padding: 10%; 9 width: 100%; 10 display: inline-block; 11 background: #445566; 12 cursor: pointer; 13 transition: 0.5s; 14} 15.hidden_show{ 16 background: #667788; 17} 18 19.btn_area input{ 20 display: none; 21} 22.btn_area .hidden_show{ 23 height: 0; 24 padding: 0; 25 overflow: hidden; 26 opacity: 0; 27 transition: 0.8s; 28} 29.btn_area input:checked ~ .hidden_show{ 30 padding: 10px 0px; 31 height: auto; 32 opacity: 1; 33}

追記:背景に画像を配置する際はlabelに対して試していましたが、画像が切れてしまっていたり中身が表示されなくなってしまっていました。

css

1.btn_area label{ 2 margin: 0%; 3 padding: 10%; 4 width: 100%; 5 display: inline-block; 6 background: #445566; 7 cursor: pointer; 8 transition: 0.5s; 9 background-image: url("../images/○○○○○.png"); 10 background-size: 100% auto; 11 display: block; 12 float: left; 13}

試したこと

id名に対してbackground指定しても変わらず、検索してもなかなか思うような情報にたどり着けず
こちらで質問させていただきました。

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

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

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

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

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

kei344

2019/06/29 16:40

(質問文は編集できます)「背景に画像を配置」の部分の試されたコードも質問文にコードブロックで追記してください。
asa.c

2019/06/29 17:04

返信ありがとうございます。 追記しましたのでご確認いただけたら幸いです。
guest

回答1

0

ベストアンサー

「画像が切れてしまっていたり」については画像の縦横比にも関係しますが、少なくとも必要な高さを指定するのが手早いとは思います。(サイトの全体デザインと実画像がどうなっているかわからないので、別の方法があるかもしれません)

CSS

1.btn_area label{ 2 /* margin: 0%; */ 3 /* padding: 10%; */ 4 width: 100%; 5 /* display: inline-block; */ 6 background: #445566; 7 cursor: pointer; 8 transition: 0.5s; 9 background-image: url("https://placehold.jp/24/99cc99/339933/350x100.png?text=○○○○○.png"); 10 background-size: 100% auto; 11 display: block; 12 float: left; 13 height: 2em; /* ADD */ 14}

で、提示のHTML構造であれば、下記記述でチェックされた時の画像を指定できます。

CSS

1.btn_area input:checked + label { 2 background-image: url("https://placehold.jp/24/9999cc/333399/350x100.png?text=○○○○○.png"); 3}

個別に画像を指定するなら下記のような指定方法で処理できます。

CSS

1.btn_area input#btn2:checked + label { 2 background-image: url("https://placehold.jp/24/cc9999/993333/350x100.png?text=○○○○○.png"); 3} 4```**動くサンプル:**[https://jsfiddle.net/hgf41enj/](https://jsfiddle.net/hgf41enj/)

投稿2019/06/29 17:21

kei344

総合スコア69364

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

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

asa.c

2019/06/29 18:03

回答ありがとうございます! 背景画像の配置と切り替えができました! ただ、提示していただいたような綺麗なフェードアウトではなく、 縦に画像が伸びて切り替わり、やはり中身のテキスト部分が真っ白になってしまいます。。 質問していた内容は解決できましたので、後の問題はもう少し調べてみた後、 わからなかったらまた別スレッドで質問させていただきます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問