プログラミング その他

【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


関連記事

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

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

【Bootstrap】一覧表示をデザインしよう!

概要 一覧表示をデザインします。 Bootstrapにはすぐに使える便利なクラスが用意されているので、それらを使用して実現します。 【SpringBootチュートリアル】#7~ 検索画面の作成に変更を …

no image

prepareステートメントの挙動について調べてみた

調べるきっかけ PHPでSQLをセキュアに記述する方法としてprepareステートメントが推奨されているが、なぜなのかがわからず、挙動を調べれば自分なりに納得のいく答えがでるのではないかと思ったため。 …

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

前回記事、オブジェクト指向とは何なのかを簡単に説明してみるの練習題材です。 ここでは3つのオブジェクトを作成していきます。 – 会計オブジェクト:会計金額の算出 – 請求書オブ …

【Java】MapをStreamで処理する方法 7選!

概要 【Java】ListをStreamで処理する方法 7選! 【Java】SetをStreamで処理する方法 7選! に続き、Map編です。 Mapをstreamで扱う場合、entrySetまたはK …

記事を探す

SpringFramworkの良書

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

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