質問編集履歴

1 画像追加

revoiot

revoiot score 163

2017/05/10 12:54  投稿

色がかぶさる
ログインページを作ろうとしているのですが、#form(フォーム全体)のbackground-colorに、灰色を指定したところピンク色のログインボタンが、灰色がかってしまいました。
これを改善するために、ボタンに#formよりz-indexを高く指定したりしたのですが、うまくいきませんでした。
なぜログインボタンが灰色ががってしまうのでしょうか?
どうすれば、ボタンを上にもってきて、本来の色をだすことができるでしょうか?
ご回答いただけると幸いです。よろしくお願いします。
![イメージ説明](26109a72667b65d48000b420bb18a0a0.png)
![イメージ説明](1629a62acc1a5e2112bc90a39bf2102b.png)  
 
 
**HTML**
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>formsample</title>
   <link rel="stylesheet" type="text/css" href="sakura2.css" media="all" />
</head>
<body>
<div id="form">
   <div class="logo">
     <img src="logo1.png" width="130px">
   </div>
   <form action="post" class="form2">
       <p class="u1">ユーザ名</p>
       <p class="username"><input type="text" name="username" maxlength="26" autocomplete="OFF" /></p>
       <p class="u2">パスワード</p>
       <p class="password"><input type="password" name="password" maxlength="26" autocomplete="OFF" /></p>
       <p class="check"><input type="checkbox" name="checkbox"/>パスワードを保存</p>
       <p class="submit"><input type="submit" value="ログイン"/></p>
       <p class="password2"><a href="#">パスワードを忘れたら</a></p>
   </form>
</div>
</body>
</html>
コード
```
**CSS**
```ここに言語を入力
body,p,form,input{margin: 0;}
#form{
   width: 350px;
   margin: 30px auto;
   padding: 20px;
   border: 1px solid #555;
   position: relative;
   z-index:1;
}
form p{
   font-size: 14px;
}
.form2{
 margin-top:130px;
 text-align: center;
}
.logo{
 position:absolute;
 top: 3%;
 left: 35%;
}
.u1{
 margin-right:190px;
}
.u2{
 margin-right:180px;
}
.check{
 margin-right:130px;
}
.username {
   margin-bottom: 20px;
}
.password {
   margin-bottom: 5px;
}
.password2 a{
 text-decoration: none;
}
.password2 {
 margin-top:20px;
}
input[type="text"],
input[type="password"] {
   width: 250px;
   padding: 4px;
   font-size: 14px;
   text-align:center;
}
.submit{
   text-align: center;
   z-index:1000;
}
/* skin */
#form{
 border-radius: 6px;
 font-family: Courier New;
 font-size: 20px;
 padding: 20px 20px 20px 20px;
 text-decoration: none;
 background:rgba(198, 194, 194, 0.13);
}
.submit input {
 background: rgba(222, 143, 193, 0.28);
 border-radius: 10px;
 font-family: Arial;
 color: black;
 font-size: 20px;
 padding: 13px 130px;
 text-decoration: none;
 border-style: solid;
 border-width:1px;
 margin-top:20px;
}
.submit input:hover {
 opacity:0.7;
 text-decoration: none;
}
#form{
 -webkit-border-radius: 6;
 -moz-border-radius: 6;
 border-radius: 6px;
 font-family: Courier New;
 color: black;
 font-size: 20px;
 padding: 20px 20px 20px 20px;
 text-decoration: none;
}
コード
```
  • CSS3

    4393 questions

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

  • HTML5

    8487 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る