現在、webページを「ペライチ」というサービスを使って作成しています。
ページ内に<form></form>を設置し、カスタムcssでデザインを後から加えています。
ただ、サイズが小さくなるとデザインが失われて、ただのformになってしまいます。
原因はどこにあると考えられるのでしょうか?
よろしくお願いいたします。
※追記
以下ソースコードです。
html5
1<div class="formContents"> 2 <form id="mainform"> 3 <div class="itemBox"> 4 <h3 class="heading">お支払い情報</h3> 5 <div class="flexContents"> 6 <div class="cell -small -spacerRight nameField"> 7 <label for="last_name">カード番号</label> 8 <input type="text" value="" name="cn" id="cn" class="a-textBox"/> 9 </div> 10 </div> 11 <div class="flexContents"> 12 <div class="cell -small -spacerLeft nameField"> 13 <label for="first_name">カード有効期限</label> 14 <input type="text" value="" name="ed_year" id="ed_year" class="a-textBox"/> / <input type="text" value="" name="ed_month" id="ed_month" class="a-textBox"/> 15 </div> 16 </div> 17 <div class="flexContents"> 18 <div class="cell -small -spacerRight nameField"> 19 <label for="kana_last_name">カード名義人(名)</label> 20 <input type="text" value="" name="fn" id="fn" class="a-textBox"/> 21 </div> 22 </div> 23 <div class="flexContents"> 24 <div class="cell -small -spacerLeft nameField"> 25 <label for="kana_first_name">カード名義人(性)</label> 26 <input type="text" value="" name="ln" id="ln" class="a-textBox"/> 27 </div> 28 </div> 29 <div class="flexContents"> 30 <div class="cell -small -spacerRight nameField"> 31 <label for="kana_last_name">e-mailアドレス</label> 32 <input type="email" value="" name="em" id="em" class="a-textBox"/> 33 </div> 34 </div> 35 <div class="flexContents"> 36 <div class="cell -small -spacerRight nameField"> 37 <label for="kana_last_name">電話番号</label> 38 <input type="tel" value="ハイフンなし" name="pn" id="pn" class="a-textBox"/> 39 </div> 40 </div> 41 42 <input id="tkn" name="tkn" type="hidden" value=""> 43 <input id="aid" name="aid" type="hidden" value="115283"> 44 <input id="rt" name="rt" type="hidden" value="1"> 45 <input id="iid" name="iid" type="hidden" value="0003"> 46 <div class="flexContents submit-btn"> 47 <input type="button" class="submit c-btn" value="購入する" onclick="doPurchase()"/> 48 </div> 49 </div> 50 </form> 51 </div>
こちらはCSSです。
css3
1.heading{ 2 font-size: 24px; 3 font-weight: 400; 4 color: #24387b; 5 margin: 0 0 16px; 6 line-height: 1; 7} 8 9.flexContents{ 10 display: flex; 11 max-width: 800px; 12} 13 14.nameField{ 15 display: flex; 16 align-items: center; 17} 18 19.itemBox label{ 20 display: table-cell; 21 color: #333; 22 font-size: 16px; 23 padding: 0 8px 0 0; 24 width: 152px; 25 font-weight: normal; 26 margin: 15px 5px 5px 5px; 27} 28 29.a-textBox{ 30 background-color: #fff; 31 display: table-cell; 32 max-width: 100%; 33 padding: 6px 8px; 34 box-sizing: border-box; 35 border-radius: 4px; 36} 37 38.submit-btn{ 39 padding-top:10px; 40}
かけたCSSと、「デザインが失われ」るのはそれが具体的にどうなるのか、詳しく教えてください。
かけたCSSは<input>に対して、大きさや影、余白です。 デザインが失われるのは、ブラウザのサイズを小さくしていった時、あるタイミングで失われれます。
現在のコードと画面キャプチャなどご提示ください。
レスポンシブデザインが摘要されているのではないでしょうか?
コードを追記しました
レスポンシブデザインは適用されています。ただ、他のペライチで作成し、html、cssでカスタマイズしたものはサイズ変更してもデザインが失われることはない現状です。
CSSこれで全部ですか?一番外側のクラス名:formContentsにはCSSは適用されていないという認識であっていますか??
はい、こちらでformに適用しているcssは全てとなります。その認識でお間違いありません
ソースコードはマークダウンのcode機能を利用してください
スクリーンショットを追加しました。2枚目の方が大きくなってしまっていますが、2枚目がブラウザを小さくした結果デザインが失われたものです
background-color かなあ。デザインが失われたわけではなく、フォームコントロールの仕様ですね。崩れたわけでもなんでもないです。
お支払情報や、購入するボタンのデザインも崩れていることから、おそらく全体を囲っているformContentsクラスなどが悪さしているのかもしれませんね。貼っていただいているCSSでこれといって原因となりそうな箇所は見受けられない気がします。何かテンプレートは使用していますか?
コメントありがとうございます。formContentsを削除してみましたが、同じ結果でした。テンプレートの使用はしておりません。
>レスポンシブデザインは適用されています。 → ここが原因と推測しますが、ここのコードが提示されないと、今の提示コードではレスポンシブしませんので、検証できません。
回答2件
あなたの回答
tips
プレビュー