6日でできる 新HTML&CSS入門｜ログイン画面の基本構造

ログイン画面は、ユーザーとWebサービスをつなぐ入口。
ID、パスワード、送信ボタンの基本構造を理解して、分かりやすく安全性に配慮したフォームを作ろう。

Webアプリケーションや会員制サイト、管理画面などでは、ログイン画面がよく使われます。ログイン画面は、ユーザーIDやメールアドレス、パスワードを入力してもらい、本人確認を行うためのフォームです。

ログイン画面は一見シンプルに見えますが、Webサイトの入口になる大切な画面です。入力欄が分かりにくかったり、ボタンが押しにくかったりすると、ユーザーは操作に迷ってしまいます。また、パスワードを扱うため、送信方法や入力欄の種類にも注意が必要です。

基本的なログイン画面は、ユーザーIDまたはメールアドレスの入力欄、パスワード入力欄、ログインボタンで構成されます。HTMLではform、label、input、buttonなどを使って作ります。CSSではフォーム全体の幅、余白、背景色、角丸、ボタンの色などを整え、見やすく入力しやすい画面にします。

この記事では、ログイン画面の基本構造、パスワード入力欄の作り方、POST送信を使う理由、よく使うタグや属性、CSSで見た目を整えるポイントを、サンプルHTMLを使って分かりやすく解説していきます。

ログイン画面は入力と送信のまとまり

ログイン画面は、ユーザーから認証に必要な情報を入力してもらうフォームです。一般的には、ユーザーIDまたはメールアドレスと、パスワードの2つを入力してもらいます。そして、ログインボタンを押すことで、その情報をサーバーへ送信します。

ログイン画面でよく使われる部品は次のとおりです。

部品役割
見出し何の画面かを分かりやすく示す
ユーザーID入力欄ユーザーを識別するためのIDやメールアドレスを入力する
パスワード入力欄本人確認に使うパスワードを入力する
ログインボタン入力内容を送信する
label入力欄の意味を説明する
form入力欄全体をまとめて送信する

ログイン画面では、入力欄の数を必要最小限にすることも大切です。最初から多くの情報を求めると、ユーザーが負担に感じやすくなります。基本は、ユーザーIDとパスワードを中心に、シンプルで分かりやすい構成にします。

図1：ログイン画面は本人確認に必要な入力欄で構成される

この図から分かること

ログイン画面は、ユーザーIDやメールアドレス、パスワードを入力して送信するためのフォームです。formで全体を囲み、labelで入力欄の意味を示し、inputで入力欄を作り、buttonで送信操作を行います。シンプルな構造ですが、Webサービスの入口としてとても重要な画面です。

formタグでログインフォーム全体を囲む

ログイン画面では、入力欄とボタンをformで囲みます。formは、入力されたデータをまとめて送信するためのタグです。

<form method="POST" action="login-check.html">
  ログインに必要な入力欄をここに書く
</form>

formでは、主にmethod属性とaction属性を指定します。

属性役割
methodデータの送信方法を指定する
actionデータの送信先を指定する

ログイン画面では、通常method="POST"を使います。GETを使うと、入力内容がURLの末尾に表示されるため、パスワードのような情報を送る画面には向いていません。

ただし、POSTを使えばそれだけで完全に安全になるわけではありません。実際のログイン画面では、HTTPSで通信を暗号化し、サーバー側で適切な認証処理を行う必要があります。HTMLの学習段階では、まずPOSTで送信する考え方を押さえておきましょう。

ユーザーID入力欄はinput type="text"で作る

ユーザーIDやログインIDを入力してもらう場合は、input type="text"を使います。メールアドレスでログインする場合はinput type="email"を使うこともありますが、ここでは基本例としてtextを使います。

<label for="login-id">ユーザーID</label>
<input type="text" id="login-id" name="login-id" placeholder="ユーザーIDを入力">

inputには、id、name、placeholderなどの属性を指定します。

属性役割
type="text"1行のテキスト入力欄を作る
idlabelのfor属性と対応させる
name送信時のデータ名になる
placeholder入力前に案内文を表示する

name属性は、送信時に重要です。たとえば、name="login-id"の入力欄にuser01と入力して送信すると、login-id=user01のような形でデータとして扱われます。

パスワード入力欄はinput type="password"で作る

パスワード欄には、input type="password"を使います。type="password"を指定すると、入力した文字が画面上では伏字で表示されます。

