ryotankの備考録日記

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

電子工作作業報告書管理アプリその32

電子工作作業報告書管理　EWRN

data1のスタイルシートは
data1.cssに記述する
また、位置を調整したいので、移動さたい箇所に色付けして
好みの位置になるまで調整を繰り返す

CSS用語　その1：マージン
マージンとは、領域間のスペース

その2：パディング
パディングとは、領域内のスペース

またスタイルシートを適応させるには
head要素の間に

 <link rel="stylesheet" href="data1.css" type="text/css">

と書く

p.te{background-color: #f8dce0; padding: 10px;}
p.ce{background-color: #f8dce0; margin: 30px; padding: 10px;}
p.ws{background-color: #f8dce0; padding: 10px 20px 30px;}
p.rs{background-color: #f8dce0; padding: 10px 20px 30px 40px;}

textやtextareaとかも移動させたいので、classセレクタをつけパディングを
指定すればいいんだろうか？

実際にやってみる

ちなみにte:作業名の文字列
ce:分類名の文字列
ws:作業内容の文字列
rs:備考の文字列で、これらを移動させて確認する

今回もcodepenで検証する
classセレクタでCSSのスタイルを適用させるので
textなどにclassセレクタを設定した

<!--余白や色などはCSSに書く、文章のみをHTMLページに-->
<!--data.htmlはデータ入力画面1-->
<!--ewrn/templates/user/data.html-->

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>データ入力画面1フォーム</title>
  <link rel="stylesheet" href="data1.css" type="text/css"> <!-- cssを読み込ませる -->
</head>
 
<body>
    <h1>データ入力画面1</h1>
    <form action='{% url "showUsers" %}' method="POST" class='data-form'>
        <p class="te">作業名</p>
        <input type="text" name="task_name" class="task_name" placeholder="N-chFET実験基板半田付けと組み立て">

        <p class="ce">分類名</p>
        <input type="text" name="class_name" class="class_name" placeholder="基板組み立て">

        <p class="ws">作業内容</p>
        <textarea name="work_details" class= "work_details" rows="5" cols="60"
        placeholder="半田付け、抵抗値チェック、火入れ"></textarea>

        <p class="rs">備考</p>
        <textarea name="remarks" class= "remarks" rows="5" cols="60"
        placeholder="コンデンサと抵抗との間隔が近すぎ、次回設計時には、20mm空ける事に注意する"></textarea>

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

textareaも含めてマージンなどを指定したverのCSSはこんな感じに書いた

p.te{background-color: #f8dce0; margin: 10px;}
p.ce{background-color: #f8dce0; margin: 30px; padding: 10px;}
p.ws{background-color: #f8dce0; margin: 10px 20px 30px;}
p.rs{background-color: #f8dce0; margin: 10px 20px 30px 40px;}


.task_name{background-color: #f8dce0; margin: 30px; padding: 0px;}
.class_name{background-color: #f8dce0; margin: 30px; padding: 0px;}
.work_details{background-color: #f8dce0; margin: 30px; padding: 10px;}
.remarks{background-color: #f8dce0; margin: 30px; padding: 10px;}
f:id:ryotank:20220119170159p:plain
CSSを使って位置調整したdata1の画面

もっと調整が必要だな