【6日でできるHTML＆CSS入門】ログイン画面

以下、「ログイン画面」について、構成・解説・サンプルHTML・使用タグ表まで含めて、Webエンジニア向けの分かりやすい記事としてまとめます。
サンプルHTMLも内容を変更し、メッセージも新しくしています。

ログイン画面

序章

Webアプリケーションや多くのWebサービスで欠かせないのが「ログイン画面」です。
　ログイン画面は、ユーザーにIDやパスワードなどを入力してもらい、本人確認を行うための基本的なインターフェースです。
　ここでは、シンプルなログイン画面の構造と、その実装方法について解説します。実際のHTMLサンプルを使いながら、パスワード入力やボタンの実装、使われる主なタグやCSSについても学びましょう。

１．ログイン画面の基本構造

1.1. フォーム要素の配置

ログイン画面は、ユーザーID（またはメールアドレス）とパスワードの入力欄、そしてログインボタンで構成されることが一般的です。

サンプルHTML（login-sample.html）

ファイル名： lesson44_1.html

<!DOCTYPE html>
<html>
<head>
  <title>ユーザーログイン</title>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 40px; }
    .login-form {
      width: 320px;
      margin: 40px auto;
      background: #f4f7fb;
      padding: 22px 30px 18px 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(80,120,200,0.08);
    }
    h1 {
      text-align: center;
      font-size: 1.5em;
      margin-bottom: 18px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 7px;
      font-size: 1em;
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid #ccc;
      background: #fff;
    }
    button {
      width: 100%;
      padding: 10px 0;
      background: #258be6;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      margin-top: 5px;
      transition: background 0.2s;
    }
    button:hover {
      background: #1663ac;
    }
  </style>
</head>
<body>
  <form class="login-form" method="POST" action="login-sample.html">
    <h1>ユーザーログイン</h1>
    <div class="form-group">
      <label for="userid">ユーザーID</label>
      <input type="text" id="userid" name="userid" placeholder="ユーザーIDを入力">
    </div>
    <div class="form-group">
      <label for="pw">パスワード</label>
      <input type="password" id="pw" name="pw" placeholder="パスワードを入力">
    </div>
    <button type="submit">ログイン</button>
  </form>
</body>
</html>

表示結果

「ユーザーログイン」の見出し
ユーザーID（テキストボックス）
パスワード（入力内容が「●」で非表示になる）
ログインボタン（押すとフォームを送信）

1.2. パスワード入力のポイント

パスワード欄は、<input type="password">とすることで入力内容が伏字（「●」など）になります。
また、セキュリティ上、ログインフォームは通常 method="POST" で送信します。
（GETだと入力内容がURLに表示されるため、パスワード入力欄には適しません）

２．タグと属性・CSSの解説

2.1. 使用したHTMLタグと主な属性

タグ・属性	解説・使い方例
<form>	入力欄やボタンをグループ化し、送信先や送信方法を指定
<label>	入力欄の説明や見出し部分
<input type="text">	1行テキスト入力欄（ここではユーザーID用）
<input type="password">	パスワード入力欄（入力内容は画面で非表示）
<button type="submit">	フォームの送信ボタン
method="POST"	入力内容をURLに載せずに送信する。
name	入力データの識別子。送信時にサーバーで値を取得する。
placeholder	入力欄の案内文（入力前のグレー表示）

2.2. CSSのポイント

.login-formで全体の幅・余白・角丸・影など見た目を整えています。
label・input・buttonのスタイルを分け、シンプルかつ分かりやすいデザインにしています。
レスポンシブ対応が必要な場合はmax-widthなどを加えると良いでしょう。

まとめ

ログイン画面はWebサイトやWebアプリで頻繁に使われる重要なフォームです。
　<input type="password">を使うことでパスワードを安全に入力でき、method="POST"を使うことでデータがURLに漏れないように送信できます。
　本記事のサンプルをもとに、より複雑なログイン画面や追加機能（パスワードの表示切り替えやバリデーションなど）にもチャレンジしてみてください。