質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

sad
sad

総合スコア16

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

9回答

1リアクション

2クリップ

2452閲覧

投稿2020/09/10 05:53

編集2020/09/10 06:14

今作成しているものです

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


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

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="mastaProgram.Masta"%> <%@ page import="java.util.ArrayList"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>マスタメンテナンス</title> <link href="TestMastaCSS.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-3.5.1.min.js"></script> </head> <body> <% ArrayList<Masta> masta = (ArrayList<Masta>) request.getAttribute("masta"); %> <div class="all"><br> <h2 class="center">従業員マスタメンテナンス</h2> <form action="MastaServlet"> <p class="list"> 全従業員リスト<input type="submit" value="表示" class="mastabutton"> </p> </form> <form action="TestMastaServlet"> 従業員No.<input type="text" name="nom"size="1"><input type="submit" value="検索"> <input type="submit" value="削除" formaction="DeleteServlet"><br> </form> <% if (masta != null) for (int i = 0; i < masta.size(); i++) { Masta up = masta.get(i); %> <form action="UpdateServlet" method="post"> <p> 従業員No.<input type="text"value="<%=up.getNom()%>"name="nom" readonly size="1"></p> <p> 生年月日(西暦):<input type="text" value="<%=up.getYear()%>" size="1"name="year" id="year2"style="ime-mode: inactive" onkeyup="get2()">年 <input type="text"value="<%=up.getMonth()%>"size="1" name="month" id="month" style="ime-mode: inactive" onkeyup="get2()">月 <input type="text" value="<%=up.getDay()%>" size="1"name="day" id="day" style="ime-mode: inactive" onkeyup="get2()">日 </p> <p> 年齢:<input type="text"size="1" name="age" id="age2" value=<%=up.getAge()%>>歳 <script type="text/javascript" src="Nenrei2.js"></script> </p> <p> 氏名;<input type="text" value="<%=up.getName()%>" name="name" style="ime-mode: active"> 氏名(かな):<input type="text" value="<%=up.getKana()%>" name="kana" style="ime-mode: active"> </p> <p>住所:〒<input type="text" value="<%=up.getCode() %>"size="6" name="code" id="code2" style="ime-mode: inactive"></p><br>  <input type="text" value="<%=up.getAdd1() %>" name="add1" id="add3"> <input type="text" value="<%=up.getAdd2() %>" name="add2" id="add4"> <script type="text/javascript" src="search2.js"></script> <p> メール<input type="text" value="<%=up.getMail()%>" name="mail" style="ime-mode: inactive"> 電話<input type="text" value="<%=up.getTell()%>" name="tell" style="ime-mode: inactive"> </p> <br> <input type="submit" value="更新"> </form> <% } else { %> <form action="InputServlet" method="post"> <p> 生年月日(西暦):<input type="text" name="year" id="year" style="ime-mode: inactive" onkeyup="get()" placeholder="例)20200910" class="year"size="8">  <input type="text" name="age" id="age" size="1">歳 <script type="text/javascript" src="Nenrei.js"></script> </p> <p> 氏名<input type="text" name="name" style="ime-mode: active"> 氏名(かな)<input type="text" name="kana" style="ime-mode: active"> </p> <p>郵便番号<input type="text" name="code" id="code" style="ime-mode: inactive" size="6"><br> 住所<input type="text" name="add1" id="add1" size="4"><br>   <input type="text" name="add2" id="add2" size="30"> <script type="text/javascript" src="search.js"></script> <p>メール<input type="text" name="mail" style="ime-mode: inactive"> 電話<input type="text" name="tell" style="ime-mode: inactive"> </p> <Input type="submit" value="新規登録"> </form> <% } %> <br> </div> <script> $('form').on('keydown', 'input, button, select', function(e) { if (e.keyCode == 13) { if ($(this).attr("type") == 'submit') return; var form = $(this).closest('form'); var focusable = form.find('input, button[type="submit"], select, textarea') .not('[readonly]').filter(':visible'); if (e.shiftKey) { focusable.eq(focusable.index(this) - 1).focus(); } else { var next = focusable.eq(focusable.index(this) + 1); if (next.length) { next.focus(); } else { focusable.eq(0).focus(); } } e.preventDefault(); } }); </script> </body> </html>
sk-sora--ypi👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2020/09/10 05:59依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「過去の低評価」という指摘を受けました。

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を調べて使ってみます、、ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。