Q&A
class="center2"
これは何ですか？
実現したいこと
レスポンシブ対応で1000px以上の画面と300px以上の画面で、送信ボタンの中央位置がずれてしまします。
1000px以上の画面の場合は830×230ボタンの代替え画像と下の画像150×106の２つとも両方が同じ縦軸画面の中央揃えになっていて問題ないのですが、
300px以上の設定の場合、クロームのディベロッパーツールで見ると、一応は830×230送信ボタン代替え画像が中央配置になっているのですが、下の画像150×106と同じ位置での中央配置が適応されません。
830×230ボタンの代替え画像を150×106の画像の中央配置に合わせたいです。
ちょっと意味がわかりにくいですね。画像を参考にしてほしいのですが、
付属画像1 1000px以上の画面（PC画面）のweb表示画像
これは２つの画像が同じ真ん中の位置になっているので全く問題ないです。
付属画像２ と300px以上の画面（スマホ）のディベロッパーツールでの表示画像
確かにボタンの代替え画像は中央配置になっています。しかし、下の左下にある150×106という画像の中央配置の軸が適応されていません。830×230ボタンの代替え画像を150×106の画像の中央配置に合わせたいです。
試してみたこと。
レスポンシブ対応の場合画像の大きさが極端に大きすぎたりする場合は、全体が崩れることがあるので、830×230ボタンの代替え画像と150×106の画像の２つに絞ってコードを書いてみましたが、
300px以上の画面では、830×230ボタンの代替え画像の中央配置の縦軸の位置になり、他の画像の中央配置の指定が効かず....。
スマホサイズに合わせる為、830×230ボタンの代替え画像は小さくしています。 width: 20%;text-align: center;
830×230ボタンの代替え画像と150×106の画像の両方にtext-align: center;を適応。
830×230ボタンの代替え画像の中央軸に合わせるのではなく**、830×230ボタンの代替え画像を150×106の画像の中央軸に合わせたいです。**
先に進めず困っています。原因はなんでしょうか？
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6 <meta content="text/html; charset=utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title></title> 9 <link rel="stylesheet" href="hhh.css"> 10 11 <link rel="stylesheet" href="responsive.css"> 12 <style type="text/css"> 13 14 /* 送信ボタンの大きさ、スタイル */ 15 .auto-style4 { 16 17 margin-top: 74px; 18 /* 画像の上の余白 */ 19 height: 230px; 20 width: 830px; 21 padding: 0; 22 } 23 24 /* buttonを使うとき、勝手に表示される影・枠線・背景色といった装飾をリセットする */ 25 .auto-style4 { 26 cursor: pointer; 27 /* マウスカーソルを乗せると指になる */ 28 outline: none; 29 /* クリックしたときに表示される枠線を消す */ 30 border: 1px solid #000; 31 background: transparent; 32 /* 背景の灰色を消す */ 33 border: none; 34 /* 枠線を消す */ 35 } 36 </style> 37 38</head> 39 40<body> 41 42<form action="△△" method="post"> 43 44<div class="enter"> 45 46 <button type="submit" name="submit" class="auto-style4"> 47 <img src="https://placehold.jp/830x230.png" alt="確認画面へ" class="example8" /></button> 48 </div> 49 50 </form> 51 <!--画像調節可能にするためimg内にclassを作る--> 52 <div class="center2"> 53 <!--画像中央寄せのためdivで囲む--> 54 <p><img src="https://placehold.jp/150x106.png" alt="［写真］" class="example11"> </p> 55 </div> 56</body> 57 58</html>
◎◎◎hhh. css
css
1/* ボタン代替え画像の大きさ調節 */ 2img.example8 { 3 width: 100%;/* ボタン枠に収める */ 4 height: 100%;/* ボタン枠に収める */ 5 6} 7/* 送信ボタンとその画像を中央に配置 */ 8.enter{ 9text-align: center; 10} 11 12/* 画像中央配置 */ 13.center2{ 14 15 box-sizing:border-box; 16 17 text-align: center; 18 19}
◎◎responsive.css レスポンシブのｃｓｓ
responsivecss
1/* 画面幅（300px以上の時までの適応）指定 */ 2@media screen and (min-width: 300px){ 3 4/* ボタン代替え画像の大きさ調節 */ 5img.example8 { 6 width: 20%;/* ボタン枠に収める *//* 画面に入るように大きさ小さくする */ 7 height: 20%;/* ボタン枠に収める *//* 画面に入るように大きさ小さくする */ 8 9} 10/* 送信ボタンとその画像を中央に配置 */ 11.enter{ 12 text-align: center; 13 } 14/* 送信ボタンの大きさ、スタイル */ 15.auto-style4 { 16 17 margin-top: 74px; 18 /* 画像の上の余白 */ 19 height: 100px; 20 width: 80%; 21 padding: 0; 22} 23/* 画像中央配置 */ 24.center2{ 25 26 box-sizing:border-box; 27 28 text-align: center; 29} 30/* 画面幅（1000px以上の時までの適応）指定 */ 31@media screen and (min-width: 1000px){ 32 33/* ボタン代替え画像の大きさ調節 */ 34img.example8 { 35 width: 100%;/* ボタン枠に収める */ 36 height: 100%;/* ボタン枠に収める */ 37 38} 39/* 送信ボタンとその画像を中央に配置 */ 40.enter{ 41text-align: center; 42} 43/* 画像中央配置 */ 44.center2{ 45 46 box-sizing:border-box; 47 48 text-align: center; 49 50}
付属画像４
回答ありがとうございます。書き忘れてました。
/* 画像中央配置 */
.center2{
box-sizing:border-box;
text-align: center;
です。
回答1件
0
ベストアンサー
150×106の位置は期待通りに配置されているけど830×230の位置が変わらないということですよね？
HTMLでhhh.cssとresponsive.cssを読み込んだ後で<style>タグで.auto-style4を上書きしてしまっています。なのでボタンの幅は必ず830pxになっています。それが原因でしょう。
投稿2021/07/06 03:29
総合スコア8402
回答ありがとうございます。1000ｐｘ以上の画面では830×230の大きさにしていますが、
300px以上の場合は
/* ボタン代替え画像の大きさ調節 */
img.example8 {
width: 20%;/* ボタン枠に収める *//* 画面に入るように大きさ小さくする */
height: 20%;/* ボタン枠に収める *//* 画面に入るように大きさ小さくする */
なので、830pxの幅が２０％にはなっているようです。
一応画像を変えてみましたが、付属画像４ 変化ありません。
画像の幅の問題ではなく<button type="submit" name="submit" class="auto-style4">が830pxを占めているのが問題なのです。
返信遅れて申し訳ありません。
どうやらそのようでした。
pxの値で試してみたのですが、真ん中表示にならなかったので、全部％と表示にしました。
全てのｃｓｓ レスポンシブも％にしたらきちんと位置と大きさも適切に表示されました。
/* 送信ボタンの大きさ、スタイル */
.auto-style4 {
margin-top: 74px;
/* 画像の上の余白 */
height: 60%px;
width: 80%px;
padding: 0;
}
ボタンの大きさに合わせて％も同じにする
/* ボタン代替え画像の大きさ調節 */
img.example8 {
width: 80%;/* ボタン枠に収める */
height: 60%;/* ボタン枠に収める */
}
ありがとうございました。助かりました。感謝です。
あなたの回答
tips
プレビュー
