こちらのHTMLをきれいに見やすくしようとCSSで頑張ってみたのですが、色を付けて強調箇所を作った所で万策つきました。
ソースコード等が無くても構いません。こうしたらより見やすくなる、デザイン性がよくなる等助言お願い致します。
また、追加情報が必要でしたら随時更新いたします。

追記です。ソースを提示いたします。
JSが混在していたり見にくいとは思いますが、ご了承ください。

JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2	pageEncoding="UTF-8"%>
3<%@ page import="mastaProgram.Masta"%>
4<%@ page import="java.util.ArrayList"%>
5
6<!DOCTYPE html>
7<html>
8<head>
9<meta charset="UTF-8">
10<title>マスタメンテナンス</title>
11<link href="TestMastaCSS.css" rel="stylesheet" type="text/css">
12<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
13</head>
14<body>
15	<%
16		ArrayList<Masta> masta = (ArrayList<Masta>) request.getAttribute("masta");
17	%>
18
19
20	<div class="all"><br>
21	<h2 class="center">従業員マスタメンテナンス</h2>
22
23	<form action="MastaServlet">
24		<p class="list">
25			全従業員リスト<input type="submit" value="表示" class="mastabutton">
26		</p>
27	</form>
28	<form action="TestMastaServlet">
29		従業員No.<input type="text" name="nom"size="1"><input type="submit"
30			value="検索"> <input type="submit" value="削除"
31			formaction="DeleteServlet"><br>
32	</form>
33
34
35	<%
36		if (masta != null)
37		for (int i = 0; i < masta.size(); i++) {
38			Masta up = masta.get(i);
39	%>
40	<form action="UpdateServlet" method="post">
41		<p>
42			従業員No.<input type="text"value="<%=up.getNom()%>"name="nom" readonly size="1"></p>
43
44		<p>
45			生年月日(西暦):<input type="text" value="<%=up.getYear()%>" size="1"name="year" id="year2"style="ime-mode: inactive" onkeyup="get2()">年
46							<input type="text"value="<%=up.getMonth()%>"size="1" name="month" id="month" style="ime-mode: inactive" onkeyup="get2()">月
47							<input type="text" value="<%=up.getDay()%>" size="1"name="day" id="day" style="ime-mode: inactive" onkeyup="get2()">日
48
49		</p>
50		<p>
51			年齢：<input type="text"size="1" name="age" id="age2" value=<%=up.getAge()%>>歳
52<script type="text/javascript" src="Nenrei2.js"></script>
53		</p>
54		<p>
55			氏名；<input type="text" value="<%=up.getName()%>" name="name"
56				style="ime-mode: active"> 氏名(かな)：<input type="text"
57				value="<%=up.getKana()%>" name="kana" style="ime-mode: active">
58		</p>
59		<p>住所：〒<input type="text" value="<%=up.getCode() %>"size="6" name="code" id="code2" style="ime-mode: inactive"></p><br>
60			　<input type="text" value="<%=up.getAdd1() %>" name="add1" id="add3">　<input type="text" value="<%=up.getAdd2() %>" name="add2" id="add4">
61			<script type="text/javascript" src="search2.js"></script>
62		<p>
63			メール<input type="text" value="<%=up.getMail()%>" name="mail"
64				style="ime-mode: inactive"> 電話<input type="text"
65				value="<%=up.getTell()%>" name="tell" style="ime-mode: inactive">
66		</p>
67		<br> <input type="submit" value="更新">
68	</form>
69	<%
70		}
71	else {
72	%>
73
74	<form action="InputServlet" method="post">
75		<p>
76			生年月日(西暦):<input type="text" name="year" id="year" style="ime-mode: inactive" onkeyup="get()" placeholder="例)20200910" class="year"size="8">　
77			<input type="text" name="age" id="age" size="1">歳
78			<script type="text/javascript" src="Nenrei.js"></script>
79		</p>
80		<p>
81			氏名<input type="text" name="name" style="ime-mode: active">
82			氏名(かな)<input type="text" name="kana" style="ime-mode: active">
83		</p>
84		<p>郵便番号<input type="text" name="code" id="code" style="ime-mode: inactive" size="6"><br>
85		住所<input type="text" name="add1" id="add1" size="4"><br>
86		　　<input type="text" name="add2" id="add2" size="30">
87<script type="text/javascript" src="search.js"></script>
88		<p>メール<input type="text" name="mail" style="ime-mode: inactive">
89			電話<input type="text" name="tell" style="ime-mode: inactive">
90		</p>
91		<Input type="submit" value="新規登録">
92	</form>
93
94	<%
95		}
96	%>
97	<br>
98</div>
99<script>
100$('form').on('keydown', 'input, button, select', function(e) {
101    if (e.keyCode == 13) {
102        if ($(this).attr("type") == 'submit') return;
103
104        var form = $(this).closest('form');
105        var focusable = form.find('input, button[type="submit"], select, textarea')
106            .not('[readonly]').filter(':visible');
107
108        if (e.shiftKey) {
109            focusable.eq(focusable.index(this) - 1).focus();
110        } else {
111            var next = focusable.eq(focusable.index(this) + 1);
112            if (next.length) {
113                next.focus();
114            } else {
115                focusable.eq(0).focus();
116            }
117        }
118
119        e.preventDefault();
120    }
121});
122</script>
123</body>
124</html>
125

