3月26日
html修正
フォームの修正、画面幅を狭めた時に入力フォームが重なってしまうことを確認していなかった。
先生からのアドバイスではwidthを決めてしまっているからということで、px→100％に変更、それでも直らなかったので、youtubeをみてからbootstrapのサイトを確認したところ、書いてあった。それをコピーして完成。
<div class="col-md-2 mb-5 pb-5 mt-5 pt-5">
<form>
<div class="form-group">
<label for="appt-day">御予約日: </label>
<input id="appt-day" type="date" name="day" min="2021-04-01" max="2022-12-31">
</div>
</form>
</div>
<div class="col-md-2 mb-5 pb-5 mt-5 pt-5">
<form>
<div class="form-group">
<label for="appt-time">御予約時刻: </label>
<input id="appt-time" type="time" name="appt-time">
</div>
</form>
</div>
<div class="col-md-2 mb-5 pb-5 mt-5 pt-5">
<form>
<div class="form-group">
<label for="appt-time">御予約人数: </label>
<input id="appt-persons" type="text" placeholder="人数">
<i class="material-icons-outlined">people</i>
</div>
</form>
</div>
<div class="col-md-2 mb-5 pb-5 mt-5 pt-5">
<form>
<div class="form-group mt-2">
<label for=" appt-time"></label><br>
<button type="submit" class="btn btn-dark">Book a table</button>
</div>
</form>
</div>
と記述したら重なり合うのがなくなり、画面幅を狭めてもフォームはcol内からはみ出さず。
やはり先に確認すべし。
次にフォーム内のアイコンがどうしても動いてしまう問題。
親クラスにrelative,子クラスにabsoluteをつけたが、幅を狭めると動いてしまう。
0か100でごまかしは効かない世界。問題をクリアしていかないといけない。
本の名言
行けそうすれば必ず脳力は自分のものとなるだが何もしない者には脳力も身につかない
