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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

CSS

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

Q&A

解決済

2回答

1512閲覧

HTML,CSS:formタグ内のCSSが反映されなくなりました。多少javaも解られる方ご教示宜しくお願い致します。

WOAAbQm0Jefa5g1

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

CSS

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

0グッド

1クリップ

投稿2020/07/29 10:30

編集2020/07/29 23:41

コード

javaにてSmamaというコミュニティサイトを作成中ですが、バックエンドはjavaにて実装予定、Eclipseにて 作成しています。ログイン画面を作成中ですが、formタグでメールアドレスとパスワード入力画面を作成していて メールアドレスとパスワードをそれぞれformタグにて囲って作成していましたが、2つともまとめて(ログインボタンも含め) formタグで囲うのが正しいと知り、そのように書き換えてみましたが、formタグ内のソースにCSSが効かなくなってしまいました。 ### 発生している問題・エラーメッセージ メールアドレス・パスワードの入力画面が表示されない。 ログインボタンも表示されない。 ### 該当のソースコード 【HTML】 <form action="/Smama/Login" method="post"> <input class="mail-address" id="mail-address" type="email" name="address-txt" placeholder="メールアドレス"/><br> <input class="password" id="password" type="password" name="password-txt" placeholder="パスワード"/><br> <input class="btn-green" type="submit" value="ログイン"><br> </form> 【CSS】 .mail-address,.password { width: 50%; height: 30px; color: #333300; margin: 30px 400px; } .btn-green { height: 40px; width: 200px; padding-top: 15px; margin: 30px auto; background-color: #00CC99; color: white; text-decoration: none; font-size: 20px; font-weight: bold; border-radius: 10px; text-align: center; } .btn-green:hover { background-color: #009999; } 以下追記です。【login.Input.jsp(html)】 ```html コード ```<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="model.SmamaLogin" %> <%@ page import="model.LoginLogic" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Smama1</title> <link rel="stylesheet" href="Smama.css"> </head> <body> <header> <div class="header-area"> <div class="main-logo"> <p class="main-txt">シングルマザーのコミュニティサイト</p> <h1 class="main-img">Smama</h1> </div> </div> </header> <div class="login-screen"> <h1 class="login">ログイン</h1> <form action="/Smama/Login" method="post"> <input class="mail-address" id="mail-address" type="email" name="address-txt" placeholder="メールアドレス"/><br> <input class="password" id="password" type="password" name="password-txt" placeholder="パスワード"/><br> <input class="btn-green" type="submit" value="ログイン"><br> </form> <p class="or">または</p> <a href="member.jsp" class="btn-orange">新規会員登録</a> </div> <footer class="site-overview"> <div class="text-end"> <a href="#" class="contact-us">お問い合わせ</a> <a href="#" class="recruit">求人・採用のお問い合わせ</a> <a href="#" class="service">利用規約</a> <a href="#" class="company">運営会社</a> </div> <p class="end">copyright(c)SMS Co.LTD All Rights Reserved</p> </footer> </body> </html> 【CSS追記(関係ないと思われる部分は省略しています)】 ```css コード ```@charset "UTF-8"; .main-logo,.main-txt,a,img,.nav,h3,.terms,.site-overview { display: block; } .btn-recruiting,.btn-login,.submit-btn,.banner,.sprout,.chicken,.cabbage,.microwave,.main-container { display: inline-block; } * { margin: 0; padding: 0; } /*CSS:ログインページ*/ .login-screen { height: 500px; width: 100%; background-color: #CCFFFF; } .login { font-size: 30px; color: #333300; text-align: center; padding-top: 40px; } .mail-address,.password { width: 50%; height: 30px; color: #333300; margin: 30px 400px; } .btn-orange { height: 40px; width: 200px; padding-top: 15px; margin: 30px auto; background-color: #FF6633; color: white; text-decoration: none; font-size: 20px; font-weight: bold; border-radius: 10px; text-align: center; } .btn-orange:hover { background-color: #FF6600; } .or { text-align: center; } .btn-green { height: 40px; width: 200px; padding-top: 15px; margin: 30px auto; background-color: #00CC99; color: white; text-decoration: none; font-size: 20px; font-weight: bold; border-radius: 10px; text-align: center; } .btn-green:hover { background-color: #009999; }    ![cssが適用されていないログイン画面](1f3733a141c9c65ef0bc9729b0821eb2.png) ![cssが適用されているログイン画面](d2e462a84a123da7756c06bf4faee934.png) ### 試したこと メールアドレス、パスワードそれぞれ単体でformタグで囲うと、CSSが適用され入力画面が表示されます。 しかし、それでは画面遷移や入力データの保存が出来ないと言われました。 ### 補足情報(FW/ツールのバージョンなど) Eclipse2017、java,HTML,CSS 当方、40代(女)の初学者でIT用語にも疎いため、お手柔らかにお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/07/29 10:48

