HTML/CSS普段書かないインフラエンジニアなので、これだけしかやっていないのに結構時間がかかってしまった。。。
あとQiitaにどうやってまとめればいいかもわからない。色々試行錯誤だな～💦
表示
Sign-upのボタン上にカーソルを持っていくと色が変わるようにもしてみました。
コード
test.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>formのテスト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="post" class="sign-up-group">
<div id="sign-up-icon">
<img src="contact_user_add_user_new_user_icon_250756.png">
</div>
<h1 id="sign-up-title">Please Sign-up</h1>
<div class="sign-up-form">
<input type="text" id="username" autocomplete="on" placeholder="Username" required="" class="sign-up-content">
</div>
<div class="sign-up-form">
<input type="password" id="password" autocomplete="off" placeholder="Password" required="" class="sign-up-content">
</div>
<div id="submit-form">
<button id="sign-up-button" type="submit">Sign-up</button>
</div>
</form>
</body>
</html>
style.css
#sign-up-icon {
text-align: center;
}
#sign-up-title{
text-align: center;
font-family: serif;
}
.sign-up-group {
width: fit-content;
margin: auto;
padding: 3%;
}
.sign-up-form {
padding-top: 3%;
width: fit-content;
margin:auto;
}
.sign-up-content {
border-radius: 4px;
font-family: serif;
}
#submit-form{
text-align: center;
padding-top: 5%;
}
#sign-up-button {
color: white;
background-color: blue;
width: 77%;
border-radius: 4px;
font-family: serif;
}
#sign-up-button:hover {
background-color: midnightblue;
}
学んだこと（箇条書き）
- inputでautocompleteをonに設定するとWebブラウザ側で「同じ入力フィールドに入力された以前の値が呼び出されるようになる」以下のように。逆にoffにするとこれが実装されなくなるみたいです。
- inputでrequiredを設定しておくと、入力がマストとなる。
- inputのplaceholderを記入しておくと、入力欄にそれが表示されるようになる。
- inputのtypeでpasswordを指定すると、入力中"●"の表記になる。
- buttonとinputでtype="submit"が指定出来るが、buttonでやるのがベターみたい。
- classをCSSで指定するときは".class名"とする。idをCSSで指定するときは"#id名"と指定する。
- CSSで"class名/id名:hover"とすることで、マウスカーソルが上に来た時の変化を示せるようになる。
参考