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

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

ただいまの
回答率

88.91%

色がかぶさる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 931

revoiot

score 163

ログインページを作ろうとしているのですが、#form(フォーム全体)のbackground-colorに、灰色を指定したところピンク色のログインボタンが、灰色がかってしまいました。

これを改善するために、ボタンに#formよりz-indexを高く指定したりしたのですが、うまくいきませんでした。

なぜログインボタンが灰色ががってしまうのでしょうか?

どうすれば、ボタンを上にもってきて、本来の色をだすことができるでしょうか?

ご回答いただけると幸いです。よろしくお願いします。

イメージ説明
イメージ説明

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;
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

rgba(198, 194, 194, 0.13);
のうち、0.13は透過度になります。1未満の値を設定すると透過がかかってしまい、下にある要素とブレンドした色合いになります。CSSのOpacityしてるようなイメージです。

どうしても行いたい場合、変更したい要素の↓に重ねるように同じ大きさの要素を配置、↓の要素には背景白を指定して(background:white)あげれば綺麗に見えるかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/10 12:58

    非常にわかりやすいご回答いただきありがとうございます。さきほど、ログインのボタンの背景色を削除したところ、灰色のボタンが現れました。(画像追加)

    この灰色のボタンはどこで指定されているのでしょうか?CSSを見たのですが、どこか分かりませんでした。

    キャンセル

  • 2017/05/10 13:11

    <input type="submit" >
    のデフォルト背景色じゃないでしょうか。指定しないとグレーっぽい色になります。
    <button>
    タグと同様のはず。

    キャンセル

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

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

関連した質問

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