Bootstrapで作るログイン画面！初心者でもできる中央寄せ・バリデーション・アイコン表示付き

ログイン画面テンプレート：中央寄せ・バリデーション・アイコン表示

先生と生徒の会話形式で理解しよう

生徒

「パソコン初心者なんですが、Bootstrapでログイン画面って作れますか？」

先生

「はい、大丈夫ですよ。Bootstrapには、初心者にも使いやすいテンプレートが用意されています。中央に配置したり、バリデーションやアイコンの表示も簡単です。」

生徒

「見た目も整っていて、使いやすそうですね。どうやって作ればいいんですか？」

先生

「それでは、Bootstrapのスターターテンプレートを使って、ログイン画面の作り方を丁寧に説明していきましょう！」

1. ログイン画面とは？

ログイン画面とは、ユーザーが「ユーザー名」や「パスワード」を入力して、自分専用のページに入るための入り口です。インターネット上の多くのサービスやアプリケーションで使われています。

たとえば、SNS（エスエヌエス：ソーシャルネットワーキングサービス）やオンラインショップにログインする時も、このような画面を見たことがあると思います。

2. Bootstrapとは何か？

Bootstrap（ブートストラップ）とは、Webページを簡単に「オシャレ」で「見やすく」するためのデザインツールです。たとえるなら、「料理を作るときの便利な調味料セット」のようなもので、難しいことをしなくても、綺麗な見た目が簡単に作れます。

特に初心者の方でも、すぐに使える部品（フォーム・ボタン・配置など）が揃っているのが魅力です。

3. ログイン画面を中央に表示する方法

Webページを開いたときに、画面の真ん中にログインフォームを置くと、とても見やすくて使いやすくなります。Bootstrapでは「.d-flex」「.justify-content-center」「.align-items-center」などのクラスを使うだけで簡単に実現できます。

4. 入力チェック（バリデーション）とは？

「バリデーション」とは、ユーザーが間違った情報を入力しないようにチェックする機能です。たとえば、「メールアドレスの形式が正しいか」や「パスワードが空欄ではないか」を確認する仕組みです。

Bootstrapでは、これも簡単に設定できます。「required」や「is-invalid」などのクラスを使って、視覚的にエラーをわかりやすく表示できます。

5. アイコンを使って視覚的にわかりやすく

Bootstrap Icons（ブートストラップ・アイコン）を使えば、入力欄の横に「人のマーク」や「鍵のマーク」など、視覚的に内容を示すことができます。

たとえば「<i class="bi bi-person-fill"></i>」と書けば、人のアイコンが表示されます。


<i class="bi bi-person-fill"></i>

ブラウザ表示

6. 実際にHTMLでログイン画面を作ってみよう

それでは、Bootstrapのスターターテンプレートを使って、中央寄せ・バリデーション付き・アイコン表示ありのログイン画面を作ってみましょう！


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ログイン画面</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">
  <div class="container vh-100 d-flex justify-content-center align-items-center">
    <div class="card p-4 shadow" style="width: 100%; max-width: 400px;">
      <h2 class="text-center mb-4">ログイン</h2>
      <form novalidate>
        <div class="mb-3">
          <label for="username" class="form-label">ユーザー名</label>
          <div class="input-group has-validation">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <input type="text" class="form-control" id="username" required>
            <div class="invalid-feedback">
              ユーザー名を入力してください。
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">パスワード</label>
          <div class="input-group has-validation">
            <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
            <input type="password" class="form-control" id="password" required>
            <div class="invalid-feedback">
              パスワードを入力してください。
            </div>
          </div>
        </div>
        <button class="btn btn-primary w-100" type="submit">ログイン</button>
      </form>
    </div>
  </div>

  <script>
    (function () {
      'use strict';
      const forms = document.querySelectorAll('form');
      Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    })();
  </script>
</body>
</html>

ブラウザ表示