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

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

ただいまの
回答率

89.98%

【HTML/CSS】レスポンシブデザインでのtableの段組み変更について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 548

momiji0210

score 13

別ページでも質問した内容なのですが、解決済みにしてしまったため再度質問させてくださいませ。

【HTML/CSS】レスポンシブデザインでのtableの段組み変更について

前回、回答いただいた内容で小さい画面の場合、tableの段組みが解除できるようになりました。
このth,td要素にinputなどフォーム部品を入れると、スマホで見た際にサイズが正しく表示されませんでした。

PCでブラウザを小さくすると、input部品はwidth:90%など指定した値になります。
スマホで見た際、幅が50%程度のサイズにしかなりませんでした。
※裏に色を塗ってみたのですが100%のサイズになっていないようです。

width:300pxなど記載すると横幅が正常に伸びるのですが、width:200%など書いても、MAX50%前後のサイズになっているようです。

こちら不具合の原因がどこにありそうかお分かりになりませんでしょうか。

~略~

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

~略~

<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
    <table>
    <tr><th><p class="text-red-inline"></p>お名前</th><td><input type="text" name="お名前" required="required" placeholder="お名前を入力してください"></td></tr>
    <tr><th><p class="text-red-inline"></p>E-mail</th><td><input type="email" name="email" required="required" placeholder="メールアドレスを入力してください"></td></tr>
    <tr><th><p class="text-red-inline"></p>E-mail(確認)</th><td><input type="email" name="confirm_email" required="required" placeholder="上記と同じメールアドレスを入力してください"></td></tr>
    <tr><th><p class="text-red-inline"></p>件名</th><td><select name="件名" required="required">
                  <option value="">-- 選択してください --</option>
                  <option value="test1">test1</option>
                  <option value="test2">test2</option>
                  <option value="test3">test3</option>
                  <option value="その他">その他</option></select></td></tr>

    <tr><th>お問い合わせ内容</th><td><textarea name="お問い合わせ内容" placeholder="お問い合わせ内容を入力してください"></textarea></td></tr>
    <tr><th colspan="2"><div class="text-center"><button type="submit">送信する</button></th></tr>
    </table>

</form>
@charset "UTF-8";

/* content */

.content{
        /*margin-top: -550px;
    padding-top: 550px;*/
    margin: auto;
    text-align: center;
    max-width: 960px;

    /*background:cyan;*/
    /*border: 1px solid black;
    box-sizing:border-box;*/
}

/* cotact */

.contact{
    text-align: center;
    max-width: 100%;
    margin-bottom: 30px;    
    margin-bottom: var(--padding-block-height);    
}

.contact table {
    width: 960px;
    margin-left: auto;
    margin-right: auto;    
    margin-bottom: 30px;    
    margin-bottom: var(--padding-block-height);    
    font-size: 14px;
    font-size: var(--font-size-2);
}

.contact tr{
    /*height: 40px;*/
    border-bottom: 1px solid #dedede;
}

.contact th{
    box-sizing:border-box;
    width: 30%;
    padding: 15px 20px;
    font-weight: normal;
    background: #f2f2f2;
    vertical-align: middle;
    /*border-bottom: 1px solid #777777;*/
}

.contact td{
    box-sizing:border-box;
    width: auto;
    color: #777777;
    vertical-align: middle;
    padding: 15px 20px;
}

@media only screen and (max-width:960px){

    .contact p {
        padding-left: 5px;
        padding-right: 5px;
    }

    .contact table {
        width: 100%;
    }

    .contact tr{    
        display: block;
        border-bottom: none;
    }

    .contact th,
    .contact td {
        display: block;
        text-align: left;
        width: auto;
    }

    .contact th {
        font-weight: bold;
    }

    /* 検証用:塗り
    .contact th{
        background-color: #000;
    }
    .contact td{
        background-color: #f00;
    }
    */

}

/* form用 */

.contact input{
    width: 90%;
    height: 33px;
}

.contact select{
    width: 90%;
    height: 33px;
    padding-left: 8px;    
}

