リンク内容# 前提・実現したいこと
起こっている現象
指定したクラスに背景色を設定したが、希望通りに背景色が設定できない。

実現したいこと

添付した画像の赤枠の範囲内に背景色を設定したい。

調べたのですが分からずでご教授いただけると幸いです。

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.0">
7  <link rel="stylesheet" href="css/styles.css">
8  <title>Document</title>
9</head>
10<body>
11    <div class="login">
12      <form action="post">
13        <div class="spacing">
14         <label for="uid">email:</label>
15          <input type="email" name="mail" placeholder="メールアドレス"><br>
16          <label for="pwd">password:</label>
17           <input type="password" name="password" placeholder="パスワード"><br>
18           <div class="loginbtn">
19             <input type="submit" value="ログイン">
20            </div>
21            <div class="clearbtn">
22              <input type="reset" style="width:70px;" name="reset" value="クリア">
23            </div>
24            <br>
25            <div class="link">
26              <a href="#">新規登録はこちら</a>
27            </div>
28      </form>
29  </body>
30</html>

css
1.login{
2
3  position: absolute;
4    top: 50%;
5    left: 50%;
6     transform: translate(-50%, -50%); 
7     color: white;
8     background: blue;
9}
10
11label{
12  display: inline-block;
13    text-align: right;
14    width: 150px;
15    f
16}
17
18.loginbtn{
19  margin-top: 10px;
20  position: absolute;
21  left:40%;
22}
23
24.clearbtn{
25  margin-top: 10px;
26  position: absolute;
27  left:65%;
28}
29
30.link{
31  margin-top: 50px;
32  position: absolute;
33  left:21%;

recal

2022/06/04 11:24 編集

>>添付した画像の赤枠の範囲内に背景色を設定したい。赤枠が付いている要素がコード上に存在しないようですし赤枠がどうゆうサイズ感なのかわかりません、補足可能ですか？

mario11222

2022/06/05 00:50

赤枠の要素が<div class="login">だと考えてます。サイズ感については画像を変更したのでご確認おねがいできないでしょうか。 (補足がうまくできてないのは薄々感じていますが、すみません)

行動規範の内容に同意します

回答1件

ベストアンサー

<div class="login"></div>

上記要素にpaddingを設定してみてください！

{余談ですが、ログインボタン, クリアボタン, リンクなどをposition: absoluteで位置指定されている件につきまして、その実装方法はおすすめしません。（position: absoluteは絶対位置を指定するため。今のままで上記paddingの設定をすると、"リンクが隠れる or 期待通りの位置でなくなる"のではと思います。）
ですので、marginなどで位置調整すべきかと...!}

投稿2022/06/04 11:38

編集2022/06/04 11:39