プログラミング その他

【Bootstrap】共通ヘッダーをナビバーとしてデザインしよう!

投稿日:

概要

ヘッダーをナビバーとして実装します。
(SpringBootチュートリアルの共通ヘッダーを基に解説していきます)

また、デザインはBootstrapのサンプルを基にしていますので、
そちらも一度参照してみて下さい。

 

実装

固定されたナビバーを参考に実装します。

ナビバー(固定)に修正

ナビバーを固定で実装したソースコードです。
SpringBootチュートリアルで実装した共通ヘッダーに改修を加える形としており、
headerタグ内が修正箇所です。

header.html

・navタグ内に、classでfixed-topを指定することで固定することができます。

ナビバーとコンテンツの重なりを解消させる

<問題>
fixedで固定した場合、コンテンツが下に隠れてしまうため、
ナビバーに余白を設定することコンテンツと重ならないようにする必要があります。

スタイル適用前
以下では、「ようこそ!」の文字が下に入って隠れてしまっています。

これを解消するために、余白を設定します。

<解決方法>
①Bootstrapのクラスを使う場合
 pb-5というクラスを使うことができます。
 詳しくは公式サイトを見て頂くとよいのですが、ざっくり説明すると以下になります。
・p(padding)要素の内側に余白をつくる。
・b(bottom)下部のみを指定する。
・5($spacer * 3)$spacerのデフォルトは1rem=16px

このクラスをheader.htmlのheaderタグに指定すると、headerタグから下にコンテンツが配置されるようになります。
ただし、コンテンツとナビバーは詰まったような間隔になります。

5(3rem分)の余白ができるのがデフォルトの最大値であるため、間隔を調整するには$spacerの値を変更する設定が必要になります。
この変更は、サイト全体に影響が出ると考えられたので、別の方法を取ることにしました。

②独自のスタイルを定義する
①ではサイト全体に影響が出ると考えられたので、独自のスタイルを定義することで設定できるようにしようと思います。
そうすれば特定の箇所にのみ、指定したスタイルを適用することができます。
そのために、以下のファイル(base.css)を作成します。

配置場所:src/main/resources/static/css/base.css

ソースコード

説明
・padding-bottomは、要素の内側に余白をつくります。
 「-bottom」は下部のみにpaddingを作るという指定になります。
・em(エム)は文字サイズの高さを基準にした単位です。
・フォントサイズを指定しない場合、デフォルトでは16pxと見なされます。
・4emとしたのは、ヘッダーの高さとコンテンツとの余白には4文字文くらいが妥当だったためです。
・headerタグは共通ヘッダーのため、ここに指定すればすべてに適用されます。(※1)
・ログイン以外の画面は、全てheader.htmlのheadタグで置き換えているため、
 base.cssはheader.htmlのheadタグ内に参照させておけば置き換えている
 全ての画面でスタイルが適用されます。(※1)

(※1)SpringBootチュートリアルの仕様上

スタイル適用後
ナビバーの内側の下部に4em分の余白があるため、
コンテンツはそこから下の部分に表示されるようになります。
ナビバーとコンテンツの間隔もちょうどいい具合に空いています^^

まとめ

  • ナビバーには画面スクロールに合わせて移動する通常のものと、固定されたものが作れる。
  • Bootstrap標準のスタイルでは不十分な場合、独自のスタイルを加えることでデザインの幅が広がる。

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

ランキング評価する

-プログラミング, その他
-,

執筆者:


comment

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

CAPTCHA


関連記事

【SpringSecurity】#1~ ログイン画面の実装(認証)

概要 SpringSecurityを導入してユーザ認証機能を実現します。 まずはログイン認証機能が使えるようになることを目標にしていますので、 本記事で解説する構成は最小限にとどめています。   準備 …

elseを使わないことでパフォーマンスが下がる場合の対処法

  状況 前回記事(なぜelse、else ifを書かないようにすべきなのか?)のような ifのみで判定されており、それがfor文等の繰り返し処理の中にある場合は パフォーマンスが下がる。 …

【SpringSecurity】#2~ ユーザ毎の権限設定(認可)

概要 権限によって、アクセス可能なページを制限する機能の実装します。 管理者画面を作成し、権限によって画面の出し分けを行います。 前提 #1~ ログイン画面の実装が完了していること。 管理者画面の追加 …

エンジニア未経験者の転職が難しくなったので解決策を提案してみる

現状 コロナ以降、未経験者のエンジニア採用が少しずつなくなっていきました。 それまではポートフォリオを作ったり、ある程度のポテンシャルがあると判断されれば 採用されるということがあったのですが、それが …

【SpringBoot入門】#5~ 登録画面の作成

概要 共通ヘッダーの「新規登録」リンクから遷移する、書籍情報登録画面を作成します。 遷移できるようにControllerの作成と、遷移先である画面をHTMLで作成していきます。   Formクラスの作 …

記事を探す

SpringFramworkの良書

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

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