ryotankの備考録日記

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

CSS

電子工作作業報告書その55

登録内容確認ページについて紹介する これは、データ入力1から3までに入力した各データに 間違いが無いかを確認したがために作成したページ見た目として表形式で表示させるCSS無しverだとこんな感じに 登録内容確認ページCSS調整無し CSSで調整するとこんな…

電子工作作業報告書その54

今回は、フォーム2と3のCSSが完成したので、 適用後の見た目とCSSのコードを載せる /* EWRN入力画面2のCSS 2022-8-19作成 ボタンは作業日のinputより左下に配置 */ /* プログレスバー */ .js-progress-bar2 { position: absolute; width: 100%; /* 横幅 */ z…

電子工作作業報告書その53

今現在のフォーム1,2,3の画面はこのようになっている EWRNアプリ_データ入力画面1_CSS調整無しverEWRNアプリ_データ入力画面2_CSS調整無しverEWRNアプリ_データ入力画面3_CSS調整無しverなのでCSSを使って画面のデザインを修正した現時点ではフォーム1を修正…

基板設計記録WEBアプリその19

今回は、PDR_data_form.html(PDR入力画面1)の全体の見た目をCSSを使い整える /* PDR_data_from.htmlのcss */ /* ファイル名:pdr_data.css */ /* 作成日2022-3-5 */ /*項目を画面中央に寄せる */ .bn{ position: relative; /* 今の位置を基準 */ top: 15px; /…

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

今回は、CCS実験4の結果を掲載し、 CSS実験5ではリセットボタンとの間隔をあけるようなCSSを書くボタンや画像を複数並べた時に同じ間隔を空け配置する方法があった flexboxというもの等間隔で並べるには、CSSのdisplay:flexと justify-content:space-evenly…

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

実験3では、"入力画面2へ"ボタンを目立つくらい大きくした data1css実験3結果 今回は"入力画面2"や"リセット"のボタンの大きさやアニメーションを付ける CSSのコードを書いてみる最初に"入力画面2"ボタンの大きさを目立つくらいの大きさに変化させる コード…