hentaiman

2020/09/10 06:05

壊滅的ですね、同類としてアドバイスすると、諦めが肝心自力でhtmlを作る必要性が無いのならプログラム側に集中してデザインは他人に任せてしまうのが有効な手段です

sad

2020/09/10 06:10

同類様からのアドバイス、心に染みわたりました。ありがとうございます。今日無理だったら諦めることにします。

phiar_poet

2020/09/10 06:17

私もデザインセンスが壊滅的なのですが、無いなりにやろうとすると最初からコード化するのではなく、絵に描いてみたり、Excelなんかでまずは完成系をイメージします。今この状態が見にくいというのがご自分でも分かっていらっしゃるなら、絵にいろいろ描いてみて、絵を見てうーん、と唸る方がよいかもしれません。また、同じ様なフォーム形式のサイトがないかをぐぐってみて参考にするのがベターです。絵やExcelなんかで大雑把な形ができたら、それを見ながらコード化していく… というのは自分がよくやる手段です。。

sad

2020/09/10 06:23

先に形を決めてから組み立てるのですね...ありがとうございます。情報が乱雑に散らばっていて、どこから打ち込もうかなと悩んでしまうようなイメージを持っています。メモノートに書きながら見やすい形を模索してみます。

hentaiman

2020/09/10 06:43

同類として言うと、それでどうにかなるレベルではないです。モックアップの絵自体が悲惨な事になるので自分でデザインを考えてはいけません。どうしても自力が良いなら、「サイトデザインテンプレート」とかで検索して出てきたものを元にほんの少し加工していくぐらいが良い所かなと・・・最低限お手軽に見た目を整えるならbootstrapを当て込むだけでもいいです

sad

2020/09/10 06:57

（書いてみて自分でなにがしたいのかわからなくなってきました） bootstrapを調べて使ってみます、、ありがとうございました。

行動規範の内容に同意します

回答9件

質問では「CSS装飾のセンスがない」ということですが、問題はそこではないと思います。

「装飾＝デコレーション」とか「CSS＝言語や記法」の問題でなく、デザイン、設計の問題かと思われます。
デザイン、設計は方法論であり、セオリーに応じて作成すれば、大幅に改善できるかと思います。
装飾で格好を付けることを考える余裕があるならば、配色は殺風景なデフォルトのままでも良いのでユーザが画面をみた時に意味を理解でき、迷わず使えるよう情報を設計すべきです。

具体的なアドバイス

