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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

1375閲覧

スマホサイト用に注文フォームを作ると右端に隙間ができる問題

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/09/17 07:09

編集2017/09/17 07:22

以下のコードでスマホサイト用に注文フォームを作ると右端に隙間ができます。スマホ(Chromeとsafari)で閲覧してもPC(Chrome、safari)で閲覧しても同じ現象になります。

最初はTableで作っていたのですが、それが原因かと思い、divに変更したのですが、それでも同じ結果です。

解決方法を教えていただけると幸いです。スマホで閲覧したほうが隙間が目立ちます。

「iPhone 6 sPlus Chromeで閲覧した場合」
イメージ説明
赤い部分に隙間ができる。
(このサイトの文字数制限で画像にある都道府県のセレクトはソースコードでは無くしています)

「html」

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/top_style.css"> <link rel="stylesheet" type="text/css" href="css/order_style.css"> <title>talent design.「注文」 - TEST会社 -</title> </head> <body> <header> <h1><a href="index.html"></a></h1> <p class="header_p1">TEST会社</p> </header> <nav> <div id="ham-menu"> <ul> <li class="menu_01"><a href="index.html">トップページ</a></li> <li class="menu_02"><a href="concept.html">コンセプト</a></li> <li class="menu_03"><a href="gallery.html">ギャラリー</a> </li> <li class="menu_04"> <a href="production_flow.html">制作の流れ</a></li> <li class="menu_05"><a href="order.html">注文</a></li> <li class="menu_06"><a href="confirm.html">会社概要</a></li> <li class="menu_07"></a><a href="contact.html">問い合わせ</a></li> </ul> </div> <div id="menu-background"></div> </nav> <!-- top_menu --> <!-- order_box --> <section id="order_box"> <h2 class="confirm_title_p">注文フォーム</h2> <form role="form" action="order_confirm.php" metdod="post"> <div class="form_name"> <p>名前</p> </div> <div class="form_box"> <p class="p01"> <input type="text" name="name" required/> </p> </div> <div class="form_name"> <p>フリガナ(全角カタカナ)</p> </div> <div class="form_box"> <p class="p01"> <input type="text" name="furigana" pattern="[\u30A1-\u30FF]*" required/> </p> </div> <div class="form_name"> <p>メールアドレス</p> </div> <div class="form_box"> <p class="p01"> <input type="email" name="email" required/> </p> </div> <div class="form_name"> <p>電話番号</p> </div> <div class="form_box"> <p class="p01"> <input type="text" name="tel" size="20" /> </p> </div> <div class="form_name"> <p>郵便番号</p> </div> <div class="form_box"> <p class="p01"> <input type="text" name="postcode" size="10" required/> </div> <div class="form_name"> <p>住所</p> </div> <div class="form_box2"> <p> <input type="text" name="address" required/> </p> </div> <div class="form_name"> <p>注文内容</p> </div> <div class="form_box"> <h2>■商品■</h2> <p class="input_p"> <input type="checkbox" name="hp[]" value="商品A/20,000円"> 商品A/20,000円</p> <p class="input_p"> <input type="checkbox" name="hp[]" value="商品B/40,000円"> 商品B/40,000円</p> <p class="input_p"> <input type="checkbox" name="hp[]" value="商品C/50,000円"> 商品C/50,000円</p> </div> <div class="form_name"> <p>備考</p> </div> <div class="form_box"> <p> <textarea name="text" rows="8" cols="70"></textarea> </p> </div> <div class="form_name"> <p>振込先口座</p> </div> <div class="form_box"> <p class="bank_p"><img src="img/bank.jpg" widtd="590" height="120" alt="振込先口座"></p> </div> <div class="form_name"> <p>送信</p> </div> <div class="form_box"> <p> <button type="submit">送信</button> </p> </div> </form> </section> <!-- order_box --> <!-- footer --> <footer> <p class="footer_p"><small>Copyright (C) talent design. all rights reserved.</small></p> </footer> <!-- footer --> </body> </html>

「top_style.css」

