ログイン画面の骨格

レイアウトパターンBaseline 広く利用可能

画面中央にフォームカードを置く認証ページの骨格。place-itemsの中央配置とmax-widthで、どの画面幅でも整うテンプレートです。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML

CSS

.auth-page {
  display: grid;
  place-items: center;   /* 縦横中央 */
  min-height: 100vh;
  margin: -16px;         /* デモ用: プレビューのbody余白を打ち消す */
  padding: 16px;
  box-sizing: border-box;
  background: #f3ecd9;
}

.auth-card {
  width: 100%;
  max-width: 320px; /* 広い画面では固定幅、狭い画面では100% */
  display: grid;
  gap: 6px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 12px;
}

.auth-card h1 {
  margin: 0 0 12px;
  font-size: 20px;
  text-align: center;
}

.auth-card label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5c5445;
}

.auth-card input {
  padding: 10px 12px;
  border: 1px solid #cbbfa5;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

.auth-card input:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: -1px;
}

.auth-card button {
  margin-top: 14px;
  padding: 11px 0;
  border: none;
  border-radius: 6px;
  background: #b0413e;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-card button:hover { background: #97362f; }

.auth-card button:focus-visible {
  outline: 2px solid #1a1712;
  outline-offset: 2px;
}

.forgot {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #8a6d3b;
}

仕組みの解説

外側は display: grid + place-items: center + min-height: 100vh の3行で画面中央配置が完成します。カードは width: 100% と max-width の組み合わせが要で、広い画面では320pxに収まり、狭い画面では親のpaddingを残して全幅に縮みます。autocomplete属性（email / current-password）を正しく付けると、パスワードマネージャが確実に反応します。

実装のポイント

モバイルのアドレスバー対策にはmin-height: 100dvhが確実です。新規登録画面ではautocomplete="new-password"に変えます。

AIに依頼するときの文例

ログイン画面の骨格を作ってください。display: grid + place-items: centerで画面中央にカードを置き、width: 100% + max-widthでレスポンシブ対応、autocomplete属性も正しく設定してください。

使っているプロパティ

display: grid place-items max-width gap border-radius