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>
7. ログイン画面をカスタマイズしてみよう
色やサイズ、文字のフォントなどは、自分好みにカスタマイズすることもできます。たとえば、背景色を変えたり、ボタンの色を緑にしたりなど、工夫しだいで見た目を大きく変えられます。
慣れてきたら、次は「レイアウトの調整」や「レスポンシブ対応（スマートフォンでも見やすいデザイン）」などに挑戦してみましょう。
まとめ
今回はBootstrapを使ったログイン画面の作成について、基本から応用まで丁寧に確認してきました。ログイン画面はWebアプリケーションの入口として非常に重要な役割を持っており、見た目の分かりやすさや操作のしやすさがユーザー体験に大きく影響します。そのため、単に入力フォームを設置するだけでなく、中央配置による視認性の向上、バリデーションによる入力ミスの防止、アイコンによる直感的な理解といった工夫が求められます。
Bootstrapを活用することで、これらの機能を効率よく実現できる点は大きなメリットです。特に、d flexやjustify content center、align items centerといったクラスを組み合わせることで、複雑なCSSを書かなくても簡単に中央寄せが可能になります。また、required属性やwas validatedクラスを利用したバリデーションは、初心者でも扱いやすく、実務でもそのまま応用できる重要な技術です。
さらに、Bootstrap Iconsを使うことで、ユーザー名やパスワードといった入力項目の意味を視覚的に伝えることができます。これはユーザーの迷いを減らし、入力スピードの向上にもつながるため、実際の開発現場でも広く使われています。見た目の美しさだけでなく、使いやすさという観点でも非常に重要なポイントです。
実際の開発では、ここで紹介したログイン画面をベースにして、さらに機能を追加していくことが一般的です。たとえば、ログイン状態の保持機能やパスワードの表示切り替え、エラーメッセージのカスタマイズなど、より実用的な機能へと発展させることができます。まずは今回の内容をしっかり理解し、自分の手で動かしてみることが大切です。
サンプルカスタマイズ例
以下は、背景色とボタンカラーを変更し、ログイン画面を少しカスタマイズした例です。基本構造はそのままに、見た目を調整することで印象が大きく変わることが分かります。
<style>
body {
background-color: #e9f5ff;
}
.btn-custom {
background-color: #198754;
color: #fff;
}
</style>
<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>
<div class="mb-3">
<label class="form-label">ユーザー名</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
<input type="text" class="form-control">
</div>
</div>
<div class="mb-3">
<label class="form-label">パスワード</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input type="password" class="form-control">
</div>
</div>
<button class="btn btn-custom w-100">ログイン</button>
</form>
</div>
</div>
生徒
ログイン画面ってただ入力するだけのものだと思っていましたが、見やすさや使いやすさも大事なんですね。
先生
その通りです。ユーザーが最初に触れる部分なので、印象がとても重要になります。中央に配置するだけでもかなり見やすくなりますよ。
生徒
Bootstrapを使うと、難しいことをしなくてもきれいな画面が作れるのが驚きでした。
先生
はい、初心者でも扱いやすいのが特徴です。今回のようにクラスを組み合わせるだけでレイアウトが整います。
生徒
バリデーションも簡単にできるのは便利ですね。入力ミスを防げるのが良いと思いました。
先生
実務でも必須の機能です。ユーザーに優しい設計を意識することが大切です。
生徒
アイコンを付けるだけでも分かりやすくなるのが印象的でした。
先生
視覚的な工夫はとても効果があります。これからはデザインと機能の両方を意識して作っていきましょう。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
ログイン画面とは何をするためのページですか？
ログイン画面とは、ユーザー名やパスワードを入力して、自分専用のページにアクセスするための入口となるページです。SNSやネットショップなど、ほとんどのWebサービスで使われています。
Bootstrapを使えば初心者でもログイン画面を作れますか？
はい、Bootstrapには初心者でも使いやすいテンプレートが用意されており、中央寄せやバリデーション、アイコン表示付きのログイン画面も簡単に作成できます。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
