この記事では、前回の続きとしてCSSの実装とコードを解説していきます。
前回の記事を見ていない方は、ご覧いただいてからこの記事を読んでみてください。
HTMLのみの状態
CSSを適応せず、HTMLのみの状態が以下の通りです。
装飾がなく、ユーザーが快適に使うにはレイアウトを変更する必要があります。
完成形
下記の状態が雛形の完成形です。
先程の状態に比べて、入力画面が分かりやすく、それぞれの項目に丸みを帯びています。
CSSコード
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.login-form {
width: 100%;
}
.input-group {
margin-bottom: 15px;
}
.input-group input {
width: 100%;
padding: 15px;
border-radius: 25px;
border: 1px solid #ddd;
box-sizing: border-box;
font-size: 14px;
}
.links {
margin-bottom: 20px;
}
.links a {
color: #007bff;
text-decoration: none;
margin-right: 15px;
}
.links a:hover {
text-decoration: underline;
}
.login-button {
background-color: purple;
color: white;
padding: 15px;
border-radius: 25px;
border: none;
width: 100%;
font-size: 16px;
cursor: pointer;
}
.login-button:hover {
background-color: #359ed4;
}
.error-message {
color: red;
margin-top: 20px;
display: none; /* 初期状態では非表示にしておく */
}
CSSコード解説
＜bodyタグ＞
body {
font-family: Arial, sans-serif;
//Fontの設定
background-color: #f5f5f5;
//背景色を薄グレーの設定
display: flex;
//コンテンツを横並びで整列
justify-content: center;
//水平方向（横）に中央配置
align-items: center;
//垂直方向（縦）に中央配置
height: 100vh;
//高さをブラウザの表示範囲と同じに設定
margin: 0;
//ブロックの余白を０に設定
}※vhは、ビューポートの高さに基づいた単位で、ユーザーが画面の大きさを変えても、要素の高さは画面に応じて変化する仕様にできます。
loginフォーム
.login-container {
background-color: white;
//背景を白に設定
padding: 40px;
//ブロック内側の余白を40pxに設定
border-radius: 10px;
//角を10pxの半径で丸める
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
//影を付ける。横方向に0px、縦方向に2px、ぼかし具合10px、色は黒の透明度10%
text-align: center;
//中央揃え
}
.login-form {
width: 100%;
//login-contenerに対して横幅を100%使って表示
}.input-group
.input-group {
margin-bottom: 15px;
//各入力欄の下に15pxの外側の余白を設定
}.input-group input
.input-group input {
width: 100%;
//各入力欄の横幅を100%に設定
padding: 15px;
//入力欄のテキストと境界の間に15pxの内側余白を作る
border-radius: 25px;
//入力欄の角を25pxの半径で丸める
border: 1px solid #ddd;
//薄いグレー色の枠線を1pxの太さで設定
box-sizing: border-box;
//枠線やpaddingを含めて要素の幅や高さを計算する設定で、widthにpaddingやborderが含まれる
font-size: 14px;
//フォントサイズを14pxに設定
}.links
.links {
margin-bottom: 20px;
//リンクの下に20pxの外側の余白を設定して、下のLoginボタンとの間にスペースを作る
}.links a
.links a {
color: #007bff;
//リンクテキスト（パスワード忘れや新規登録）の色を青（#007bff）に設定
text-decoration: none;
//リンクの下線を無くす
margin-right: 15px;
//リンク間に15pxの右側の余白を設定して、リンク同士の間隔を調整
}.links a:hover
.links a:hover {
//リンク部分にマウスが被さった時の処理
text-decoration: underline;
//下線を表示するように設定
}
.login-button
.login-button {
background-color: purple;
//Loginボタンの背景色を紫に設定
color: white;
//Loginボタン内のテキストの色を白に設定
padding: 15px;
//Loginボタンの内側余白を15pxに設定して、テキストとボタンの間にスペースを作る
border-radius: 25px;
//Loginボタンの角を25pxの半径で丸める
border: none;
//Loginボタンの枠線を消す
width: 100%;
//Loginボタンの幅を親要素(login-container)に対して100%に設定
font-size: 16px;
//Loginボタンのテキストサイズを16pxに設定
cursor: pointer;
//Loginボタンにマウスが被さった時にポインターの形として表示させる
}.login-button:hover
.login-button:hover {
background-color: #359ed4;
//Loginボタンにマウスが被さった時、ボタンの背景色が青色に変わる
}.error-message
.error-message {
color: red;
//エラーメッセージのテキスト色を赤に設定
margin-top: 20px;
//エラーメッセージの上に20pxの余白を作り、他の要素との間隔をあける
display: none;
//初期状態でエラーメッセージを非表示にして、エラーが発生したときに表示されるようにする設定
}最後までご覧いただき、ありがとうございました。この記事では、ログインフォームを作る際のＣＳＳコードについて解説しました。一行ずつ解説がある記事は中々ないため、同じようなプロパティでもクラスやブロックによって、定義や範囲が変わってくるため、使用目的に応じた使い分けが必要になります。
今後も、ＨＴＭＬやＣＳＳだけでなく、プログラミング学習を進める中で必要に応じてコード解説も取り入れていきます。
他の記事も是非参考にしてみてください！
コメント