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

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

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

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

デザイン

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

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

CSS

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

Q&A

0回答

463閲覧

特定のCSSだけ反省されません。

komekome0101

総合スコア14

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

デザイン

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

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

CSS

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

0グッド

0クリップ

投稿2021/03/03 04:53

自分のサイトのログイン画面にこのURLのデザインを適用させたいのですがうまくいきません。
URL

CSSファイルの読み込みのパスなどは通っているようです。背景やフォントのみCSSが適応されています。
しかし、肝心なアニメーションやInput要素などのcssだけなぜか反映されません。

viewはjspファイルを使用しています。

login.jsp

jsp

1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4<!DOCTYPE html> 5<html lang="ja"> 6<head> 7<meta charset="UTF-8"> 8<title>ログイン</title> 9<link rel="stylesheet" href="<c:url value='/css/loginform.css' />"> 10 <script type="text/javascript"> 11 $("#login-button").click(function(event){ 12 event.preventDefault(); 13 14 $('form').fadeOut(500); 15 $('.wrapper').addClass('form-success'); 16 });</script> 17</head> 18<body> 19 20 21 <div class="wrapper"> 22 <div class="container"> 23 <h1>Welcome</h1> 24 <form class="form" method="POST" action="<c:url value='/login' />"> 25 <input type="text" name="code" placeholder="Username" 26 value="${code}" /> 27 <input type="password" name="password" placeholder="Password" /> <input 28 type="hidden" name="_token" value="${_token}" /> 29 <button type="submit" id="login-button">ログイン</button> 30 </form> 31 </div> 32 33 <ul class="bg-bubbles"> 34 <li></li> 35 <li></li> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 <li></li> 42 <li></li> 43 <li></li> 44 </ul> 45 </div> 46 47 48</body> 49</html> 50

css

1@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300); 2 3@prim: #53e3a6; 4 5*{ 6 box-sizing: border-box; 7 margin: 0; 8 padding: 0; 9 10 font-weight: 300; 11} 12 13body{ 14 font-family: 'Source Sans Pro', sans-serif; 15 color: white; 16 font-weight: 300; 17 18 ::-webkit-input-placeholder { /* WebKit browsers */ 19 font-family: 'Source Sans Pro', sans-serif; 20 color: white; 21 font-weight: 300; 22 } 23 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 24 font-family: 'Source Sans Pro', sans-serif; 25 color: white; 26 opacity: 1; 27 font-weight: 300; 28 } 29 ::-moz-placeholder { /* Mozilla Firefox 19+ */ 30 font-family: 'Source Sans Pro', sans-serif; 31 color: white; 32 opacity: 1; 33 font-weight: 300; 34 } 35 :-ms-input-placeholder { /* Internet Explorer 10+ */ 36 font-family: 'Source Sans Pro', sans-serif; 37 color: white; 38 font-weight: 300; 39 } 40} 41 42.wrapper{ 43 background: #50a3a2; 44background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); 45background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); 46background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); 47background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); 48 49 position: absolute; 50 top: 50%; 51 left: 0; 52 width: 100%; 53 height: 400px; 54 margin-top: -200px; 55 overflow: hidden; 56 57 &.form-success{ 58 .container{ 59 h1{ 60 transform: translateY(85px); 61 } 62 } 63 } 64} 65 66.container{ 67 max-width: 600px; 68 margin: 0 auto; 69 padding: 80px 0; 70 height: 400px; 71 text-align: center; 72 73 h1{ 74 font-size: 40px; 75 transition-duration: 1s; 76 transition-timing-function: ease-in-put; 77 font-weight: 200; 78 } 79} 80 81form{ 82 padding: 20px 0; 83 position: relative; 84 z-index: 2; 85 86 input{ 87 display: block; 88 appearance: none; 89 outline: 0; 90 border: 1px solid fade(white, 40%); 91 background-color: fade(white, 20%); 92 width: 250px; 93 94 border-radius: 3px; 95 padding: 10px 15px; 96 margin: 0 auto 10px auto; 97 display: block; 98 text-align: center; 99 font-size: 18px; 100 101 color: white; 102 103 transition-duration: 0.25s; 104 font-weight: 300; 105 106 &:hover{ 107 background-color: fade(white, 40%); 108 } 109 110 &:focus{ 111 background-color: white; 112 width: 300px; 113 114 color: @prim; 115 } 116 } 117 118 button{ 119 appearance: none; 120 outline: 0; 121 background-color: white; 122 border: 0; 123 padding: 10px 15px; 124 color: @prim; 125 border-radius: 3px; 126 width: 250px; 127 cursor: pointer; 128 font-size: 18px; 129 transition-duration: 0.25s; 130 131 &:hover{ 132 background-color: rgb(245, 247, 249); 133 } 134 } 135} 136 137.bg-bubbles{ 138 position: absolute; 139 top: 0; 140 left: 0; 141 width: 100%; 142 height: 100%; 143 144 z-index: 1; 145 146 li{ 147 position: absolute; 148 list-style: none; 149 display: block; 150 width: 40px; 151 height: 40px; 152 background-color: fade(white, 15%); 153 bottom: -160px; 154 155 -webkit-animation: square 25s infinite; 156 animation: square 25s infinite; 157 158 -webkit-transition-timing-function: linear; 159 transition-timing-function: linear; 160 161 &:nth-child(1){ 162 left: 10%; 163 } 164 165 &:nth-child(2){ 166 left: 20%; 167 168 width: 80px; 169 height: 80px; 170 171 animation-delay: 2s; 172 animation-duration: 17s; 173 } 174 175 &:nth-child(3){ 176 left: 25%; 177 animation-delay: 4s; 178 } 179 180 &:nth-child(4){ 181 left: 40%; 182 width: 60px; 183 height: 60px; 184 185 animation-duration: 22s; 186 187 background-color: fade(white, 25%); 188 } 189 190 &:nth-child(5){ 191 left: 70%; 192 } 193 194 &:nth-child(6){ 195 left: 80%; 196 width: 120px; 197 height: 120px; 198 199 animation-delay: 3s; 200 background-color: fade(white, 20%); 201 } 202 203 &:nth-child(7){ 204 left: 32%; 205 width: 160px; 206 height: 160px; 207 208 animation-delay: 7s; 209 } 210 211 &:nth-child(8){ 212 left: 55%; 213 width: 20px; 214 height: 20px; 215 216 animation-delay: 15s; 217 animation-duration: 40s; 218 } 219 220 &:nth-child(9){ 221 left: 25%; 222 width: 10px; 223 height: 10px; 224 225 animation-delay: 2s; 226 animation-duration: 40s; 227 background-color: fade(white, 30%); 228 } 229 230 &:nth-child(10){ 231 left: 90%; 232 width: 160px; 233 height: 160px; 234 235 animation-delay: 11s; 236 } 237 } 238} 239 240@-webkit-keyframes square { 241 0% { transform: translateY(0); } 242 100% { transform: translateY(-700px) rotate(600deg); } 243} 244@keyframes square { 245 0% { transform: translateY(0); } 246 100% { transform: translateY(-700px) rotate(600deg); } 247}

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

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

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

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

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

Lhankor_Mhy

2021/03/03 04:57

SCSSはコンパイルされていますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問