フォームのレイアウト崩れを防ぐ方
添付画像のようなフォームのフィールドセットを作りました。
画面サイズ100%の場合は添付画像左側のように整った状態です。
が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。
フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは
減りますがレイアウトは大きく崩れません。
フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか？ また１から作り直すには時間がたりません。
<div>等ではさんでにクラスやIDをつけCSSでなんとか設定するような方法はありますでしょうか？
以下は（凡そ）の記述です。
初心者ですのでレスポンシブデザインなどもあまり理解できていません。
何かいいやり方をご存知のかたいらっしゃいましたら教えてください。よろしくお願いします。
＜HTML＞
<form action="staff_order.php" id="entry" method="post">
<fieldset id="staff_order">
<label for="user_id"><span class="required">*</span>●●●:</label>
<select name="user_id" autofocus required>
<option value="" selected>
選択してください</option>
<?php
foreach($rows_students as $student){
print '<option value="' . $student["user_id"] . '">' . $student["student_name"] . '</option>\n';
}
?>
</select>
</div>
<div>
<label for="title"><span class="required">*</span>●●●:</label>
<input type="text" name="title" size="80" maxlength="100" required d="title" style="border-radius:0.5em;">
</div>
<div><label for="date"><span class="required">*●●●: </span＞ </label>
<input type="date" name="date" required id="date">
</div>
->
<div><label for="point"><span class="required">*</span>●●●:</label>
<input type="number" name="point" min="0" max="1000" required id="point"><b style="color: #411C00;"> P</b></div>
<label for="remarks" class="order_remarks">●●:</label>
<textarea name="remarks" rows="3" cols="60" maxlength="500" id="remarks"></textarea></div><p class="notes">(*)は必須項目です </p>
<div class="so_button"><button type="submit" name="confirm" value="登録">登録</button>
</div>
</fieldset>
</form>
＜CSS＞
input:focus,
textarea:focus {
background-color: #ffffcc;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
padding-left: 5px;
outline: none;
}
input[type=number],
input[type=date] {
text-align: right;
padding-right: 8px;
}
input,
select,
textarea {
border: solid 1px #CCC;
border-radius: 3px;
box-shadow: 0px 0px 5px #CCC inset;
}
/*↓form enry↓*/
form#entry fieldset#staff_order {
border: 1px solid #666666;
box-shadow: 0px 0px 2px;
background-color: #bed487;
border-radius: 0.5em;
width: 90%;
min-width: 90%;
padding-top: 25px;
margin-bottom: 25px;
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
早速応答を下さったにもかかわらず個別質問項目が多いので 質問しなおしに時間が取れず、無視状態になっていることをお詫びします。 締め切りを促すメールが来ましたので、私からの応答無しでいったん締め切ります。 新しく時間を見つけてご指摘に従って質問を投稿し直します。 ご親切には大変感謝しております。