ryotankの備考録日記

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

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

今回は、CCS実験4の結果を掲載し、
CSS実験5ではリセットボタンとの間隔をあけるようなCSSを書く

ボタンや画像を複数並べた時に同じ間隔を空け配置する方法があった
flexboxというもの

等間隔で並べるには、CSSのdisplay:flex
justify-content:space-evenlyを使用すると出来るみたい

やり方としては
並べたいボタンをinnerというクラス名のdiv要素で囲む

このクラス名がinnerのdiv要素に対し、display:flexとjustify-content:space-evenlyを
設定する事で、複数のボタンを同じ間隔で開けた状態で配置する様になる

/* 複数のボタンを等間隔に並べる為に抜粋 */
 <div class="content">
   <div class="inner">
	<input type="button" value="入力画面2へ" class="input2btn">
        <input type="reset" value="リセット" class="reset">
   </div>
 </div>
/* 複数のボタンを等間隔に並べる*/
.content {
  width: 600px;
  height: 100px;
  background-color: #00ffff; /* 水色で分かりやすく */
}

.inner {
  padding-top: 20px;
  display: flex;
  justify-content: space-evenly;
}

こんな感じに出来た

f:id:ryotank:20220123080026p:plain
CSS5実験結果

ここでCSSのコードを貼る

/* data1のcss */
/* 全体を左マージン80px移動させた 2022-1-21 
運用ブラウザ:FireFox_ver96.01(64bit)
ボタンの大きさを決め、マウスオーバーでボタン背景を左から右に変化させる */

/* "入力画面2へ"ボタンホバー時をダークバイオレットなど 2022-1-23-AM5:08*/
/* "入力画面2へ"ボタンとリセットボタンとの間隔を等間隔に 2022-1-23-AM7:50*/


/* 文字列のマージン*/
.title{background-color: #f8dce0; margin-left: 80px;}
p.te{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px;}  /*作業名の文字列*/
p.ce{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px}  /*分類名の文字列*/
p.ws{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px}  /*作業内容の文字列*/
p.rs{background-color: #f8dce0; margin-bottom: -20px; margin-left: 80px}  /*備考の文字列*/

/* textとtextareaのマージン*/
.task_name{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 40px;}
.class_name{background-color: #f8dce0; margin: 30px; margin-left: 80px; padding: 20px 40px;}
.work_details{background-color: #f8dce0; margin: 30px; margin-left: 80px;}
.remarks{background-color: #f8dce0; margin: 30px 20px; margin-left: 80px;}

/* ボタンのデザイン関連 */
.input2btn {  /* 入力画面2へボタン */
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    font-size: 28px;    /* 文字を大きめに*/
}

.reset {  /* 入力画面2へボタン */
    display: inline-block;
    width: 125px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    font-size: 22px;    /* 文字を大きめに*/
}

.input2btn:hover{
    background-color: #fff;
    border-color: #9400D3;
    color: #9400D3;
}

.input2btn::before,
.input2btn::after{
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #333; /*灰色*/
}

.input2btn::before{
    right: 0;
}
.input2btn::after{
    left: 0;
}

.input2btn:hover:before,
.input2btn:hover:after{
    width: 0;
    background-color: #9400D3;  /*ダークバイオレット色*/
}

/* 複数のボタンを等間隔に並べる*/
.content {
    width: 600px;
    height: 100px;
    background-color: #00ffff;
  }
  
  .inner {
    padding-top: 20px;
    display: flex;
    justify-content: space-evenly;
  }
  

続いてdata1.htmlのコードを

<!--余白や色などは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 class="title">データ入力画面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>

        
        <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>
    
    <p>{{ message }}</p>
</body>
 
</html>


次回はdata2のHTMLをイメージ図になるようなコードを書く