Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
現在、javascriptの学習一環としてじゃんけんアプリを作っています。
その中でグー・チョキ・パーの３つの画像を横並びに表示したいと思っております。
発生している問題・エラーメッセージ
画像を探して、html・cssで画像を表示することまでは出来たのですが、
画像のサイズが大きいのか、横並びになってくれず、画像の大きさもバラバラです。
### 該当のソースコード <html> <main> <div class="btn"> <div class="gu"> <button id="gu_btn"><img src="9344.jpg"></button> </div> <div class="choki"> <button id="cho_btn"><img src="9356.jpg" alt=""></button> </div> <div class="pa"> <button id="par_btn"><img src="9357.jpg"></button> </div> </div> <div id="computer">コンピュータの出した手は？</div> <div id="judgment">結果は？</div> </main> ソースコード <CSS> .btn{ display: flex; justify-content:center; align-items:center; width:100% } .gu{ width: 30%; } .choki{ width: 30%; } .pa{ width: 30%; } 画像の幅なども指定してますが、なかなかうまくいきません。。。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
現状どんな表示になっているのかスクリーンショット等があれば把握しやすいです。
回答2件
0
フレックスアイテム自体はきちんと並んでいますが、子のボタンが左に寄っているからずれているように見えているのでしょう。
CSS
1.gu, 2.choki, 3.pa { 4 text-align: center; 5}
投稿2018/12/14 06:38
総合スコア13749
0
コードをサッと拝見しますと、画像へのCSSが適用されていないのではないかと思いました。
もしすべての画像を同じ幅で表示したいなら、以下のような指定方法で期待する動作にならないでしょうか。
.btn > div button img{ width:100%; }
これで画像の幅がボタンの幅（30%）に指定されないでしょうか。
画像をレスポンジブの場合、img要素として個別に指定してあげる必要があります。
もしサイト全体の画像をレスポンシブにしたいなら、シンプルにセレクタをimgだけにして、widthを100%と指定してあげるといいかもしれませんよ！
投稿2018/12/13 18:00
編集2018/12/13 18:03
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