input要素の左側が縦一直線に揃うように並べましょう。table要素はレイアウトに使うことは推奨されていませんが、tableレイアウトを使うことでとりあえず一直線に並べられ、多少はよくなるでしょう。
氏名とかな、メールと電話番号が横並びになっている反面、他の項目は改行されていて一貫性がありません。基本的には全て別の行にし、関連性が強く、かつ横幅が狭い場合のみ一行に複数並べることにしましょう。
タイトルが「従業員マスタメンテナンス」となっている理由はなぜでしょうか？内容からすると「従業員新規登録」となっているべきではないでしょうか。
この画面に「全従業員リスト表示」というものがあるのはなぜでしょうか？新しく従業員を追加したいユーザは全従業員リストを見る必要がありますか？あるいは全従業員の一覧をみたいユーザが、従業員の新規登録機能があるページを経由したい理由は何ですか？おそらく別のページに分けるべきでしょう。
住所の右側のテキストボックスには住所を入れるのでしょうが、その下にあるテキストボックスは何を入れるべきか混乱します。都道府県、住所（市区町村）住所（丁目・番地・建物名・部屋番号）と分けるなどして、全てのテキストボックスに説明がある状態にした方が良いでしょう。

一般的なアドバイス

他の使いやすいサイト、システムをよく見て観察しましょう。
配色はどうか、レイアウトはどうか、空間の使い方はどうか、デザイナーが物事をどういったモデル、階層構造で捉えて整理しているか想像してみましょう。

投稿2020/09/10 06:50

AtsushiYonenaga

総合スコア116

sad

2020/09/10 07:05

ありがとうございます。ソースコードでは（わかりにくいですが）、この画面だけでなく追加画面、検索結果画面に遷移するように組んでいます。表示を押すと今DBに登録されているデータ一覧が見れて、そこからNo.で検索すると、、、というように一つのアプリケーションのような形です。説明が足らずに申し訳ございません。アドバイスから、よりよく改善できるように尽力いたします。ありがとうございました。

行動規範の内容に同意します

CSSはもはや自分で書かなくていい。bootstrapなど好きなCSSフレームワークを使えばいい。

現代のCSSを簡単と思うのは初心者だけで詳しくなるほど自分で書くのは嫌になる。

投稿2020/09/10 06:35

退会済みユーザー

総合スコア0

sad

2020/09/10 06:42

よほど自分好みのHPを作りたい人が使う趣味言語に近い、といった感じなのですかね、、（正直簡単だと思っていた初心者です）

AtsushiYonenaga

2020/09/10 07:04

CSSの難しさもそうですが、デザインというものはパッと見た時に思うよりも多くの情報が詰まっており、それを自前で詰めるのは大変なのです。要素と要素の左右の間隔は何px、上下は何pxとかに始まり、企業や製品のイメージカラーは何色で、「ユーザが次に行いそうな動作」を意味する色、エラーを意味する色、警告を意味する色、安全を意味する色などを決め、それらは基本的に重複してはいけません。赤色がイメージカラーの会社は、エラー表示にイメージカラーの赤を使えない……と行った問題が発生します。また、ボタン一つにしても「通常のボタン」「操作できないボタン」「押された瞬間のボタン」「マウスオーバーされたされた時のボタン」と複数の色を設定しなければなりません。そして、もし「通常のボタン」の色を変えようとした際に、ボタンの他の状態や背景色と色が似ていてはいけません。そうすると、玉突き方式でデザインの広範囲に変更の影響を与えかねないのです。 CSSフレームワークやOSが提供しているUIスキームはその辺りをよく吟味して作られているので、そのようなものを活用すべきですし、安易に色を変えたりすることはおすすめできません。顧客や見込み顧客に与えるイメージが大事なBtoCのサイトでは、CSSのカスタマイズを行うことは必須かと思います。また、CSSフレームワークはCSSでできています。ですので、CSS自体が「趣味言語」ということは全くありません。

行動規範の内容に同意します

デザイン自体が成否を決めるような、顧客向けのWebサイトならともかく、社内画面のような「それなりの見栄えになっていれば、それ以上にこだわることは要求として大きくない」ような環境であれば、Bootstrapなど何かしらの出来合いのCSSフレームワークで済ませてしまうのが合理的です。

