電子工作作業報告書管理アプリその36
今回はdata2のHTMLをイメージ図になるようなコードを書く
data2.htmlのイメージ図は
このような感じ
<!--余白や色などはCSSに書く、文章のみをHTMLページに--> <!--data2.htmlはリダイレクト先のテンプレート--> <!--ewrn/templates/user/data2.html--> <!--気づいた事、作業日を入力する画面、状況写真もアップロード出来るさいだい5枚まで--> <!--テキストボックスに入力された文字列を取得するのはjavascriptで行う--> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>データ入力画面2フォーム</title> <link rel="stylesheet" href="data2.css" type="text/css"> <!-- cssを読み込ませる --> </head> <body> <!-- 本文--> <h1 class="title2">データ入力画面2</h1> <form method="POST" class="data-form" enctype="multipart/form-data"> <p>{{ message }}</p> <p class="w_i_n">気づいた事<br> <textarea class="what_i_noiced" rows="5" cols="60" placeholder="R1(チップ抵抗)を半田付けしようとしたら ブリッジしてしまった。 ブリッジする前にカプトンテープで 貼り固定してから半田付けするべきだった・・・・。"></textarea> <!-- 1行では入らないのでtextareaに--> <p class="w_d">作業日<br> <input type="date" class="work_day" placeholder="2021/12/19"> <p class="s_p">状況写真<br> <input type="file" class="situation_photo" accept=".png, .jpeg" multiple> <!-- アップロードするファイルをpngに指定--> <!-- ここにプレビュー画像を追加する--> <div id="preview"></div> <input type="button" value="入力画面3へ" class="input3btn"> <input type="reset" value="リセット" class="reset2"> <input type="button" value="戻る" class="back"> </form> </body> </html>
/* data2のcss */ /* 全体を左マージン80px移動させた 2022-1-23 運用ブラウザ:FireFox_ver96.01(64bit) ボタンの大きさを決め、マウスオーバーでボタン背景を左から右に変化させる */ /* "入力画面3へ"ボタンホバー時をダークバイオレットなど 2022-1-23-AM5:08*/ /* 文字列のマージン*/ .title2{background-color: #f8dce0; margin-left: 80px;} p.w_i_n{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px;} /*気づいた事の文字列*/ p.w_d{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px} /*作業日の文字列*/ p.s_p{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px} /*状況写真の文字列*/ /* textとtextareaのマージン*/ .what_i_noiced{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 40px;} .work_day{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 0px;} .situation_photo{background-color: #f8dce0; margin: 30px; margin-left: 80px;} /* ボタンのデザイン関連 */ .input3btn { /* 入力画面3へボタン */ display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; font-size: 28px; /* 文字を大きめに*/ } .reset2 { /* リセットボタン */ display: inline-block; width: 125px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; font-size: 22px; /* 文字を大きめに*/ } .back { /* 戻るボタン */ display: inline-block; width: 125px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; font-size: 22px; /* 文字を大きめに*/ }
という風に書けた。
出来たのがこちら
あとは、"入力画面3へ"ボタンのホバー時のアニメーションをつけて
全体のレイアウトを調整する
次回は入力画面3へ"ボタンのホバー時のアニメーションを目指す