電子工作作業報告書管理アプリその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; }
こんな感じに出来た
ここで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をイメージ図になるようなコードを書く