シンプルなログインページのデザイン

サイトのロゴとタイトルが左上
ログイン情報が画面の中央にあるだけのシンプルなログインフォームのデザインのつくり方

【手順1】上下左右中央ぞろえにする

html

<body>
<div id="wrapper">
ログイン情報の入力フォーム
</div>
</body>

css

#wrapper{
height:100vh; /* 上下中央にするのに高さは必須 */
display: flex;
justify-content: center; /* 横並びの要素を中央寄せで配置 */
align-items: center; /* 上下の中央ぞろえ */
}

ここまでで上下左右中央ぞろえになっていることを確認。

【手順2】入力フォームの各項目を縦並びにする

メールアドレスやパスワードなどを入力するインプットフォームや送信ボタンを縦並びにする。

<div class="vertical_box">
<div>メールアドレス</div>
<input type="text">
<div>パスワード</div>
<input type="text">
<input type="submit" value="送信" class="normal_bt1">
</div>

css

.vertical_box {
display:flex;
flex-direction:column;
text-align:center;align-items: center;
justify-content: center;
}
タイトルとURLをコピーしました