【Bootstrap】ログイン画面をデザインしよう!

当ページのリンクには広告が含まれています。
目次

概要

【SpringSecurity】#3~ 独自のログイン画面でシンプルな独自のログイン画面を実装しました。
これに、Bootstrapでデザインを施していきます。
Bootstrapのサンプルを基に実装しますので、以下も参照しておいて頂くと良いと思います。
(参考)【Bootstrap】シンプルなサインインフォーム

準備

Mavenのpom.xmlにBootstrapを追加します。
執筆時点(2021/2/20)でBootstrap5はbeta版であるため、
Bootstrap4系の最新版である4.6を使用することとします。

MavenRepositoryから設定情報を取得します。
Bootstrap » 4.6.0

pom.xmlに追記します。

実装

ソースコード

ログイン画面(login.html)

画像

ログイン画面

ログインエラー時/ログアウト時のメッセージ

個別解説

    • Bootstrapのリンク設定

linkタグをheadタグ内に追記します。

    • 中央寄せ

bodyタグを中央寄せに設定します。

    • メッセージ

ログイン失敗時とログアウト時のメッセ―ジを表示するデザインを設定します。
ログイン失敗時:alert-danger
ログアウト時 :alert-primary

アラートのデザインは以下を参考にして下さい。
Alerts – Examples

    • 必須入力、自動フォーカス

required:未入力の場合、必須入力を促します。
autofocus:画面表示時、指定した入力フォームにカーソルが入った状態になります。

    • ボタン

ボタンをデザインします。
btn-outline-primaryのデザインを使用するとカーソルのON/OFFでボタンの色に変化があるので、ユーザが直感的にわかり易いデザインになっています。

(カーソルOFF/ONの違い)

まとめ

  • pom.xmlにBootstrapの構成を追加するし、linkタグを入れることで利用可能になる。
  • Bootstrapはclassを指定するだけで簡単にデザインを埋め込めるCSSライブラリである。
  • 公式サイトにExamplesが用意されており、大抵のデザインは真似するだけで実装可能である。

おすすめ書籍

辞書的にも引けるので手元においておくにはおすすめの1冊です。

最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

リーマンショックの影響で26歳の時にIT業界から離れ、紆余曲折を経て34歳でエンジニアに復帰しました。
復帰前は開発未経験でしたが、独学した知識と面接時のコミュニケーション力で見事開発エンジニアとして復帰しました!
今はフリーランスエンジニアとして仕事をしています。

■保有資格
・Java Gold SE 11

コメント

コメントする

CAPTCHA


目次