プログラミング その他

【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


関連記事

SQL, Mybatis, OR, O/R

【MyBatis】IN句にパラメータを設定する方法

SpringアプリケーションにおいてMybatisを使用する状況を想定した実装例です。 期待値 IN句に複数のパラメータが設定されたSQL文が発行されること [crayon-6340a5c3ccb2d …

【Java】LinkedHashSetの使い方(挿入順を保持するSet)

LinkedHashSetはHashSetのサブクラスであり、同じメソッドが実装されています。 メソッドの使い方であればHashSetと同じなので、HashSetの使い方を参照下さい。  ↓ 【Jav …

AbstractFactoryパターンをenumで生成するメリット

AbstractFactoryパターンの説明には、実行時引数に文字列を渡したり、フラグでif-else判定する例をよく見かける。 しかし、どんなFactoryが生成可能を知らない担当者がFactory …

困った,男性

あなたが読み難いコードを書いてしまう理由

はじめに 読みやすいコードを書きたい人と願う方のために執筆しました。 誰もが良いコードを書きたいと願っているはずだからです。(と私は信じています) というもの、後で自分が読み直した時、誰かにレビューを …

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

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

SpringFramworkの良書

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

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