<label for="login-password">パスワード</label>
<input type="password" id="login-password" name="login-password" placeholder="パスワードを入力">

この指定により、ユーザーが入力したパスワードは、画面上では●や黒丸のような記号で表示されます。周囲の人に入力内容を見られにくくするための基本的な指定です。

ただし、type="password"は画面上の表示を隠すためのものであり、通信そのものを暗号化する機能ではありません。実際のログインフォームでは、HTTPSやサーバー側の認証処理と組み合わせることが大切です。

指定役割
input type="password"入力内容を画面上で伏字表示にする
nameパスワードの送信データ名を指定する
placeholder入力前の案内文を表示する

図2：パスワード欄はtype="password"で伏字表示にする

この図から分かること

input type="password"を使うと、入力した文字が画面上では伏字で表示されます。ログイン画面では、パスワードをそのまま見せないためにこの指定を使います。ただし、これは表示を隠すための仕組みであり、実際の安全性にはHTTPSやサーバー側の処理も関係します。

labelで入力欄の意味を分かりやすくする

ログイン画面では、入力欄の上にユーザーIDやパスワードといった説明を表示します。この説明にはlabelを使います。

labelのfor属性とinputのid属性を同じ値にすると、ラベルと入力欄を関連付けられます。

<label for="login-id">ユーザーID</label>
<input type="text" id="login-id" name="login-id">

このようにしておくと、ユーザーがラベル部分をクリックしたときに、対応する入力欄へフォーカスできます。操作しやすくなるだけでなく、スクリーンリーダーなどの補助技術にも入力欄の意味が伝わりやすくなります。

フォームでは、入力欄だけを並べるのではなく、labelとセットで作ることを意識しましょう。

ログインボタンはbutton type="submit"で作る

フォームを送信するボタンには、button type="submit"を使います。

<button type="submit">ログイン</button>

type="submit"を指定したボタンを押すと、form内の入力内容がmethodとactionに従って送信されます。

ボタンのtype役割
submitフォームを送信する
reset入力内容を初期状態に戻す
buttonJavaScriptなどで処理を付ける通常ボタン

ログイン画面では、基本的にsubmitボタンを使います。buttonはCSSで幅、背景色、文字色、角丸、hover時の色などを指定すると、押しやすく分かりやすい見た目になります。

ログイン画面のサンプルHTML

ここでは、ユーザーIDとパスワードを入力してログインボタンで送信する、シンプルなログイン画面を作ります。CSSも同じHTML内に書き、カード型のフォームとして見やすく整えます。

ファイル名： lesson44_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログインフォームの基本</title>
<style>
  body {
    font-family: sans-serif;
    padding: 40px;
    background-color: #f2f6fb;
  }

  .login-card {
    width: 330px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 24px 30px 22px;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(30, 90, 160, 0.12);
    border: 1px solid #d8e2ef;
  }

  h1 {
    text-align: center;
    font-size: 1.5em;
    margin: 0 0 20px;
    color: #1f3f66;
  }

  .form-group {
    margin-bottom: 16px;
  }

  label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #333333;
  }

  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #b8c6d6;
    background-color: #ffffff;
  }

  input[type="text"]:focus,
  input[type="password"]:focus {
    outline: none;
    border-color: #258be6;
    box-shadow: 0 0 0 3px rgba(37, 139, 230, 0.15);
  }

  button {
    width: 100%;
    padding: 11px 0;
    background-color: #258be6;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6px;
    transition: background-color 0.2s;
  }

  button:hover {
    background-color: #1663ac;
  }
</style>
</head>
<body>
  <form class="login-card" method="POST" action="login-check.html">
    <h1>ログイン</h1>

    <div class="form-group">
      <label for="login-id">ユーザーID</label>
      <input type="text" id="login-id" name="login-id" placeholder="ユーザーIDを入力">
    </div>

    <div class="form-group">
      <label for="login-password">パスワード</label>
      <input type="password" id="login-password" name="login-password" placeholder="パスワードを入力">
    </div>

    <button type="submit">ログインする</button>
  </form>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、画面中央にカード型のログインフォームが表示されます。フォームの上部にはログインという見出しがあり、その下にユーザーID入力欄、パスワード入力欄、ログインするボタンが並びます。

ユーザーID欄には通常の文字を入力できます。パスワード欄はtype="password"になっているため、入力内容が画面上では伏字で表示されます。ログインするボタンを押すと、formのmethodとactionに従って入力内容が送信されます。

