ryotankの備考録日記

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

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

いい感じに調整が出来た

1回目がこれで

f:id:ryotank:20220121090122p:plain
data1css実験1

2回目がこれ

f:id:ryotank:20220121090313p:plain
data1css実験2
f:id:ryotank:20220121090348p:plain
data1css実験2結果

その時のCSSコードは

/* data1のcss :data1.css*/
/* 全体を左マージン80px移動させた 2022-1-21 
運用ブラウザ:FireFox_ver96.01(64bit)*/

/* 文字列のマージン*/
.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;}

まだボタンが小さいので、これも大きさを調整する

ボタンのサイズを固定する場合は数値をpxで指定する

それとマウスを載せた時、ボタンの背景が左から右に変化する様にしたいので
そのようなコードを書く事にする