.contact textarea {
    width: 90%;
    resize: none;
    /*resize: vertical;*/
    min-width: 200px;
    min-height: 200px;
    max-height: 500px;
}

.contact button {
    padding: 15px 40px;
    font-size: 1.2em;
    background-color: #000;
    color: #fff;
    border-style: none;
}

@media only screen and (max-width:960px){
    .contact input{
        /*width: 300px !important;*/
    }
    .contact input,
    .contact select,
    .contact textarea{
        font-size: 16px;
        transform: scale(0.9);
    }

    .contact :placeholder-shown{
        font-size: 12px;
        font-size: var(--font-size-2);        
    }
}

------- 追記 -------

formについてはメールフォームプロというフリーのCGIを使用しております。
CSS / mailformpro.css

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • dit.

    2018/08/02 15:14

    お問い合わせ内容の前後に<tr>が無かったり、送信するボタンが<table>の外に出ているのが気になるのですが、実際のコードもこのようになっていますか?

    キャンセル

  • momiji0210

    2018/08/02 20:35

    こちらありがとうございます!実際のコードもこのようになっておりました。確かにコードがおかしいですね。修正させていただきます。

    キャンセル

回答 2

checkベストアンサー

0

こちらのローカルで試したところ(PC・スマホで確認)、幅はきちんと90%になっていて特に問題ありませんでした。なのでここが原因とはっきり分からないのですが、怪しいところを2点記載させていただきます。

  • cssの「transform: scale(0.9);」という部分にベンダープレフィックスがないのが気になったので、ここをコメントアウトしてみてもらっても変わらないでしょうか。
  • htmlの「form id="mailformpro"」という部分が何か影響を与えているかもしれませんので、「form id=""」としてみてください。

↓こちらのスマホでキャプチャした画像です
イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/08/03 11:50

    何度もご回答ありがとうございます。周りに聞けるエンジニアさんがいないので本当に助かります。
    iPhoneでOS最新と旧OSで検証しているのですが、ダメなようでした。

    ソースが長すぎて投稿できないため、テスト用サーバにサンプルソースを上げさせていただきました。
    http://amuse-test.sakura.ne.jp/ae/exit/

    キャンセル

  • 2018/08/03 12:22 編集

    サイト確認させていただきました。最新のiPhoneでもダメとのことなのですが、こちらのAndroidバージョン8で見た所、やはり問題なさそうでした。上にキャプチャを貼りますね。

    momiji0210様がおっしゃっている、「inputの幅が50%」というのは、フォーム部品両端の隙間(キャプチャの赤い印の部分)のことでしょうか?もしそうでしたら、これはpaddingによるものなので、cssを修正すれば直ると思います。

    キャンセル

  • 2018/08/06 11:25

    回答が遅くなってしまい申し訳ございません。
    こちらキャプチャありがとうございます。

    Androidでは正常に表示されるのですね。両端ではなく、入力部分が50%前後になっております。
    画像のように表示できればよいので、問題なさそうですね。

    iOSだけ変な表示になるのが気になりますが、このままでひとまずは大丈夫そうです。
    何度もありがとうございました。

    キャンセル

0

Mailformpro ということで、config.cgiのアドオンに「入力欄の自動調整機能を無効化」するかどうかのON/OFFがあります。
最新版(4.2.4)編集を全くしていない状態であれば179行目。
こちらの#を外して有効化し、「自動調整を無効化」が効いた状態にしてみてください。


確認してみました。
同じAndroidでもブラウザ(Chromeと標準ブラウザで確認)によって差がありました。
アイフォンは実機が無いので確認できませんでしたが。
イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/08/03 11:48

    何度もご回答ありがとうございます。
    該当箇所見つけられました。こちら無効化が聞いた状態にしてみたのですが、表示が変わらなそうでした。
    dit.さんのご指摘の通り、こちらのcgiが悪さをしているかもです・・・。

    ソースが長すぎて投稿できないため、テスト用サーバにサンプルソースを上げさせていただきました。
    http://amuse-test.sakura.ne.jp/ae/exit/

    キャンセル

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

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

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