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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

868閲覧

レスポンシブ対応時にbodyのサイズが変更されません。

aku424tt

総合スコア15

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/20 09:05

前提・実現したいこと

現在制作中のお問い合わせフォームのレスポンシブ化をうまく行いたいです。
PCでの表示時とSPでの表示時でのデザインに関してはほとんど同じです。
PC時では背景が表示され、SPでは背景が隠れるように行いたいです。
しかし、現状はSPでの表示時にbodyのwidthgが980px以下にならず、とても見にくい状態です。
bodyのwidthがデバイスの幅に合わせて変更できるようにしたいです。

該当のソースコード

html

1 2<html> 3 <head> 4 <title>会員登録フォーム</title> 5 <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> 6 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 7 <!-- google フォント --> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> 11 <!-- <script type="text/javascript" src="/js/form_v2.js" charset="UTF-8"></script> --> 12 <style src="../../css/form.css"></style> 13 <meta http-equiv="content-type" charset="UTF-8"> 14 <!-- favicon --> 15 <link rel="icon" href="http://mouton.atp-dev.com/wps/wp-content/themes/mouton/assets/img/favicon.ico"> 16 <script script> 17 var formid = location.pathname.split("/")[location.pathname.split("/").length -2];; 18 console.log("formid:"+formid); 19 20 $(function() { 21 $('#form_send').click(function() { 22 var error = ""; 23 if (!$('#check').prop("checked")) { 24 error += "利用規約への同意をお願いいたします\n"; 25 } 26 var form_name1 = $('#form_name1').val(); 27 var form_name2 = $('#form_name2').val(); 28 if (form_name1.length === 0 || form_name2.length === 0) { 29 error += "登録者名(漢字)を正しく入力してください\n"; 30 } 31 var form_kana1 = $('#form_kana1').val(); 32 var form_kana2 = $('#form_kana2').val(); 33 if (form_kana1.length === 0 || form_kana2.length === 0) { 34 error += "登録者名(カナ)を正しく入力してください\n"; 35 } 36 var form_salonname = $('#form_salonname').val(); 37 if (form_salonname.length === 0) { 38 error += "サロン名を入力してください\n"; 39 } 40 var form_shopname = $('#form_shopname').val(); 41 if (form_shopname.length === 0) { 42 error += "お知りになったきっかけを選択してください\n"; 43 } 44 var form_usetime = $('#form_usetime').val(); 45 if (form_usetime.length === 0) { 46 error += "想定のご利用仕入れ金額を選択してください\n"; 47 } 48 if ($('input[name=form_license]:checked').length === 0) { 49 error += "ご利用の【カラー剤メーカー】にチェックをお願いします\n"; 50 } 51 var form_usestart = $('#form_usestart').val(); 52 if (form_usestart.length === 0) { 53 error += "ご利用開始の予定月を選択してください\n"; 54 } 55 var form_zipcode1 = $('#form_zipcode1').val(); 56 var form_zipcode2 = $('#form_zipcode2').val(); 57 if (form_zipcode1.length === 0 || form_zipcode2.length === 0) { 58 error += "郵便番号を正しく入力してください\n"; 59 } 60 var form_address = $('#form_address').val(); 61 if (form_address.length === 0) { 62 error += "サロン住所を入力してください\n"; 63 } 64 var form_telephone1 = $('#form_telephone1').val(); 65 var form_telephone2 = $('#form_telephone2').val(); 66 var form_telephone3 = $('#form_telephone3').val(); 67 if (form_telephone1.length === 0 || form_telephone2.length === 0 || form_telephone3.length === 0) { 68 error += "電話番号を正しく入力してください\n"; 69 } 70 var form_email = $('#form_email').val(); 71 if (form_email.length === 0) { 72 error += "メールアドレスを入力してください\n"; 73 } 74 if (!$('input[name=form_inv_title]:checked').val()) { 75 error += "請求書送付先名義を選択してください\n"; 76 } 77 if (!$('input[name=form_paymenttype]:checked').prop("checked")) { 78 error += "決済方法を選択してください\n"; 79 } 80 81 if (error.length > 0) { 82 // エラーの場合 83 alert(error); 84 } else { 85 console.log("POST"); 86 checkpayment(formid); 87 } 88 }); 89 }); 90 91 92 </script> 93 </head> 94 <body style="background-image:url(http://mouton.atp-dev.com/wps/wp-content/themes/mouton/assets/img/back_gradation.jpg); 95 background-size: cover; 96 background-attachment: fixed; 97 font-family: 'Noto Sans JP', sans-serif; 98 line-height: 1.7; 99 font-size: .9rem; 100 "> 101 <div class="container" style="width: 375px;"> 102 <h1 style="font-size: 29px;">契約店フォーム</h1> 103 <from action="#"> 104 <div class="card shadow-sm mt-4"> 105 <div class="card shadow-sm mt-4"> 106 <div class="card-header"> 107 サービス利用規約 108 </div> 109 <div class="card-body"> 110 111 ■支払い方法<br> 112 ・クレジットカードでの支払いとなります。<br> 113 ※フォームご登録後、決済情報の登録メールを送付致します。ご対応をお願い致します。<br> 114 </div> 115 <div class="card shadow-sm mt-4"> 116 <div class="card-header"> 117 <div class="form-inline" style="flex-wrap: nowrap; align-items: start;"> 118 <input type="checkbox" name="check" id="check" value="OK" class="form-control mr-2" style="height: 25px; width: 25px;"> 119 <label>上記利用規約を承諾した上で加盟店への登録を希望する</label> 120 </div> 121 </div> 122 </div> 123 <div class="card shadow-sm mt-4"> 124 <div class="card-header"> 125 登録者名<span style="color:#f00;font-size:80%;">(必須)</span> 126 </div> 127 <div class="card-body"> 128 <div class="form-group"> 129 <lable> 漢字 </lable> 130 <div class="form-inline"> 131 <input type="text" name="form_name1" id="form_name1" class="form-control" maxlength="10" style="width: 49%;">&nbsp; 132 <input type="text" name="form_name2" id="form_name2" class="form-control" maxlength="10" style="width: 49%;"> 133 </div> 134 </div> 135 <div class="form-group"> 136 <lable> カナ </lable> 137 <div class="form-inline"> 138 <input type="text" name="form_kana1" id="form_kana1" class="form-control" maxlength="10" style="width: 49%;">&nbsp; 139 <input type="text" name="form_kana2" id="form_kana2" class="form-control" maxlength="10" style="width: 49%;"> 140 </div> 141 </div> 142 </div> 143 </div> 144 <div class="form-group mt-3 text-right"> 145 <input type="hidden" name="card_token" id="card_token"> 146 <input class="btn btn-primary" id="form_send" value="送信"> 147 </div> 148 </from> 149 </div> 150 </body> 151</html> 152

試したこと

bodyに直接widthのstyleを当ててみたのですがうまくできませんでした。

補足情報(FW/ツールのバージョンなど)

cssに関しましては、HTMLファイルに直接記入するような形になっております。
記載させていただきましたお問い合わせ内容の詳細に関しましては、
省略させていただおておりますので、ご理解いただけますと幸いです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

headタグ内に以下の1行を追加してください。
viewportを付けないとレスポンシブ時に自動縮小されてしまいます。

html

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

投稿2021/07/20 09:18

jun26

総合スコア191

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

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

aku424tt

2021/07/20 09:25

ご指摘、ありがとうございます。 普段、VScodeの雛形で自動生成されるので、気にしていませんでした。 viewportの知識を改めて学び直そうと思います。 ありがとうございます。
guest

0

viewportを設定するといいかと思います。

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

投稿2021/07/20 09:15

Lhankor_Mhy

総合スコア35865

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

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

aku424tt

2021/07/20 09:24

ご指摘、ありがとうございます。 普段、VScodeの雛形で自動生成されるので、気にしていませんでした。 今後気をつけます。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問