電子工作作業報告書管理アプリその38
今回はdata3.htmlをイメージ図になるようにコードを書く
<!--余白や色などはCSSに書く、文章のみをHTMLページに--> <!--data3.htmlはリダイレクト先のテンプレート--> <!--ewrn/templates/user/data3.html--> <!--電子工作作業で使用した工具、ソフトウェア、部品を入力するフォーム--> <!--テキストボックスに入力された文字列を取得するのはjavascriptで行う--> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>データ入力画面3フォーム</title> <link rel="stylesheet" href="data3.css" type="text/css"> <!-- cssを読み込ませる --> </head> <body> <!-- 本文--> <h1 class="title3">データ入力画面3</h1> <form method="POST" class="data-form" enctype="multipart/form-data"> <p>{{ message }}</p> <p class="u_o_t">使用した工具<br> <textarea class="use_of_tools" id="" rows="5" cols="60" placeholder="テスター1台:型番名:MAS-838 半田小手:PX-201(70W) 竹ピンセット1本 ヒートクリップ他"></textarea> <p class="u_s">使用したソフトウェア<br> <textarea class="used_software" id="" rows="3" cols="60" placeholder="半田付け作業の為ソフト使用無し"></textarea> <p class="u_p">使用した部品<br> <textarea class="used_parts" id="" rows="5" cols="60" placeholder="チップ抵抗:計14個 N-chFET:2個 ダイオード:4個(出来れば型番名も明記する)"></textarea> <div class="content"> <div class="inner"> <input type="button" value="内容確認" class="content_check"> <input type="reset" value="リセット" class="reset3"> <input type="button" value="戻る" class="back"> </div> </div> </form> </body> </html>
data3のCSSコードはこんな感じ
/* data3のcss */ /* 全体を左マージン80px移動させた 2022-1-27 運用ブラウザ:FireFox_ver96.01(64bit) ボタンの大きさを決め、マウスオーバーでボタン背景を左から右に変化させる */ /* "内容確認へ"ボタンホバー時をダークバイオレットなど 2022-1-27-AM0?:28*/ /* 文字列のマージン*/ .title3{background-color: #f8dce0; margin-left: 80px;} p.u_o_t{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px;} /*使用した工具の文字列*/ p.u_s{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px} /*使用したソフトウェアの文字列*/ p.u_p{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px} /*使用した部品の文字列*/ /* textとtextareaのマージン*/ .use_of_tools{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 40px;} .used_software{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 0px;} .used_parts{background-color: #f8dce0; margin: 30px; margin-left: 80px;} /* ボタンのデザイン関連 */ .content_check { /* 内容確認へボタン */ display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; font-size: 26px; /* 文字を大きめに*/ } .reset3 { /* リセットボタン */ 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; /* 文字を大きめに*/ } /* 複数のボタンを等間隔に並べる */ .content{ width: 800px; height: 100px; background-color: #00ffff; } .inner{ padding-top: 20px; display: flex; justify-content: space-evenly; } .content_check:hover{ background-color: #fff; border-color: #9400D3; color: #9400D3; } .content_check::before, .content_check::after{ top: 0; width: 50%; height: 100%; background-color: #333; /*灰色*/ } .content_check::before{ right: 0; } .content_check::after{ left: 0; }
で実際の画面は
次回はデータ入力した後確認画面に移行するまでを書きたい