🤯

【Rails】Bootstrapでヘッダー作成

2023/06/18に公開

Bootstrap

Rails

Ruby

tech

Bootstrapを使いヘッダー作成

読んだ本の感想を投稿するサイトのヘッダー作成です。
Bootstrapを使って実装し、それぞれのコードを解説します。

ナビゲーションバー作成

ナビゲーションバーを作成します。

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
</nav>

<nav>:
nav要素は、ナビゲーションのセクションを定義。
class="navbar navbar-expand-lg navbar-dark bg-dark":
navbar：Bootstrapのナビゲーションバーのスタイルを適用するためのクラス。
navbar-expand-lg：大画面デバイスでナビゲーションバーが常に表示されるようする。
navbar-dark：ナビゲーションバーのテキストを白色に設定。
bg-dark：ナビゲーションバーの背景色をダークカラーに設定。

タイトル作成

サイト名を作成します。

html

<div class="container">
  <a class="navbar-brand" href="/">Bookers</a>
</div>

<div class="container">:
containerクラスは、コンテンツを中央に配置し、適切なマージンを設定するためのクラス。ナビゲーションバーの内部要素を包むために使用。
<a class="navbar-brand" href="/">:
a要素は、リンクを作成するためのHTML要素。navbar-brandクラスは、ナビゲーションバー内のロゴやブランド名を表すためのクラス。

ハンバーガーメニュー作成

レスポンシブ対応させるためのハンバーガーメニューを実装します。

html

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

navbar-toggler:
Bootstrapのナビゲーションバーのトグルボタン用のクラス。このクラスをボタン要素に追加することで、トグルボタンになる。
type="button":
ボタン要素のタイプを指定。buttonとして指定することで、単純なクリック可能なボタンとして動作。
data-toggle="collapse":
要素を折りたたむための指示。この属性が指定されると、ボタンをクリックしたときに指定した要素が折りたたまれたり展開されたりする。
data-target="#navbarNav":
折りたたむ対象の要素（ナビゲーションバーのコンテンツ）を指定。#navbarNavは要素のIDで、このIDを持つ要素がトグルボタンによって折りたたまれたり展開されたりする。
aria-controls="navbarNav":
アクセシビリティ向上のための属性。スクリーンリーダーなどの支援技術を使用するユーザーに対して、ナビゲーションの折りたたみ/展開の状態を正しく伝えることができる。
aria-expanded="false":
要素が折りたたまれた状態であることを示す属性です。初期状態では折りたたまれているため、falseを指定。
aria-label="Toggle navigation":
ナビゲーションバートグルボタンのアクセシビリティを向上させるためのラベル。スクリーンリーダーなどの支援技術を使用するユーザーに対して、ナビゲーションの折りたたみ/展開の状態を伝えるために使用。
<span class="navbar-toggler-icon"></span>:
トグルボタンに表示されるアイコン。Bootstrapがデフォルトで提供しているアイコンで、折りたたみ/展開の状態を表す。

ナビゲーションメニュー

html

<div class="collapse navbar-collapse" id="navbarNavDropdown">
  <ul class="navbar-nav ml-auto">
  <% if user_signed_in? %>
    <li>
      <%= link_to user_path(current_user),class: 'nav-link text-light' do %>
        <i class="fas fa-home"></i> Home
      <% end %>
    </li>
    <li>
      <%=  link_to users_path,class: 'nav-link text-light' do %>
        <i class="fas fa-users"></i> Users
      <% end %>
    </li>
    <li>
      <%=  link_to books_path ,class: 'nav-link text-light' do %>
        <i class="fas fa-book-open"></i> Books
      <% end %>
    </li>
    <li>
      <%= link_to destroy_user_session_path, method: :delete,class: 'nav-link text-light' do %>
        <i class="fas fa-sign-out-alt"></i> Log out
      <% end %>
    </li>
  <% else %>
    <li>
      <%= link_to root_path,class: 'nav-link text-light' do %>
        <i class="fas fa-home"></i> Home
      <% end %>
    </li>
    <li>
      <%= link_to home_about_path,class: 'nav-link text-light' do %>
        <i class="fas fa-link"></i> About
      <% end %>
    </li>
    <li>
      <%= link_to new_user_registration_path,class: 'nav-link text-light' do %>
        <i class="fas fa-user-plus"></i> Sign up
      <% end %>
    </li>
    <li>
      <%= link_to new_user_session_path ,class: 'nav-link text-light' do %>
        <i class="fas fa-sign-in-alt"></i> Log in
      <% end %>
    </li>
  <% end %>
  </ul>
</div>

<div class="collapse navbar-collapse" id="navbarNavDropdown">:
<div>要素とnavbar-collapseクラスを使用することで、ナビゲーションバーのメニューコンテンツを折りたたんだり展開したりするための機能を提供している。id属性で、ナビゲーションバーとメニューコンテンツを関連付ける。
<ul class="navbar-nav ml-auto">:
ナビゲーションバーメニューのリストを表す<ul>要素。navbar-navクラスは、リストアイテムを適切にスタイリングするために使用。ml-autoクラスは、リストを右側に配置するために使用。
<% if user_signed_in? %>:
ユーザーがサインインしているかどうかを判定する条件文。サインイン中とサインアウト中で表示するコンテンツを分けるために使用。
<%= link_to user_path(current_user), class: 'nav-link text-light' do %>:
メニューアイテムのリンクを表すlink_toメソッド。クラスにnav-linkとtext-lightを指定することで、リンクにスタイルが適用され、テキストを白色表示にする。
<i class="fas fa-home"></i>:
Font Awesomeのアイコンを使用。

完成コードとヘッダーイメージ

完成コード

html

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="/">Bookers</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
        <% if user_signed_in? %>
          <li>
            <%= link_to user_path(current_user),class: 'nav-link text-light' do %>
              <i class="fas fa-home"></i> Home
            <% end %>
          </li>
          <li>
            <%=  link_to users_path,class: 'nav-link text-light' do %>
              <i class="fas fa-users"></i> Users
            <% end %>
          </li>
          <li>
            <%=  link_to books_path ,class: 'nav-link text-light' do %>
              <i class="fas fa-book-open"></i> Books
            <% end %>
          </li>
          <li>
            <%= link_to destroy_user_session_path, method: :delete,class: 'nav-link text-light' do %>
              <i class="fas fa-sign-out-alt"></i> Log out
            <% end %>
          </li>
        <% else %>
          <li>
            <%= link_to root_path,class: 'nav-link text-light' do %>
              <i class="fas fa-home"></i> Home
            <% end %>
          </li>
          <li>
            <%= link_to home_about_path,class: 'nav-link text-light' do %>
              <i class="fas fa-link"></i> About
            <% end %>
          </li>
          <li>
            <%= link_to new_user_registration_path,class: 'nav-link text-light' do %>
              <i class="fas fa-user-plus"></i> Sign up
            <% end %>
          </li>
          <li>
            <%= link_to new_user_session_path ,class: 'nav-link text-light' do %>
              <i class="fas fa-sign-in-alt"></i> Log in
            <% end %>
          </li>
        <% end %>
        </ul>
      </div>
    </div>
  </nav>
</header>

ログイン前
ログイン中
レスポンシブ対応中のハンバーガーメニュー

以上、Bootstrapを使いヘッダーを作成しました。

Bootstrapを使いヘッダー作成

ナビゲーションバー作成

タイトル作成

ハンバーガーメニュー作成

ナビゲーションメニュー

完成コードとヘッダーイメージ

Discussion