バックエンドがJavaのようですが、 何かフレームワークは使っていますか? また、HTML構文はこれで全てでしょうか? そうで無い場合、 ブラウザで表示時の(ようはバックエンドの状態でなく、ブラウザへ返された最終のHTML)を記載してください。 CSSも、他に書いた部分が影響してるかもなので、なるたけ全て記載してください。
WOAAbQm0Jefa5g1

2020/07/29 11:13

フレームワークは使用していません。 構文の方を追記しておきます。
miyabi_takatsuk

2020/07/29 11:37

なるほど・・・。 すみません、ソースコードは、コードブロックを使用していただけませんか? ```ここに言語名 ソースコード ``` という形式で入力すれば、コードブロックになります。
Yasumichi

2020/07/29 12:28

ソースをコピペして、ローカルで試してみましたが、スタイルが適用されています。 当方、ローカルの Apache Tomcat 9.0.35 サーバー、ブラウザーは Firefox で試しました。 Web アプリケーションサーバーと確認したブラウザーを教えてください。 因みにサーバーで実行で確認しているという認識でよろしいでしょうか?
WOAAbQm0Jefa5g1

2020/07/29 12:42

サーバーはApache Tomcat 9.0.35、ブラウザはGoogle Chromeです。 サーバーで実行しています。
Yasumichi

2020/07/29 12:49

Google Chrome でも反映されているように見受けられます。 省略した部分に原因があるかもしれません。 あと、反映されるバージョンと反映されないバージョンのスクリーンショットを貼っていただき、反映されないと判断した理由を付記していただけると解決の糸口が見えるかもしれません。
m.ts10806

2020/07/29 20:49

質問内のマークダウンがめちゃくちゃです。 投稿前にプレビュー確認してください。
WOAAbQm0Jefa5g1

2020/07/29 23:27

スクリーンショットを後程、投稿させていただきます。
Yasumichi

2020/07/30 13:17

WOAAbQm0Jefa5g1 さんへ m.ts10806 さんが > 質問内のマークダウンがめちゃくちゃです。 と指摘されている通り、login.Input.jsp の冒頭部分が消えていたり、ところどころ、css が化けてたりするので当方で完全に再現できているか、不明な部分があります。 jsp の場合、 ```jsp この間にソースを書く。ソースと関係ない説明は、外に書きます。 ``` css の場合、 ```css この間にソースを書く。ソースと関係ない説明は、外に書きます。 ``` という感じに書きます。エディタの <code> ボタンを使った場合、「ここに言語を入力」と書かれた部分には、「html」や「jsp」、「css」などの言語名で置き換えます。その部分をソースコードにしたりすると現在のように崩れるので注意が必要です。
Yasumichi

2020/07/30 14:27

原因らしき部分が再現できたので回答に書きました。 私の推測が正しければ、WOAAbQm0Jefa5g1 さんが「関係ないと思われる部分」と思った部分が関係していたことになります。 なので自己解決が難しい場合は、関係あるか否かを自己判断せず、すべて開示された方が、解決が早いと思われます。 あと、今回、スクリーンショットを追加して頂いたことで原因がピンと来たというところもあります。単純に「CSSが反映されない」と言葉だけで書くと回答者と共通認識を持てない可能性が高いです。 (実際には、CSS が反映されていたからこそ、期待した表示にならなかった訳ですし。) 以上、「お手柔らかに」とは書かれていましたが、今後のために敢えて書かせていただきました。
guest

回答2

0

ベストアンサー

本来、質問への追記・修正依頼で書くべき内容かもしれませんが。

開示されている範囲で当方で確認した画面です。

イメージ説明

おそらく、

(関係ないと思われる部分は省略しています)

の部分が悪影響を及ぼしている可能性が高い気がします。

可能性として考えられるのは、form あたりに display: flex; を指定しているとかですかね。

【追記】

css

1form { 2 display: flex; 3}

を追加したら、同様の崩れが再現できました。

イメージ説明

なので同様であれば、display: flex; を削除してください。

投稿2020/07/30 13:59

編集2020/07/30 14:32
Yasumichi

総合スコア1773

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WOAAbQm0Jefa5g1

2020/08/02 07:13

返信の方遅くなり申し訳ありません。 わざわざご丁寧に説明の方有難うございました。同様にやってみたら無事解決できました。 ボタンの方がずれてしまいますがおそらくソースを見直せば解決すると思います。 どうも有難うございました!
guest

0

CodePenで確認した限りでは、form内の要素にはスタイルは当たっていますね。

CodePenサンプル

jspということですが、chromeのデベロッパーツールでform内の要素が表示されていることは確認されておりますでしょうか。
もしかしたら、デベロッパーツールのコンソールログにエラーが表示されているかもしれませんのでご確認いただけますでしょうか。
https://saruwakakun.com/html-css/basic/chrome-dev-tool

投稿2020/07/29 12:14

FrontEnd_Japan

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WOAAbQm0Jefa5g1

2020/07/29 12:43

わかりました。確認してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問