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

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

ただいまの
回答率

90.76%

  • HTML

    8336questions

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

  • CSS

    5353questions

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

  • HTML5

    3734questions

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

  • CSS3

    1920questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 215
退会済みユーザー

退会済みユーザー

以下のコードでスマホサイト用に注文フォームを作ると右端に隙間ができます。スマホ(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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8336questions

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

  • CSS

    5353questions

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

  • HTML5

    3734questions

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

  • CSS3

    1920questions

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