ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書管理アプリその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;
}

で実際の画面は

f:id:ryotank:20220128202718p:plain
CSS実験7

次回はデータ入力した後確認画面に移行するまでを書きたい