@charset "UTF-8"; /* CSS Document */ * { margin:0 auto; padding:0; } body { width:100%; color:#333; } header { width:100%; margin-top:20px; margin-bottom:20px; } h1 { display:block; width:80px; height:80px; background-image:url("../img/icon.png"); background-repeat:no-repeat; text-align:center; } h1 span { display:none; } h1 a { display:block; width:80px; height:80px; } .header_p1 { font-weight:bold; padding-top:25px; text-align:center; } a:link { color:#333; text-decoration:none } a:visited { color:#333; text-decoration:none } a:hover { color:#333; text-decoration:none } a:active { color:#333; text-decoration:none } a:hover { opacity: 0.5; } ul { list-style:none; line-height:2.5em; } /*メニュー部分*/ #ham-menu { background-color: #fff; /*メニュー背景色*/ box-sizing: border-box; height: 100%; padding: 10px 40px; /*メニュー内部上下左右余白*/ position: fixed; right: -300px; /*メニュー横幅①と合わせる*/ top: 0; transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 300px; /*メニュー横幅①*/ z-index: 1000; } /*メニューアイコン部分は疑似要素で*/ #ham-menu::before { background-color: #fff; /*ボタン部分背景色*/ border-radius: 0 0 0 10px; /*左下角丸*/ color: #333; /*アイコン(フォント)色*/ content: "≡"; /*メニューアイコン*/ display: block; font-size: 50px; /*アイコン(フォント)サイズ*/ height: 50px; line-height: 50px; /*縦位置中央化*/ position: absolute; right: 100%; text-align: center; top: 0; width: 50px; } /*透過背景部分*/ #menu-background { background-color: #333; /*黒背景部分背景色*/ display: block; height: 100%; opacity: 0; position: fixed; right: 0; top: 0; transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 100%; z-index: -1; } /*hover 時の処理*/ #ham-menu:hover { transform: translate(-300px); /*メニュー横幅①と合わせる*/ } #ham-menu:hover + #menu-background { opacity: 0.5; /*黒背景部分透過度*/ z-index: 999; } img { max-width:100%; height:auto; vertical-align:bottom; } footer { border-top: 1px solid #333333; border-bottom: 1px solid #333333; padding-top:10px; padding-bottom:10px; } #min_box { width : 100%; } .new_box { width:55%; float:left; height:100px; } .new_box h2 { background-color:#82c0fb; text-align:center; } .tw_box { width:45%; float:left; } footer { border-top: 1px solid #333333; border-bottom: 1px solid #333333; padding-top:10px; padding-bottom:10px; } footer .footer_p { text-align:center; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; }

「order_style.css」

@charset "UTF-8"; /* CSS Document */ #order_box { width:100%; } #order_box p { line-height:2em; } #order_box .order_title_p { text-align:center; margin-bottom:20px; } #order_box .form_box { font-size:21px; } #order_box .form_box input[type="text"] { width:18em; height:4em; margin:20px 0 20px 0; } #order_box .form_box input[type="email"] { width:32em; height:4em; margin:20px 0 20px 0; } #order_box .form_box textarea { margin-left:10px; width:32em; height:18em; margin:20px 0 20px 0; } #order_box .form_box select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; padding: 0 10px 0 10px; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; font-size: 200%; background:#EEE no-repeat; border:1px solid #CCC; margin:10px 0 10px 0; } #order_box .form_box2 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; padding: 0 10px 0 10px; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; font-size: 200%; background:#EEE no-repeat; border:1px solid #CCC; margin:10px 0 10px 0; } @-moz-document url-prefix() { /* for firefox */ #order_box select { background:none; background-color: #FFF; } } #order_box .form_box input[type="checkbox"]{ -moz-transform: scale(2.5); -webkit-transform: scale(2.5); transform: scale(2.5Fsu); } #order_box button { font-size: 2em; margin:10px 0 10px 0; } #order_box .input_p { margin:20px 0 20px 0; margin-left:20px; width:100%; } #order_box .form_name { background-color:#82c0fb; border-top: 1px dashed #333; font-weight:bold; padding-left:20px; } #order_box .form_box { padding-left:20px; } #order_box .form_box2 { padding-left:20px; width:100%; } #order_box .form_box2 input[type="text"] { width:32em; height:4em; margin:20px 0 20px 0; } #order_box .bank_p { text-align:center; margin:10px 0 10px 0; } h2 { text-align:center; } #order_box .form_name,form_box { border-top: 1px dashed #333; } #order_box .p01 { padding-left:10px; } #order_box .thanks_p { text-align:center; font-weight:bold; padding-bottom:520px; }

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

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

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

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

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

guest

回答1

0

ベストアンサー

order_style.cssのwidth:100%を全て削除し、order.htmlで</div>が一部抜けていました。それを直したら隙間が消えました。

投稿2017/09/17 08:39

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問