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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

2704閲覧

ログインページを作っているのですがCSSがボタンに上手く適用できません。

yuki116633

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/05/30 12:08

編集2017/05/30 12:11

###前提・実現したいこと
下記のテンプレートにあるようなログインページを作成しています。

ログインページのテンプレート
[https://bootsnipp.com/snippets/featured/google-style-login-extended-with-html5-localstorage]

###発生している問題・エラーメッセージ
「Sign in」ボタンにカーソルを当てると、本来はオレンジ色に変わって(CSS ★1の箇所)欲しいのですが、中途半端に色が変わります(下記画像参照)。
CSSの問題のような気がしますが、何がいけないのか分かりません。
ご教示いただけないでしょうか。
イメージ説明

###該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 8 <title>test</title> 9 10 <!-- import to login.css --> 11 <link rel="stylesheet" href="login.css"> 12 <!-- Latest compiled and minified CSS --> 13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 14 15 <!-- Optional theme --> 16 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 17 18 19 20 <!-- Latest compiled and minified JavaScript --> 21 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 22 </head> 23 <body> 24 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 25 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 26 <!-- Include all compiled plugins (below), or include individual files as needed --> 27 <script src="js/bootstrap.min.js"></script> 28 <script src="login.js"></script> 29 30 <!-- 31 you can substitue the span of reauth email for a input with the email and 32 include the remember me checkbox 33 --> 34 <div class="container"> 35 <div class="card card-container"> 36 <img id="profile-img" class="profile-img-card" src="icon.png" /> 37 <p id="profile-name" class="profile-name-card"></p> 38 <form class="form-signin"> 39 <span id="reauth-email" class="reauth-email"></span> 40 <input type="email" id="inputEmail" class="form-control" placeholder="User id ;)" required autofocus> 41 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> 42 <div id="remember" class="checkbox"> 43 <label> 44 <input type="checkbox" value="remember-me"> Remember me 45 </label> 46 </div> 47 <button class="btnlog btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> 48 </form><!-- /form --> 49 <a href="#" class="forgot-password"> 50 Forgot the password? 51 </a> 52 </div><!-- /card-container --> 53 </div><!-- /container --> 54 55 56 </body> 57</html>

CSS

1/* 2 * Specific styles of signin component 3 */ 4/* 5 * General styles 6 */ 7 8/* 背景のグラデーションを */ 9body, html { 10 height: 100%; 11 background-repeat: no-repeat; 12 background-image: linear-gradient(rgb(50, 50, 50), rgb(0, 0, 0)); 13 /* background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); */ 14} 15 16.card-container.card { 17 max-width: 350px; 18 padding: 40px 40px; 19} 20 21.btnlog { 22 font-weight: 700; 23 height: 36px; 24 -moz-user-select: none; 25 -webkit-user-select: none; 26 user-select: none; 27 cursor: default; 28} 29 30/* 31 * Card component 32 */ 33.card { 34 background-color: #F7F7F7; 35 /* just in case there no content*/ 36 padding: 20px 25px 30px; 37 margin: 0 auto 25px; 38 margin-top: 50px; 39 /* shadows and rounded borders */ 40 -moz-border-radius: 2px; 41 -webkit-border-radius: 2px; 42 border-radius: 2px; 43 -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 44 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 45 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 46} 47 48.profile-img-card { 49 width: 96px; 50 height: 96px; 51 margin: 0 auto 10px; 52 display: block; 53/* -moz-border-radius: 50%; 54 -webkit-border-radius: 50%; 55 border-radius: 50%;*/ 56} 57 58/* 59 * Form styles 60 */ 61.profile-name-card { 62 font-size: 16px; 63 font-weight: bold; 64 text-align: center; 65 margin: 10px 0 0; 66 min-height: 1em; 67} 68 69.reauth-email { 70 display: block; 71 color: #404040; 72 line-height: 2; 73 margin-bottom: 10px; 74 font-size: 14px; 75 text-align: center; 76 overflow: hidden; 77 text-overflow: ellipsis; 78 white-space: nowrap; 79 -moz-box-sizing: border-box; 80 -webkit-box-sizing: border-box; 81 box-sizing: border-box; 82} 83 84.form-signin #inputEmail, 85.form-signin #inputPassword { 86 direction: ltr; 87 height: 44px; 88 font-size: 16px; 89} 90 91.form-signin input[type=email], 92.form-signin input[type=password], 93.form-signin input[type=text], 94.form-signin button { 95 width: 100%; 96 display: block; 97 margin-bottom: 10px; 98 z-index: 1; 99 position: relative; 100 -moz-box-sizing: border-box; 101 -webkit-box-sizing: border-box; 102 box-sizing: border-box; 103} 104 105.form-signin .form-control:focus { 106 border-color: rgb(104, 145, 162); 107 outline: 0; 108 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); 109 box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); 110} 111 112.btnlog.btn-signin { 113 /*background-color: #4d90fe; */ 114 background-color: rgb(255, 145, 162); 115 /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ 116 padding: 0px; 117 font-weight: 700; 118 font-size: 14px; 119 height: 36px; 120 -moz-border-radius: 3px; 121 -webkit-border-radius: 3px; 122 border-radius: 3px; 123 border: none; 124 -o-transition: all 0.218s; 125 -moz-transition: all 0.218s; 126 -webkit-transition: all 0.218s; 127 transition: all 0.218s; 128} 129 130/* ★1 サインインボタンのフォーカス時、背景色を変更 */ 131.btnlog.btn-signin:hover, 132.btnlog.btn-signin:active, 133.btnlog.btn-signin:focus { 134 background-color: rgb(200, 97, 33); 135 /* background-color: rgb(12, 97, 33); */ 136} 137 138.forgot-password { 139 color: rgb(104, 145, 162); 140} 141 142.forgot-password:hover, 143.forgot-password:active, 144.forgot-password:focus{ 145 color: rgb(12, 97, 33); 146}

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSSのプロパティを変更すれば大丈夫です。
あ、その前にファイルの読み込み順を変更しておいてください。
bootstrapなどを使用する際には先にbootstrapのCSSを読み込んでからあとにそれを上書きするCSSを読み込みます。
今回でいうと、
0. bootstrap.min.css
0. bootstrap-theme.min.css
0. login.css

の順です。

CSSの変更する箇所は2つです。
.btnlog.btn-signinbackground-colorをコメントアウトと
.btnlog.btn-signin:hoverらのbackground-colorbackgroundに変更してください。

css

1.btnlog.btn-signin { 2 /*background-color: #4d90fe; */ 3/* background-color: rgb(255, 145, 162); これをコメントアウト*/ 4 /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ 5 padding: 0px; 6 font-weight: 700; 7 font-size: 14px; 8 height: 36px; 9 -moz-border-radius: 3px; 10 -webkit-border-radius: 3px; 11 border-radius: 3px; 12 border: none; 13 -o-transition: all 0.218s; 14 -moz-transition: all 0.218s; 15 -webkit-transition: all 0.218s; 16 transition: all 0.218s; 17} 18 19/* ★1 サインインボタンのフォーカス時、背景色を変更 */ 20.btnlog.btn-signin:hover, 21.btnlog.btn-signin:active, 22.btnlog.btn-signin:focus { 23 background: rgb(200, 97, 33); /* background-colorからbackgroundに変更 */ 24 /* background-color: rgb(12, 97, 33); */ 25}

####補足
一応の解説ですがbackgroundなどの一度でまとめて指定できるショートハンドプロパティは指定していないものに関しては初期値を適用します。
今回background: rgb(200, 97, 33);こう書いたのはbackground-color以外は初期値にするんだよって意味ですね。

投稿2017/05/31 03:21

編集2017/05/31 03:31
gin

総合スコア2722

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

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

0

bootstrapにより、背景 (background-image) が指定されています。
該当のボタンに btn-primary を使わないようにするか、別の background-image
で上書きしてみてはどうでしょうか?

投稿2017/05/31 01:32

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問