基板設計記録WEBアプリその19 - ryotankの備考録日記

今回は、PDR_data_form.html(PDR入力画面1)の全体の見た目をCSSを使い整える

/* PDR_data_from.htmlのcss */
/* ファイル名:pdr_data.css */
/* 作成日2022-3-5 */

/*項目を画面中央に寄せる */
.bn{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */ 
}

.board_name{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */ 
}

.sen{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */ 
}

.substrate_english_name{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */ 
}

.bo{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */
}

.board_overview{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */ 
}

.ws{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */
}

.vo{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */
}

.vertical_outline{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */ 
}

.mm1{
position: relative; /* 今の位置を基準 */
    bottom: 40px;
    left: 235px;  /* 左から235px */ 
}

.ho{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */
}

.horizontal_outline{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */ 
}

.mm2{
    position: relative; /* 今の位置を基準 */
    bottom: 40px;
    left: 235px;  /* 左から235px */ 
}

.psm{
    position: relative; /* 今の位置を基準 */
    top: 15px;   /* 上から15px */
    left: 60px;  /* 左から60px */
}

.power_supply_method{
    position: relative; /* 今の位置を基準 */
    left: 60px;  /* 左から60px */
}



/*各ボタンを画面中央に寄せる */

.input2btn{
    position: relative; /* 今の位置を基準 */
    left: 700px;  /* 左から700px */
}

.reset{
    position: relative; /* 今の位置を基準 */
    left: 800px;  /* 左から800px */
}

ちなみにPDR_data_form.htmlも載せる

<!--PDR_data_form.html-->
<!--余白や色などはCSSに書く、文章のみをHTMLページに-->
<!--content_check.htmlはリダイレクト先のテンプレート-->
<!--PDR/templates/user/content_check.html-->

<!--PDR入力フォームで入力した値-->
<!--2022年3月3日作成-->
<!--テキストボックスに入力された文字列を取得するのはjavascriptで行う-->
<!--縦と横の外形を入力出来る項目を追加2022年3月4日-->

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>基板設計記録入力画面1</title>
    <link rel="stylesheet" href="pdr_data.css"> <!-- 指定のcssを読み込む -->
</head>
 
<body>  <!-- 本文-->
    <h1>PDR(基板設計記録)入力画面1</h1>
    <form action='{% url "PDR_data2_from.html" %}' method="POST" class='data-form'>
        <p class="bn">基板名</p>
        <input type="text" name="board_name[]" class="board_name" placeholder="AVR_PA">

        <p class="sen">基板英名</p>
        <input type="text" name="substrate_english_name[]" class="substrate_english_name" placeholder="AVR_">

        <p class="bo">基板概要</p>
        <textarea name="board_overview[]" class= "board_overview" rows="5" cols="60"
        placeholder="半田付け、抵抗値チェック、火入れ"></textarea>
 
        <p class="ws">外形サイズ</p>
        <p class="vo">縦の外形</p>   
        <input type="text" name="vertical_outline[]" class="vertical_outline" placeholder="138">
        <p class="mm1">mm</p>

        <p class="ho">横の外形</p>
        <input type="text" name="horizontal_outline[]" class="horizontal_outline" placeholder="70">
        <p class="mm2">mm</p>

        <p class="psm">電源供給方法</p>
        <textarea name="power_supply_method[]" class= "power_supply_method" rows="5" cols="60"
        placeholder="半田付け、抵抗値チェック、火入れ"></textarea>

        <div class="content">
            <div class="inner">
                <input type="button" value="入力画面2へ" class="input2btn">
                <input type="reset" value="入力項目リセット" class="reset"> 
            </div>
        </div>
        {% csrf_token %}  <!-- この記述がないとエラーになる -->
        {{ form.as_p }}   <!-- フォーム内容がすべて表示される-->

    </form>
</body>

f:id:ryotank:20220305145645p:plain — 入力画面1全体図CSS加工無し

f:id:ryotank:20220305145612p:plain — 入力画面1全体をCSSで見た目を見やすくした

だいぶ見やすくなった

次回はPDR_data_form.htmlの"入力画面2へ"というボタンをクリックすると
PDR_data2_form.htmlへと遷移させるのを目標にする