Djangoで入力フォームの中央寄せができない

Djangoで入力フォームの作成に当たり、独自でモデルを定義し、テンプレートからブラウザに表示させましたが、PCブラウザだと少し左寄せになってしまいます。(※質問欄の下に画像貼り付けました。)

対応内容

まず、Djangoでのフォーム画面のカスタマイズを行うにあたり、django-widget-tweaksのインストールと当該テンプレートへloadしました。

<div>タグでalign="center"の指定と<center>タグも利用しましたが、ラベル(項目名)まで中央寄せされてしまいます。 <table>タグを利用しましたが、細かな調整が必要になり、レスポンシブ対応まで考えると、得策ではないと、諦めました。 <div class="form-container">および<div class="container">で<form>タグを囲みましたが、変化がありません。

当該テンプレート

{% extends 'common/base.html' %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>入力フォーム</title>
</head>
{% block content %}
{% load widget_tweaks %}
<div class="form-container">
    <h2 style="text-align:center; color:#FFFFFF;">アカウント登録</h2>
    <form method="POST" novalidate>
        {% csrf_token %}
        <div class='form-group'>
            <label class="col-sm-4 control-label">社員コード</label>
            <div class='col-sm-8'>{{form.empcd|add_class:"form-control"}}</div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">パスワード</label>
            <div class='col-sm-8'>{{form.password|add_class:"form-control"}}</div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">確認用パスワード</label>
            <div class='col-sm-8'>{{form.password|add_class:"form-control"}}</div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">ユーザー名</label>
            <div class='col-sm-8'>{{form.username|add_class:"form-control"}}</div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">所属部署</label>
            <div class='col-sm-8'>{{form.branch|add_class:"form-control"}}</div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">就業形態</label>
            <div class='col-sm-8'>{{form.worktype|add_class:"form-control"}}
            </div>
        </div>

        <div class='form-group' style="">
            <label class="col-sm-4 control-label">管理者</label>
            <div class='col-sm-8'>
                {{form.adminflg}}
            </div>
        </div>
        <div class='col-sm-8'>
            <button type="submit" class="btn btn-primary" style="background:#62BBE3">送信</button>
        </div>
        <p>{{ message }}</p>
    </form>
</div>
{% endblock %}
</html>

base.html

{% load static %}
<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!--スマホ対応-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--JavaScript js-->
    <script type="text/javascript" src="{% static '/common/js/jquery-3.5.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/common/js/sideMenu.js' %}"></script>
    <script type="text/javascript" src="{% static '/common/js/768px.js' %}"></script>
    <script type="text/javascript" src="{% static '/common/js/trLink.js' %}"></script>
    <!-- Bootstrap CSS -->
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
    <link rel="stylesheet" href="{% static 'common/css/bootstrap.min.css' %}"></link>
    <link rel="stylesheet" href="{% static 'common/css/base.css' %}"></link>
    <link rel="stylesheet" href="{% static 'common/css/base_768px.css' %}"></link>
    <link rel="stylesheet" href="{% static 'common/css/side_menu.css' %}"></link>
    <link rel="stylesheet" href="{% static 'common/icomoon/style.css' %}"></link>
    <title>Test System</title>
    <header id="header">
        <table class="header_table">
            <tr class="header_row1">
                <td colspan="2">
                    <div class="header_row1_user icon-key" title="管理者" style="font-size: 1.2em"><span class="icon-user"
                                                                                                      style="font-size: 1.2em"></span><span
                            style="font-size: 0.9em">{{ user.username }}山田太郎</span>
                    </div>
                </td>
                <td style="width:110px;">
                    <a href="#" class="header_row1_logout icon-exit" style="font-size: 1.3em" title="ログアウト"><span
                            style="font-size: 0.7em">ログアウト</span></a>
                </td>
            </tr>

            <tr class="header_row2">
                <td style="width:70px;">
                    <a href="#" title="サイドメニュー">
                        <!-- ハンバーガーメニュー部分 -->
                        <div class="Toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span>menu</span>
                            <span>close</span>
                        </div>
                    </a>
                </td>

                <td colspan="2">
                    <h1 class="header_row2_title">
                        <a href="#" title="メインメニュー">Test System</a>
                    </h1>
                </td>
            </tr>
        </table>

        <!--ヘッダとコンテンツの隙間を定義するためのダミーテーブル-->
        <table style="height:130px;">
        </table>

        <nav class="NavMenu">
            <div id="list">
                <ul id="DropMenu">

                    <li>
                        <a style="{% block active_nipocreate %}{% endblock %}">作業日報作成</a>
                    </li>
                    <li>
                        <a style="{% block active_workinglist %}{% endblock %}" href="{% url 'working_list:workinglistindex' %}">作業日報一覧</a>
                    </li>
                    <li>
                        <a style="{% block active_serialnomaster %}{% endblock %}" href="{% url 'setting_serialnomaster:serialnomasterindex' %}">製番設定</a>
                    </li>
                    <li>
                        <a style="{% block active_worktypemaster %}{% endblock %}" href="{% url 'setting_worktypemaster:worktypemasterindex' %}">業務種別設定</a>
                    </li>
                    <li>
                        <a style="{% block active_accountlist %}{% endblock %}" href="{% url 'user:list' %}">アカウント設定</a>
                    </li>

                </ul>
            </div>
        </nav>
        <!--追加終了_20201104-->
    </header>
</head>
<!--<body style="backgroud-color:#adff2f">-->
<body>
<div class="container">
    {% block content %}{% endblock %}
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>
</html>

現状ではcontainerクラスによってフォーム部品が中央寄せになることを期待していますが、上述の通り変化がありません。
どなたかわかる方お教えください。よろしくお願いいたします。

追記(202012031117)：現状までの対応状況
CSSでmarginを使いフォーム部品が中央になるようにしましたが、

ブラウザを小さくしていくと、項目名が中央の方に寄ってしまい、レイアウトが崩れてしまいます。

追記(202012031657)：(最初の)回答に従い修正後の画面

追記(202012031952)：回答の通り対応したら解決しました(前回の追記(202012031657)は誤りです)。

ブラウザを小さくしてもレイアウトが崩れません。

Lhankor_Mhy

2020/12/03 01:35

生成されたHTMLとCSSのご提示をお願いします。

kwmr8416

2020/12/03 02:23 編集

お世話になります。現在までに少し修正しましたので、画像(質問欄に追記)と合わせてソースの方を提示します。修正した部分はCSSでmarginを使用し、フォーム部品の配置を中央になるようにしました。なおレスポンシブ対応はまったくしておらず、ブラウザを小さくすると項目名(ヘッダー?)が中央に寄せられレイアウトが崩れてしまいます。よって現状の対応方法は一時的なものであり、恒久策ではありませんので、自己解決とは記載していません。 ■生成されたHTML <!doctype html> <html lang="ja"> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script type="text/javascript" src="/static/common/js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="/static/common/js/sideMenu.js"></script> <script type="text/javascript" src="/static/common/js/768px.js"></script> <script type="text/javascript" src="/static/common/js/trLink.js"></script> <script type="text/javascript" src="/static/common/js/account_edit.js"></script>   <link rel="stylesheet" href="/static/common/css/bootstrap.min.css"></link> <link rel="stylesheet" href="/static/common/css/base.css"></link> <link rel="stylesheet" href="/static/common/css/base_768px.css"></link> <link rel="stylesheet" href="/static/common/css/side_menu.css"></link> <link rel="stylesheet" href="/static/common/icomoon/style.css"></link> <title>Test System</title> <header id="header"> <table class="header_table"> <tr class="header_row1"> <td colspan="2"> <div class="header_row1_user icon-key" title="管理者" style="font-size: 1.2em"><span class="icon-user" style="font-size: 1.2em"></span><span style="font-size: 1.0em">a山田太郎</span> </div> </td> <td style="width:130px;"> <a href="#" class="header_row1_logout icon-exit" style="font-size: 1.2em" title="ログアウト"><span style="font-size: 0.9em">ログアウト</span></a> </td> </tr> <tr class="header_row2"> <td style="width:70px;"> <a href="#" title="サイドメニュー">  <div class="Toggle"> <span></span> <span></span> <span></span> <span>menu</span> <span>close</span> </div> </a> </td> <td colspan="2"> <h1 class="header_row2_title"> <a href="#" title="メインメニュー">Test System</a> </h1> </td> </tr> </table>  <table style="height:130px;"> </table> <nav class="NavMenu"> <div id="list"> <ul id="DropMenu"> <li> <a style="">作業日報作成</a> </li> <li> <a style="" href="/working_list/">作業日報一覧</a> </li> <li> <a style="" href="/setting_serialnomaster/">製番設定</a> </li> <li> <a style="" href="/setting_worktypemaster/">業務種別設定</a> </li> <li> <a style="" href="/new/list/">アカウント設定</a> </li> </ul> </div> </nav>  </header> </head>  <body> <div class="container"> <div class="form-container form_layout"> <h2 style="text-align:center; color:#FFFFFF;">アカウント登録</h2> <form method="POST" novalidate>  <table style="height: 20px;"></table> <p align="center" style="background-color:#ffb6c1; color:#db7093; opacity:0.8; width:470px; margin: auto;"></p> <input type="hidden" name="csrfmiddlewaretoken" value="3gs1nQyG88TuIlRoiFhZrWypLlHamC274enEJpFpe0N0XfMADTHuyb211Wd2517D"> <div class='form-group'> <label class="col-sm-4 control-label">社員コード</label> <div class='col-sm-8'><input type="text" name="empcd" maxlength="20" class="form-control" required id="id_empcd"></div> </div> <div class='form-group' style=""> <label class="col-sm-4 control-label">パスワード</label> <div class='col-sm-8'><input type="password" name="password" maxlength="20" class="form-control" id="id_password"></div> </div> <div class='form-group' style=""> <label class="col-sm-4 control-label" >確認用パスワード</label> <div class='col-sm-8'><input type="password" name="psw_confirm" maxlength="20" class="form-control" id="id_psw_confirm"></div> </div> <div class='form-group' style=""> <label class="col-sm-4 control-label" >ユーザー名</label> <div class='col-sm-8'><input type="text" name="username" maxlength="20" class="form-control" required id="id_username"></div> </div> <div class='form-group' style=""> <label class="col-sm-4 control-label" >所属部署</label> <div class='col-sm-8'><select name="branch" class="form-control" id="id_branch"> <option value="" selected></option> <option value="本社">本社</option> <option value="犬山">犬山</option> <option value="岡崎">岡崎</option> <option value="浜松">浜松</option> </select></div> </div> <div class='form-group' style=""> <label class="col-sm-4 control-label" >就業形態</label> <div class='col-sm-8'><select name="worktype" class="form-control" id="id_worktype"> <option value="" selected></option> <option value="社員">社員</option> <option value="パート">パート</option> <option value="アルバイト">アルバイト</option> </select> </div> </div> <div class='form-group' style="" > <label class="col-sm-4 control-label" >管理者</label> <div class='col-sm-4' style="margin: auto;"> <input type="checkbox" name="adminflg" id="id_adminflg"> </div> </div> <div class='col-sm-8'> <button type="submit" class="btn btn-primary btn-block" >送信</button> </div> </form> </div> </div>   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> ■当該CSS(※他のテンプレートで共通で使用している定義も若干含みます。当該画面は主として下方の/*アカウント画面関連_ここから*/の部分を使用しています。) /*スマートフォン回転時の文字サイズ自動調節機能OFF*/ html { -webkit-text-size-adjust: 100%; } .header_table { width:100%; position: fixed; top:0; left: 0; right: 0; z-index: 9999; } .header_row1 { height:37px; background-color: #60b07e; } .header_row1_logout { margin-top : 5px; text-align:center; display:block; width:100%; height:100% } .header_row1_user { text-align:right; color:#FFFFFF; padding: 0px 10px; } #header a { color:#FFFFFF; } #linkmenu a { color:#FFFFFF; } .header_row2 { height: 70px; background-color: #51CA96; } .header_row2_title { white-space: nowrap; font-size: 38px; margin-left:15px; } body { background-color: #A4E1C7; } # 画面ごとのタイトル .screen_tittle { text-align:center; color:#FFFFFF; } th { color: #FFFFFF; font-weight:500; } /*業務種別一覧*/ .worktype_table_width { width: 500px; } /*製番一覧*/ .serialno_table_width { width: 800px; } .table_row { background-color:#EEEEEE; #background-color:white; } /*一覧表の行間の隙間を定義するためのダミーテーブル*/ .dummy_row { height: 3px; } .white_font { color: #FFFFFF; } .footer { margin-top:50px; } .csv_button { border:none; width:140px; display: block; } .csv_button:hover { background-color: #F8F8FF; } .smallfont { font-size: 100%; } .trLink:hover { background-color: #F8F8FF; cursor: pointer; } /*アカウント画面関連_ここから*/ .accounttable{ width: 700px; margin-left:auto; margin-right:auto } .form_layout label { color:white; margin: 0 28%; display: flex; justify-content: left; } .form_layout .col-sm-8{ width:500px; margin: auto; display: flex; justify-content: center; } .form_layout .pswchangebtn{ margin: 0 29%; } .form_layout .btn{ border-color: #62BBE3; background:#62BBE3; } .form_layout .btn:hover{ background: #2ba3d9; } .form_layout .btn.delbtn { border-color: #EEEEEE; background-color: #EEEEEE; } .form_layout .btn.delbtn:hover { background-color: #F8F8FF; } /*アカウント画面関連_ここまで*/

Lhankor_Mhy

2020/12/03 03:32

これは、かなりカオスですね…… Bootstrap を使うなら、Bootstrap の作法で書いた方がいいですよ。

Lhankor_Mhy

2020/12/03 03:34

ちなみに、今回の問題のブレイクポイントはどこですか？

Lhankor_Mhy

2020/12/03 03:53

あー、xlですかね？　1200px。

kwmr8416

2020/12/03 04:10

ブレイクポイントは768pxです。ほかの画面で表示している一覧表はメディアクエリ768px以下で設定しています。今回の画面はまだレシポンシブは未実施です。このままでは先が思いやられるので、おっしゃる通りBootstrapの作法での対応を模索しています。

Lhankor_Mhy

2020/12/03 04:42

では、lg で問題が解消すればいいのですね？　理解しました。

kwmr8416

2020/12/03 06:33

回答ありがとうございます。もう少し検証するのに時間が欲しいので、少しお待ちください。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえずな感じですが。

html
1            <form method="POST" novalidate class="row justify-content-center">
2                <!--dummyテーブル-->
3                <table style="height: 20px;"></table>
4                <p align="center"
5                    style="background-color:#ffb6c1; color:#db7093; opacity:0.8; width:470px; margin: auto;"></p>
6                <input type="hidden" name="csrfmiddlewaretoken"
7                    value="3gs1nQyG88TuIlRoiFhZrWypLlHamC274enEJpFpe0N0XfMADTHuyb211Wd2517D">
8                <div class='form-group col-sm-8'>
9                    <label class="control-label">社員コード</label>
10                    <div class=''><input type="text" name="empcd" maxlength="20" class="form-control" required
11                            id="id_empcd"></div>
12                </div>
13
14                <div class='form-group col-sm-8' style="">
15                    <label class="control-label">パスワード</label>
16                    <div class=''><input type="password" name="password" maxlength="20" class="form-control"
17                            id="id_password"></div>
18                </div>
19
20                <div class='form-group col-sm-8' style="">
21                    <label class="control-label">確認用パスワード</label>
22                    <div class=''><input type="password" name="psw_confirm" maxlength="20" class="form-control"
23                            id="id_psw_confirm"></div>
24                </div>
25
26                <div class='form-group col-sm-8' style="">
27                    <label class="control-label">ユーザー名</label>
28                    <div class=''><input type="text" name="username" maxlength="20" class="form-control"
29                            required id="id_username"></div>
30                </div>
31
32                <div class='form-group col-sm-8' style="">
33                    <label class="control-label">所属部署</label>
34                    <div class=''><select name="branch" class="form-control" id="id_branch">
35                            <option value="" selected></option>
36
37                            <option value="本社">本社</option>
38
39                            <option value="犬山">犬山</option>
40
41                            <option value="岡崎">岡崎</option>
42
43                            <option value="浜松">浜松</option>
44
45                        </select></div>
46                </div>
47
48                <div class='form-group col-sm-8' style="">
49                    <label class="control-label">就業形態</label>
50                    <div class=''><select name="worktype" class="form-control" id="id_worktype">
51                            <option value="" selected></option>
52
53                            <option value="社員">社員</option>
54
55                            <option value="パート">パート</option>
56
57                            <option value="アルバイト">アルバイト</option>
58
59                        </select>
60                    </div>
61                </div>
62
63                <div class='form-group col-sm-8' style="">
64                    <label class="control-label">管理者</label>
65                    <div class='col-sm-4' style="margin: auto;">
66                        <input type="checkbox" name="adminflg" id="id_adminflg">
67                    </div>
68                </div>

css
1.form_layout label {
2color:white;
3/*margin: 0 28%;
4display: flex;
5justify-content: left;
6*/}
7.form_layout .col-sm-8{
8/*width:500px;
9margin: auto;
10display: flex;
11justify-content: center;
12*/}

投稿2020/12/03 04:49

Lhankor_Mhy

総合スコア36163

kwmr8416

2020/12/03 07:56 編集

試みましたが、駄目でした。下記に修正後ソースと質問欄に画像を追記します。なお現状入力チェックなどの機能実装を行っているため若干ソースが修正前と差異があります(パスワードのmaxlengthが20から100に変わっているなど)。 ■HTML <!doctype html> <html lang="ja"> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <script type="text/javascript" src="/static/common/js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="/static/common/js/sideMenu.js"></script> <script type="text/javascript" src="/static/common/js/768px.js"></script> <script type="text/javascript" src="/static/common/js/trLink.js"></script> <script type="text/javascript" src="/static/common/js/account_edit.js"></script>   <link rel="stylesheet" href="/static/common/css/bootstrap.min.css"></link> <link rel="stylesheet" href="/static/common/css/base.css"></link> <link rel="stylesheet" href="/static/common/css/base_768px.css"></link> <link rel="stylesheet" href="/static/common/css/side_menu.css"></link> <link rel="stylesheet" href="/static/common/icomoon/style.css"></link> <title>Test System</title> <header id="header"> <table class="header_table"> <tr class="header_row1"> <td colspan="2"> <div class="header_row1_user icon-key" title="管理者" style="font-size: 1.2em"><span class="icon-user" style="font-size: 1.2em"></span><span style="font-size: 1.0em">a山田太郎</span> </div> </td> <td style="width:130px;"> <a href="#" class="header_row1_logout icon-exit" style="font-size: 1.2em" title="ログアウト"><span style="font-size: 0.9em">ログアウト</span></a> </td> </tr> <tr class="header_row2"> <td style="width:70px;"> <a href="#" title="サイドメニュー">  <div class="Toggle"> <span></span> <span></span> <span></span> <span>menu</span> <span>close</span> </div> </a> </td> <td colspan="2"> <h1 class="header_row2_title"> <a href="#" title="メインメニュー">Test System</a> </h1> </td> </tr> </table>  <table style="height:130px;"> </table> <nav class="NavMenu"> <div id="list"> <ul id="DropMenu"> <li> <a style="">作業日報作成</a> </li> <li> <a style="" href="/working_list/">作業日報一覧</a> </li> <li> <a style="" href="/setting_serialnomaster/">製番設定</a> </li> <li> <a style="" href="/setting_worktypemaster/">業務種別設定</a> </li> <li> <a style="" href="/new/list/">アカウント設定</a> </li> </ul> </div> </nav>  </header> </head>  <body> <div class="container"> <div class="form-container form_layout"> <h2 style="text-align:center; color:#FFFFFF;">アカウント登録</h2>  <form method="POST" novalidate>  <table style="height: 20px;"></table> <p align="center" style="background-color:#ffb6c1; color: #D8044B; opacity:0.8; width:470px; margin: auto;"></p> <input type="hidden" name="csrfmiddlewaretoken" value="7pA3C72vfKH3txT1LLxN1ZA7tFN7h8Qb8nvGYG9elCBzIrOd6ZXi8e4JJgjZ0xVH"> <div class='form-group col-sm-8'> <label class="control-label">社員コード</label> <div class=''><input type="text" name="empcd" maxlength="20" class="form-control" required id="id_empcd"></div> </div> <div class='form-group col-sm-8' style=""> <label class="control-label">パスワード</label> <div class='col-sm-8'><input type="password" name="password" maxlength="100" class="form-control" id="id_password"></div> </div> <div class='form-group col-sm-8' style=""> <label class="control-label" >確認用パスワード</label> <div class=''><input type="password" name="psw_confirm" maxlength="20" class="form-control" id="id_psw_confirm"></div> </div> <div class='form-group col-sm-8' style=""> <label class="control-label" >ユーザー名</label> <div class=''><input type="text" name="username" maxlength="20" class="form-control" required id="id_username"></div> </div> <div class='form-group col-sm-8' style=""> <label class="control-label" >所属部署</label> <div class=''><select name="branch" class="form-control" id="id_branch"> <option value="" selected></option> <option value="本社">本社</option> <option value="犬山">犬山</option> <option value="岡崎">岡崎</option> <option value="浜松">浜松</option> </select></div> </div> <div class='form-group col-sm-8' style=""> <label class="control-label" >就業形態</label> <div class=''><select name="worktype" class="form-control" id="id_worktype"> <option value="" selected></option> <option value="社員">社員</option> <option value="パート">パート</option> <option value="アルバイト">アルバイト</option> </select> </div> </div> <div class='form-group col-sm-8' style="" > <label class="control-label" >管理者</label> <div class='col-sm-4' style="margin: auto;"> <input type="checkbox" name="adminflg" id="id_adminflg"> </div> </div> <div class='col-sm-8'> <button type="submit" class="btn btn-primary btn-block" >登録</button> </div> </form> </div> </div>   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> ■css /*スマートフォン回転時の文字サイズ自動調節機能OFF*/ html { -webkit-text-size-adjust: 100%; } .header_table { width:100%; position: fixed; top:0; left: 0; right: 0; z-index: 9999; } .header_row1 { height:37px; background-color: #60b07e; } .header_row1_logout { margin-top : 5px; text-align:center; display:block; width:100%; height:100% } .header_row1_user { text-align:right; color:#FFFFFF; padding: 0px 10px; } #header a { color:#FFFFFF; } #linkmenu a { color:#FFFFFF; } .header_row2 { height: 70px; background-color: #51CA96; } .header_row2_title { white-space: nowrap; font-size: 38px; margin-left:15px; } body { background-color: #A4E1C7; } # 画面ごとのタイトル .screen_tittle { text-align:center; color:#FFFFFF; } th { color: #FFFFFF; font-weight:500; } /*業務種別一覧*/ .worktype_table_width { width: 500px; } /*製番一覧*/ .serialno_table_width { width: 800px; } .table_row { background-color:#EEEEEE; #background-color:white; } /*一覧表の行間の隙間を定義するためのダミーテーブル*/ .dummy_row { height: 3px; } .white_font { color: #FFFFFF; } .footer { margin-top:50px; } .csv_button { border:none; width:140px; display: block; } .csv_button:hover { background-color: #F8F8FF; } .smallfont { font-size: 100%; } .trLink:hover { background-color: #F8F8FF; cursor: pointer; } /*アカウント画面関連_ここから*/ .accounttable{ width: 700px; margin-left:auto; margin-right:auto } .form_layout label { color:white; /*margin: 0 28%; display: flex; justify-content: left;*/ } .form_layout .col-sm-8{ /*width:500px; margin: auto; display: flex; justify-content: center;*/ } .form_layout .pswchangebtn{ margin: 0 29%; } .form_layout .btn{ border-color: #62BBE3; background:#62BBE3; } .form_layout .btn:hover{ background: #2ba3d9; } .form_layout .btn.delbtn { border-color: #EEEEEE; background-color: #EEEEEE; } .form_layout .btn.delbtn:hover { background-color: #F8F8FF; } /*アカウント画面関連_ここまで*/

Lhankor_Mhy

2020/12/03 07:57

私の回答とご提示のコードが違いますので、「ダメでした」と言われましても「そうですか」と申し上げるよりないですね……

kwmr8416

2020/12/03 10:48

遅れてすいません。解決しました。あせってデバッグをして間違った結果をあげてしまい、申し訳ございません。ところどころ要素のクラス指定が修正しきれていない状態だったものがありました。イメージ通りです。ブラウザを小さくしたときのレイアウトの崩れもなく、レスポンシブ対応もOKでした。ありがとうございました。

行動規範の内容に同意します