プログラミング その他

【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


関連記事

CSV/TSVデータを作成するVBAツールを公開

【追記:2020年8月1日】 UTF-8(BOM無し)に対応しました。 業務でテスト用のCSVファイルを作成することがよくあるので、自分でツールを作成しました。 TSVにも対応しています。 基本仕様 …

【Office365】Excelのデフォルトフォントを設定する方法

手順 Excelを開く Excelファイルを開きます。 デスクトップにあればよいですが、なければスタートメニューから探しましょう。   オプションメニューを開く 「ファイル」>「オプション」 …

PC, タイピング, パソコン

コミュニティ内のハッカソンに参加した体験談

クローズドなコミュニティ内で行われたハッカソンに参加してきました。 ハッカソンは短期間(短時間)で要件定義から実装までを行うイベントです。 ハッカソンに参加することになったきっかけは「要件定義から実装 …

【Java入門】プリミティブ型と参照型とは?

概要 Javaのデータ型にはプリミティブ型と参照型があります。 ここではそれぞれの型はどのようにデータを保持しているのか? また、どのような種類があるのか? について学んでいきます。   プリミティブ …

【SpringBoot入門】#7~ 検索画面の作成

概要 書籍情報を検索するフォーム(検索フォーム)と検索結果を表示する画面(検索結果一覧)を作成します。 検索フォームと検索結果一覧はHTMLファイルを分けて作成しています。 分けることは必須ではなく、 …

SpringFramworkの良書

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

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