HTMLだけで簡単に作れるログインページ
Web制作を始めたばかりの頃、「ログイン機能を作りたいけれど、サーバーやデータベース（PHPやNode.jsなど）の知識がないと無理なのかな…」と諦めてしまった経験はありませんか？
確かに、ユーザー管理や厳格なセキュリティを伴う本格的なログイン処理にはバックエンドの仕組みが欠かせません。しかし、HTMLとブラウザの機能（JavaScriptの sessionStorage ）を少し組み合わせるだけで、「パスワードを入力して画面を切り替える」というログイン処理の雰囲気をローカル環境で手軽に体験できます。
今回は、完全な初学者の方に向けて、ブラウザだけで動く超簡易的なログインページの作り方を分かりやすく解説します！
1. はじめに（この記事で学べること）
この記事を読むと、以下の知識と実装方法が身につきます。
- 画面遷移を伴うログインUIの基本構造
-
inputタグやbuttonタグなどのフォーム系要素の使い方 -
sessionStorageを使ったログイン状態の簡易的な保持とチェック処理
「まずは動くものを作ってフロントエンドの動きを体感したい」という方にぴったりの内容となっています。
2. 完成イメージ
今回作成するのは、以下の2つのファイルです。
-
login.html（ログイン画面）
- パスワード（設定値:
secret123）を入力してログインボタンを押す画面。 - 入力値が正しければメインページ（
index.html）へ遷移します。 - パスワードが間違っている場合は、赤字で「パスワードが違います」とエラーを表示します。
-
index.html（メインページ）
- ログイン成功時のみアクセスできるページ。
- 未ログイン状態（セッション情報がない状態）で直接URLを開こうとすると、自動的に
login.htmlへリダイレクトされます。 - ログアウトボタンを押すと、セッション情報を破棄してログイン画面に戻ります。
3. サンプルコード（HTML）
さっそくコードを見ていきましょう。同じフォルダ内に login.html と index.html の2つのファイルを作成し、それぞれのコードを貼り付けて試してみてください。
login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログイン画面</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
.login-container { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; }
input { display: block; width: 100%; padding: 10px; margin: 10px 0; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
.error { color: red; font-size: 14px; margin-top: 10px; display: none; }
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<input type="password" id="password" placeholder="パスワードを入力してください">
<button onclick="checkPassword()">ログイン</button>
<p id="error-message" class="error">パスワードが違います</p>
</div>
<script>
function checkPassword() {
const inputPass = document.getElementById('password').value;
// ⚠️ 注意：このパスワードはブラウザのデベロッパーツールで誰でも見られてしまいます
const correctPass = "secret123";
if (inputPass === correctPass) {
// 認証成功：一時的なトークンを代わりとしてsessionStorageに保存
sessionStorage.setItem('isLoggedIn', 'true');
// index.html へ遷移
window.location.href = 'index.html';
} else {
// 認証失敗
document.getElementById('error-message').style.display = 'block';
}
}
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メインページ</title>
<script>
// 画面が描画される前にログイン状態をチェック
if (sessionStorage.getItem('isLoggedIn') !== 'true') {
alert('ログインが必要です。');
window.location.href = 'login.html'; // ログイン画面へ強制送還
}
</script>
</head>
<body>
<h1>ログイン成功！</h1>
<p>ここは認証されたユーザーだけが見られる（簡易的な）秘密のページです。</p>
<button onclick="logout()">ログアウト</button>
<script>
function logout() {
// セッション情報をクリアしてログイン画面に戻る
sessionStorage.removeItem('isLoggedIn');
window.location.href = 'login.html';
}
</script>
</body>
</html>
4. 主要タグの解説（form, input, label, buttonなど）
サンプルコードで使われているHTMLタグや、実際のWeb制作で覚えておきたい重要タグの役割を整理しました。
input タグ
ユーザーからの文字入力を受け取るための必須タグです。
-
type="password": 入力した文字が「●」や「＊」のように伏字で表示されます。パスワード入力画面では必ずこの属性を設定します。 -
placeholder="...": 入力欄が空のときに薄い文字で表示するヒント文を指定できます。
button タグ
クリック操作を受け取るボタンを生成します。
-
onclick="checkPassword()": ボタンがクリックされたタイミングでJavaScriptの関数を実行します。
補足：Web制作実務で必須の form タグと label タグ
今回のサンプルでは最小限のコードで動作させるため div タグで囲んでいますが、実際のWebサイトやWebアプリケーションを作成する際は、以下のように form タグと label タグを組み合わせるのが標準的です。
<form style="display: flex; flex-direction: column;">
<label for="password">パスワード</label>
<input type="password" id="password" name="password" placeholder="パスワードを入力">
<button type="submit">ログイン</button>
</form>
-
formタグ
送信ボタンが押された際に、フォーム内の入力内容をサーバーへ一括送信するための親要素です。Enterキーでのフォーム送信にも対応できるようになります。 -
labelタグ
「何を入力する項目なのか」を示すラベルです。for属性に入力要素のidを指定することでラベルと入力欄が紐づき、ラベルをクリックしただけで入力欄にフォーカスが当たるなど、アクセシビリティ（使いやすさ）が大幅に向上します。
script タグと sessionStorage
JavaScriptコードを記述するために使うのが script タグです。
今回は sessionStorage というブラウザの記憶領域を利用しています。 sessionStorage.setItem('key', 'value') で一時的に情報を保存し、タブを閉じるまでログイン状態（ isLoggedIn = true ）を維持する仕組みを構築しています。
7.実際の画面
login.html
ログインした後に見れるindex.html
6. まとめ
今回はHTMLと少量のJavaScriptを使って、ブラウザ上で動作するログイン画面の作成方法を紹介しました。
⚠️ 学習時の大切な注意点
今回のコードは、あくまで「ログイン画面の見た目や画面遷移の挙動を理解する」ための学習用コードです。
JavaScript内にハードコーディングされた correctPass = "secret123" は、ブラウザの「デベロッパーツール」を開けば誰でも解読できてしまいます。実際のWebサービスで個人情報やコンテンツを守る場合は、必ずPHP、Python、Node.jsなどのサーバーサイド言語を用いて、通信の暗号化や安全なデータベース認証を行ってください。
まずは今回のサンプルコードを動かしてみて、HTMLとJavaScriptで画面が切り替わる楽しさを実感してもらえたら嬉しいです！
次ステップとして、入力された値のバリデーションチェックや、CSSを使ったデザインのカスタマイズにもぜひ挑戦してみてください。