プログラミング

【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が用意されており、大抵のデザインは真似するだけで実装可能である。

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

プログラミングを上達させるために私がやってきたこと・やっていること

私の上達過程 写経 自分のレベルに合う本をもとに写経しては、コードの意味を調べて理解し、少しづつ体に染み込ませるように身に着けていきました。 とにかく初心者のころは右も左も分からず、ちょっとしたエラー …

【Java】オブジェクト指向の練習題材(成績オブジェクト)

前回記事、オブジェクト指向とは何なのかを簡単に説明してみるの練習題材です。 ここでは2つのオブジェクトを作成していきます。 成績オブジェクト:教科と点数などを保持 生徒オブジェクト:氏名と成績を保持 …

【Java入門】Stringの使い方まとめ

概要 Javaでもっともよく使う基本的なオブジェクト型はStringではないでしょうか。 Stringには便利なメソッドが多数用意されているので、それらをうまく使えるようになることはコーディングの上達 …

Redmineでリンクにできない場合にチェックすること

リンクにできない場合のチェック項目 前後に文字列がくっついている。 前後に全角スペースがある。 リンクの#が全角になっている。   リンクにするには? 以下のルールで記述すればリンクにできま …

【Java入門】クラスとインスタンスの違いを分かり易い言葉で説明します。

概要 クラスとインスタンスの違いについて、できるだけ分かり易い言葉や表現で説明します。   クラス 設計書だよ。 以上です。 ほんとマジで。 どんなデータと操作が可能かを決めているだけなので設計書と表 …

記事を探す

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。