投稿2020/09/10 06:38

maisumakun

総合スコア145930

回答用意してたら解決済みになっていた…
大したものじゃないですがもったいないので回答しておきます。

「ユーザーの立場になったときに使いやすいか（わかりやすいか）」を意識してみてください。
古い記事や同じような内容があるかもしれませんが、「見やすいフォームデザイン」で検索した結果からいくつか紹介します。

入力フォームのデザイン・UXを高める15のルールを徹底図解！
入力フォームはデザインが重要！注意すべき16のポイントと参考にしたい記事8選
 【2020年最新事例付き】入力フォーム作成の際に注意したい12のポイント
 入力フォームをデザインする時に気をつけること8つ

個人的に提示の画像を見た感想としては、
・なぜ背景が水色なんだろう（システム全体のカラーならともかくそういうわけではなさそう）
・なんでもかんでもセンタリングしてる感がすごい
・年齢欄は必要か？（生年月日入れるなら年齢は自動で出てほしい）
・生年月日は表記ゆれが無いように「例」ではなく「8桁で入力（20200910）」とかにしてほしい
・住所の欄、わからなくはないけどプレースホルダか何かで「都道府県」「市区町村以降」とか入れてほしい
・別のものを入力させる場合には横並びにしてほしくない（メール、電話欄は特に違和感）
・フォーム自体が「新規登録」のための入力欄なのか、「従業員No」で検索した結果を表示させるためのものなのかがわかりにくい。
（コードを見ると切り替えか何かしてるのかな？詳しくないのでわからないけど）

「プログラミングに関係がない」ともいえる装飾の質問にこれだけ多くの回答が寄せられていることに驚いています。

投稿2020/09/10 07:13

dit.

総合スコア3235

sad

2020/09/10 07:28

わざわざありがとうございます！参考サイトまで提示していただき、感謝しかございません。感想への回答として、上から順に・なんとなくです、、（今は薄灰色）・そのとおりです。そこで自分が壊滅していることに気が付きました。・自動で出ます！・※で上に小さめに8桁で..を追加してみます！・たしかに、あったほうが分かりやすいので入れてみます。・色々切り替わります。上書きとか検索結果とか、、、自分でも正直関係ない質問をするなとお叱りをうけるのではないかと思っていたので、驚いています。皆さんがいろいろな助言をくださるので、毎日の学習ライフが充実です。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

CSSの問題というか…まずぱっと見て

背景色は白でいい気がする
長さが違うもの（行）を中央揃えしてるので視線の流れがガタガタして見難い。項目名・入力フィールドの左端位置は揃えたほうが
表示ボタン？　のデザインがちょっと浮いてる
「検索」「削除」が隣にあるのって怖くない？

あとこれはDB層の話ですが生年月日があれば年齢は計算できるので削りたい（1年ごとに年齢を+1していくの面倒ですよ）

投稿2020/09/10 06:43

q_sane_q

総合スコア610

sad

2020/09/10 06:55

細かな助言、ありがとうございます。上から順に目が忙しない理由はそういうことだったのですね。左に合わせてみます！表示ボタンは壊滅センスが全力で壊滅した黒歴史です。削除ボタンを少し離してアラートが出るようにしてみます。年齢は、生年月日を入れると非同期で自動入力されるように組んでます。なので削れません、、申し訳ございません。

行動規範の内容に同意します

画像検索してみましょう。

あと、見た目の話ではありませんが、電話番号は複数あった方が良いです。逆に年齢は生年月日から計算できるので要りません。

追記

なお、色は彩度を低くした方が上品になると思います。「水色」とか「緑」という日常よく名前の呼ばれる色ではなく、それをくすませたものですね。RGB のどれか一つ二つが突出していたら、突出した成分を抑えて足りない成分を上げてみてください。

投稿2020/09/10 06:51

編集2020/09/10 07:00

Zuishin

総合スコア28662

sad

2020/09/10 07:09

