トップ ライブラリ/Framework/CMS 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」を取り込んだだけですが、素よりきれいですね。

ログインフォームのHTMLを表示した場合
ログインフォームのHTMLを表示した場合

構成

/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の管理画面用のテンプレートの利用まで解説していきます。

詳細

更新履歴

この記事の更新履歴です。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

技術・仕様
Ajax /CORBA /Jakarta EE(旧称J2EE、Java EE) /JNI

ライブラリ/Framework/CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
ActiveMQ /Tomcat /MariaDB /MySQL /Nagios /Redis /Solr

ITインフラサーバー
公開Webサーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

3.238.180.255

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク