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

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

ただいまの
回答率

89.06%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 189

コード

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

コード

    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が適用されていないログイン画面
cssが適用されているログイン画面

試したこと

メールアドレス、パスワードそれぞれ単体でformタグで囲うと、CSSが適用され入力画面が表示されます。
しかし、それでは画面遷移や入力データの保存が出来ないと言われました。

補足情報(FW/ツールのバージョンなど)

Eclipse2017、java,HTML,CSS
当方、40代(女)の初学者でIT用語にも疎いため、お手柔らかにお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • WOAAbQm0Jefa5g1

    2020/07/30 08:27

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

    キャンセル

  • Yasumichi

    2020/07/30 22:17

    WOAAbQm0Jefa5g1 さんへ

    m.ts10806 さんが

    > 質問内のマークダウンがめちゃくちゃです。

    と指摘されている通り、login.Input.jsp の冒頭部分が消えていたり、ところどころ、css が化けてたりするので当方で完全に再現できているか、不明な部分があります。

    jsp の場合、

    ```jsp
    この間にソースを書く。ソースと関係ない説明は、外に書きます。
    ```

    css の場合、

    ```css
    この間にソースを書く。ソースと関係ない説明は、外に書きます。
    ```

    という感じに書きます。エディタの <code> ボタンを使った場合、「ここに言語を入力」と書かれた部分には、「html」や「jsp」、「css」などの言語名で置き換えます。その部分をソースコードにしたりすると現在のように崩れるので注意が必要です。

    キャンセル

  • Yasumichi

    2020/07/30 23:27

    原因らしき部分が再現できたので回答に書きました。

    私の推測が正しければ、WOAAbQm0Jefa5g1 さんが「関係ないと思われる部分」と思った部分が関係していたことになります。

    なので自己解決が難しい場合は、関係あるか否かを自己判断せず、すべて開示された方が、解決が早いと思われます。

    あと、今回、スクリーンショットを追加して頂いたことで原因がピンと来たというところもあります。単純に「CSSが反映されない」と言葉だけで書くと回答者と共通認識を持てない可能性が高いです。
    (実際には、CSS が反映されていたからこそ、期待した表示にならなかった訳ですし。)

    以上、「お手柔らかに」とは書かれていましたが、今後のために敢えて書かせていただきました。

    キャンセル

回答 2

checkベストアンサー

+1

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

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

イメージ説明

おそらく、

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

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

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

【追記】

form {
    display: flex;
}

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

イメージ説明

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/02 16:13

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

    キャンセル

0

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

CodePenサンプル

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/29 21:43

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

    キャンセル

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

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