固定電話と携帯電話、、といった形でしょうか？確かに考えていませんでした。ありがとうございます！余裕があれば組み込んでみます！年齢については生年月日から自動で計算、入力されるようにしています。説明が足らずに申し訳ございません。

sad

2020/09/10 07:11

色を強くし過ぎるとよくないのですね、、ありがとうございます。薄ーい灰色あたりで考えてみます！

行動規範の内容に同意します

この文書のアウトラインを考えてみました。

従業員マスタメンテナンス
-全従業員リスト
--表示
-（見出しなし）
--従業員№
---検索
---削除
-（見出しなし）
--生年月日
...
---新規登録

ということで、見出しのない大項目が二つもあるのが、わかりにくさの原因ではないでしょうか。

投稿2020/09/10 06:18

Lhankor_Mhy

総合スコア36898

sad

2020/09/10 06:31

ありがとうございます。見出しのない大項目、、この二つをどうにかしなければならないのですね。自分では考えもつかないような視点からの助言、感謝いたします。もう少し試行錯誤してみます。

行動規範の内容に同意します

この質問、同類として大変気になっていたのですが、少し時間が取れたので回答します。
と言っても、具体的な修正ポイントの話ではなく、学習方法ですが＾＾；

CSS装飾のセンスが壊滅的です。助言をください。

実はここが課題整理の入り口です。
まずは、以下が入り混じってしまっていることを認識するところからです。

・画面レイアウト(配置や配色)の話
・CSS の設計の話
・(抜けていますが) UX の話

これが混じったままだと話が進みません。

画面レイアウト(配置や配色)の話

センスも重要になりますが、ロジックでくみ上げることも可能です。
本職ではないので、ごくさわりのところしか理解できていませんが、それでも理解が進むと面白いほどイメージが変わります。

以下のサイトが入り口としてはオススメです。

はじめてのデザイン　〜デザインの基本・考え方〜

また、用途別に優れたものをまとめてくれているサイトも参考になります。
自身のセンスに自信がないのであれば、参考にすべきです。

縦長のwebデザインギャラリー・サイトリンク集

この手のまとめはネット上に多数あるので、調べてみると良いです。

CSS の設計の話

これ、得意な人いるのかなぁ。。。ていうぐらい、私には理解できない話ですｗ
ざっくりと紹介されている記事を探しました＾＾；

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ

CSS はサイト全体に対して影響を及ぼすものなので、拘るサイトはとことん拘りますが、よくできたフレームワークも多数あるので、自身では設計せず、CSS フレームワークの仕様を受け入れてしまうサイトも多数あります。

CSS フレームワークとしては Bootstrap が圧倒的シェアを持ちますが、2020 年の調査をしている記事があったので紹介しておきます。

レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】

デメリットは「似たようなサイトデザインになってしまう」と言われますが、裏を返すと「そこそこプロっぽいデザインが簡単に実装できる」という事でもあります。
テンプレートも多数公開されているので、センスも拘りもない私としては、CSS のスクラッチ設計は諦め、フレームワークの利用しかしていませんｗ

UX の話

ざっくりと言ってしまうと、「ユーザの使い勝手」の観点での設計です。
配置や配色と密接にかかわりますが、別の観点です。

例えば、

・誤入力を避けるため、ユーザ属性の一番重要なもの(名前とか)を目立つ大きさや色にする
・生年月日から年齢/郵便番号から住所を自動入力する
・意図しない入力に対しての警告を「警告を表す色や大きさ」で表示する
・違和感のない入力順にし、余計なことに頭を使わせない(生年月日を最初に入力するケースはあまり見かけないです)(属性を整理して、段組みを行うとかも頭を使わせない工夫かな？)

等々、細かく見ていけば際限がありませんが、個人的に一番面白いところです。

また、前項目で触れた CSS フレームワークの補足となりますが、色の持つ意味やボタンの持つ意味など、ユーザの認知度の高い体験を提供できることがメリットとなります。
これは初心者が思っている以上に重要な事です。