# ログイン画面の骨格のCSS実装

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

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/login-card-page/

## HTML

```html
<div class="auth-page">
  <form class="auth-card">
    <h1>ログイン</h1>
    <label for="mail">メールアドレス</label>
    <input id="mail" type="email" autocomplete="email" placeholder="you@example.com" />
    <label for="pw">パスワード</label>
    <input id="pw" type="password" autocomplete="current-password" />
    <button type="submit">ログイン</button>
    <a class="forgot" href="#">パスワードをお忘れですか？</a>
  </form>
</div>
```

## CSS

```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](https://www.css-dictionary.com/property/display-grid.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [max-width](https://www.css-dictionary.com/property/max-width.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)