みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

フォームのレイアウト崩れを防ぐ方

添付画像のようなフォームのフィールドセットを作りました。

画面サイズ100%の場合は添付画像左側のように整った状態です。

が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。

フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは
減りますがレイアウトは大きく崩れません。

フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか? また1から作り直すには時間がたりません。
<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;
}

投稿日時 - 2019-07-18 13:12:43

QNo.9636617

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

こんばんは。

CSSに次のような指定を入れれば、お望みに近い形になると思います。

label {
display:inline-block;
width:80px;
}
input,select,textarea {
display:inline-block;
}
input[type=text] {
width:calc(100% - 100px);
max-width:50em;
}
textarea {
width:calc(100% - 100px);
max-width:40em;
}

※max-widthは適切なサイズを指定してください。
※calcの幅(100pxの部分)も同様

投稿日時 - 2019-07-19 22:52:05

あなたにオススメの質問