また、入力欄をクリックすると枠線が青くなり、どの入力欄が選択されているのか分かりやすくなります。ボタンにマウスを乗せると背景色が濃くなり、操作できることが伝わりやすくなります。

サンプルHTMLの構造を確認する

今回のサンプルでは、ログイン画面に必要な要素をformの中にまとめています。

部分役割
form class="login-card"ログインフォーム全体をまとめる
h1画面の見出しを表示する
div class="form-group"入力欄ごとのまとまりを作る
label入力欄の説明を表示する
input type="text"ユーザーIDの入力欄を作る
input type="password"パスワード入力欄を作る
button type="submit"ログイン送信ボタンを作る

.form-groupで入力欄ごとにまとまりを作ると、CSSで余白を指定しやすくなります。ログイン画面では入力項目が少ないため、項目ごとの余白やラベルの位置を整えるだけでも、かなり見やすくなります。

method="POST"を使う理由

ログインフォームでは、method="POST"を使うのが一般的です。GETとPOSTでは、送信データの扱われ方が異なります。

送信方法特徴ログイン画面との相性
GET入力内容がURLの末尾に付いて送信されるパスワード送信には向かない
POST入力内容がリクエスト本文に含まれるログインフォームでよく使われる

GETで送信すると、URLに入力内容が表示される可能性があります。たとえば、ユーザーIDやパスワードがURLに含まれてしまうと、ブラウザの履歴やサーバーログに残る危険があります。

そのため、ログイン画面ではPOSTを使います。ただし、POSTはURLに表示されにくいだけで、通信内容を自動で暗号化するわけではありません。実際のWebサービスでは、HTTPSを使うことが重要です。

図3：ログイン情報はPOSTで送信し、HTTPSと組み合わせて守る

この図から分かること

ログイン画面では、入力内容をGETではなくPOSTで送信するのが一般的です。POSTを使うと、入力内容がURLに直接表示されにくくなります。ただし、POSTだけで安全になるわけではありません。実際のログイン処理では、HTTPSによる通信保護やサーバー側の認証処理も必要です。

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

ログイン画面で使うタグや属性を整理しておきます。

タグ・属性解説・使い方
form入力欄やボタンをまとめ、送信方法と送信先を指定する
label入力欄の説明を表示する
input type="text"ユーザーIDやメールアドレスなどの1行入力欄を作る
input type="password"パスワード入力欄を作り、入力内容を伏字表示にする
button type="submit"フォームを送信するボタンを作る
method="POST"入力内容をURLに載せずに送信するためによく使う
actionフォームの送信先を指定する
name送信時のデータ名を指定する
idlabelのfor属性と対応させる
placeholder入力前に案内文を表示する
forlabelと入力欄を関連付ける

ログインフォームでは、name属性も重要です。サーバー側では、name属性をもとに送信された値を受け取ります。たとえば、name="login-id"やname="login-password"のように指定しておくと、それぞれの入力内容を識別しやすくなります。

CSSでログイン画面を見やすく整える

ログイン画面は、フォームの数が少ないからこそ、見た目の整え方が大切です。幅、余白、背景色、角丸、影などを整えると、入力しやすく安心感のある画面になります。

サンプルでは、.login-cardにフォーム全体の見た目を指定しています。

.login-card {
  width: 330px;
  margin: 40px auto;
  background-color: #ffffff;
  padding: 24px 30px 22px;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(30, 90, 160, 0.12);}

widthでフォームの幅を決め、margin: 40px auto;で中央寄せにしています。background-colorで白い背景にし、paddingで内側に余白を作っています。border-radiusで角を丸くし、box-shadowで少し影を付けることで、カードのような見た目になります。

入力欄のCSSのポイント

入力欄にはwidth: 100%;を指定し、フォーム幅いっぱいに広がるようにしています。

.login-card {
  width: 330px;
  margin: 40px auto;
  background-color: #ffffff;
  padding: 24px 30px 22px;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(30, 90, 160, 0.12);
}

ここで大切なのがbox-sizing: border-box;です。これを指定すると、widthにpaddingやborderを含めて計算できます。入力欄がフォームの幅からはみ出しにくくなるため、フォーム制作ではよく使われます。

また、focus時のスタイルも指定しています。

input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: #258be6;
  box-shadow: 0 0 0 3px rgba(37, 139, 230, 0.15);}

