bootstrapを使用したログイン画面（ログインフォーム）の実装例

bootstrapを使用したログイン画面（ログインフォーム）の作成を目指しながら、Bootstrapの実践知識を補足していきます。

1. ログインフォームのHTML
2. 青いボタン（btn btn-primary）
3. 水平方向に中央寄せ（text-center）
4. 垂直方向に中央寄せ（独自のスタイル適用）
5. カード形式の枠を作る（card、card-XXX）
6. フォームに効果をつける（form-control）

もっと知識を広げるための参考
 更新履歴

1. ログインフォームのHTML

まずはログインフォームのHTMLを見ていきます。「bootstrap.min.css」を取り込んだだけですが、素よりきれいですね。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

まだ「bootstrap.min.css」を取り込んだだけです。 account-icon.pngは自作したものです。

2. 青いボタン（btn btn-primary）

今度はボタンをカスタマイズして青いボタンに変更していきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

bootstrapで青いボタンを表示するにはclass属性に「btn btn-primary」を指定します。

3. 水平方向に中央寄せ（text-center）

今度はログインフォームを水平方向の中央に寄せていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form class="text-center">
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

あるブロック内で左右水平方向の中央に寄せたい場合はclass属性に「text-center」を指定します。

4. 垂直方向に中央寄せ（独自のスタイル適用）

今度はログインフォームを垂直方向に中央に寄せていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center">
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

bootstrapでの画面の垂直方向に中央寄せする方法は見当たりませんでした。独自のスタイルを適用することでかゆい所は解決できます。

5. カード形式の枠を作る（card、card-XXX）

今度はログインフォームにカード形式の枠をつけていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center card">
<div class="card-body">
<h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1>
<p class="card-text"><input type="email" placeholder="メールアドレス" required autofocus></p>
<p class="card-text"><input type="password" placeholder="パスワード" required></p>
<p class="card-text"><a href="#">パスワードをお忘れの場合</a></p>
<p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p>
</div>
</form>
</body>
</html>

ポイント

bootstrapの「card」「card-body」「card-title」「card-text」などの「card-XXX」を使用してカード形式を作ることができます。

6. フォームに効果をつける（form-control）

今度はログインフォームにカード形式の枠をつけていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center card">
<div class="card-body">
<h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1>
<p class="card-text"><input class="form-control" type="email" placeholder="メールアドレス" required autofocus></p>
<p class="card-text"><input class="form-control" type="password" placeholder="パスワード" required></p>
<p class="card-text"><a href="#">パスワードをお忘れの場合</a></p>
<p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p>
</div>
</form>
</body>
</html>

ポイント

bootstrapの「form-control」を指定するとフォームに効果がつけられます。

もっと知識を広げるための参考

もっと知識を広げるための参考です。

Bootstrap

Bootstrapは、UIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。この記事ではBootstrapの入門知識からBootstrap4の管理画面用のテンプレートの利用まで解説していきます。

詳細