入力中の欄が分かりやすくなると、ユーザーは今どこに入力しているのかを確認しやすくなります。outlineを消す場合は、代わりに枠線や影で分かりやすいフォーカス表示を付けることが大切です。

ボタンのCSSのポイント

ログインボタンは、フォームの送信操作を行う重要な部品です。幅を100%にして入力欄とそろえると、まとまりのある見た目になります。

button {
  width: 100%;
  padding: 11px 0;
  background-color: #258be6;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

cursor: pointer;を指定すると、マウスを乗せたときにクリックできることが分かりやすくなります。また、hover時に背景色を変えることで、操作できるボタンだと伝わりやすくなります。

button:hover {
  background-color: #1663ac;
}

ボタンは見た目だけでなく、押しやすさも大切です。paddingを十分に取り、文字が読みやすいサイズになるように調整しましょう。

レスポンシブ対応を考える場合

今回のサンプルでは、フォームの幅を330pxにしています。スマートフォンでも比較的収まりやすい幅ですが、より柔軟にする場合はmax-widthとwidthを組み合わせるとよいです。

.login-card {
  width: 90%;
  max-width: 360px;
}

この指定にすると、広い画面では最大360pxまで、狭い画面では画面幅の90%で表示されます。スマートフォンで左右に余白を残しながら、フォームが画面からはみ出しにくくなります。

指定役割
width: 90%;画面幅に合わせてフォームを縮小する
max-width: 360px;広い画面で大きくなりすぎないようにする
box-sizing: border-box;paddingやborderを含めて幅を計算する

ログイン画面はスマートフォンで使われることも多いため、画面幅に合わせて自然に表示できるようにしておくと安心です。

ログイン画面で意識したい使いやすさ

ログイン画面は、ユーザーが何度も使う可能性がある画面です。そのため、分かりやすく、迷いにくく、入力しやすいことが大切です。

確認することチェック内容
見出しが分かりやすいかログイン画面であることがすぐ分かるか
labelがあるか入力欄の意味が明確か
placeholderが適切か入力前の案内が分かりやすいか
パスワード欄がtype="password"か入力内容が伏字表示になるか
methodがPOSTかURLに入力内容が出にくい送信方法か
ボタンが押しやすいか幅、余白、色が分かりやすいか
スマートフォンで見やすいか画面幅からはみ出していないか

ログイン画面では、デザインを派手にするよりも、入力欄とボタンの位置が分かりやすいことが重要です。必要な情報だけを整理して配置し、余白を適切に取ると、落ち着いた使いやすい画面になります。

実際のログイン機能で必要になること

HTMLだけでは、実際のログイン認証は完了しません。HTMLで作れるのは、ユーザーIDとパスワードを入力して送信する画面です。送信された情報を確認し、正しいユーザーかどうかを判断するには、サーバー側の処理が必要です。

実際のWebサービスでは、次のような仕組みが関係します。

項目内容
サーバー側処理送信されたIDとパスワードを確認する
HTTPS通信内容を保護する
パスワード管理パスワードを安全な形で保存する
入力チェック未入力や形式の誤りを確認する
エラーメッセージログイン失敗時に分かりやすく案内する
セッション管理ログイン状態を管理する

HTMLとCSSの学習では、まずログイン画面の形を作るところから始めます。そのうえで、サーバー側の処理やセキュリティの考え方へ進むと、ログイン機能全体の理解が深まります。

ログイン画面を作るときに大切な考え方

ログイン画面は、ユーザーIDとパスワードを入力して送信するための基本的なフォームです。formで全体を囲み、labelで入力欄の意味を示し、input type="text"でユーザーID欄、input type="password"でパスワード欄を作ります。送信にはbutton type="submit"を使います。

パスワード欄にはtype="password"を使い、入力内容を画面上で伏字表示にします。送信方法にはmethod="POST"を使うのが一般的です。ただし、POSTやpassword型だけで安全性が完結するわけではないため、実際のサービスではHTTPSやサーバー側の認証処理も必要になります。

CSSでは、フォーム全体をカードのように整え、入力欄やボタンの幅をそろえます。フォーカス時やホバー時の見た目も整えると、ユーザーが操作しやすい画面になります。

ログイン画面はシンプルな構造ですが、Webサービスの入口としてとても重要です。基本のタグと属性を理解し、見やすく入力しやすいログインフォームを作れるようにしていきましょう。