Bootstrapで遊ぶ１２（ナビゲーションバーの作成）

おつかれさまです。

いろいろいじってきたナビゲーションをバーとして、ページの上下に固定したり、スクロールと一緒に動かしたり、検索フォームとか作ったり、いろいろやってみます。

今回はめざすデザインの目標を決めて、そこへ向かってより道しながらいろいろアレンジしていきます。

めざすデザインはこんなの、パワポで適当に作りました、まさにこの通り！にはならないだろうけど、方向性という感じで目標にします。

ジャンボトロンの設置

とりあえずジャンボトロンだけ設置してみます、これは以前作ったコードそのまま。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1>社畜エンジニア発掘前線</h1>
    <p>頑張る戦士たちを支援します</p>
  </div>
</div>

全体は「container-fluid」でかこっておきます。

ちょっと左の余白がキツいので、h1とpに「ml-4」を加えて余白を入れておきます。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1 class="ml-4">社畜エンジニア発掘前線</h1>
    <p class="ml-4">頑張る戦士たちを支援します</p>
  </div>
</div>

ばっちりンコ〜

ナビゲーションバーの設定

ナビゲーションのバーを設定するにはhtmlタグの「nav」のクラスに「navbar」を設定します、今回は「bg-secondary」で背景の色付をしておきます。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1 class="ml-4">社畜エンジニア発掘前線</h1>
    <p class="ml-4">頑張る戦士たちを支援します</p>
  </div>
  <nav class="navbar bg-secondary">
  </nav>
</div>

バーだけ出てきた、そら中身作ってないので、

ブランドロゴの設定

ひとまず枠だけ作ったナビゲーションバーにブランドロゴを設定します、「nav」の中にaタグで「navbar-brand」のクラスを追記ます。ブランドロゴをクリックするとホームのページに遷移する、とかって仕様です、aタグのリンク先は、特にそんなページないので「#」にしときます。aタグの文字色は、指定しないと青っぽいタグって感じの色になるので、「text-dark」で色付けしておきます。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1 class="ml-4">社畜エンジニア発掘前線</h1>
    <p class="ml-4">頑張る戦士たちを支援します</p>
  </div>
  <nav class="navbar bg-secondary">
    <a href="#" class="navbar-barand text-dark">SHACHIKU</a>
  </nav>
</div>

なんかしょぼいな、まあロゴって言っても文字だしな、とりあえず進めましょう。

リスト項目の設定

ロゴまで作ったので次は項目を並べていきます。やはりリストがベースなので「ul」と「li」で構築していきます。ちなみにブランドロゴのaタグ（今回は「SHACHIKU」）は「ul」の外に出す必要があります。「ul」にはクラス名「navbar-nav」、「li」のクラスには「nav-item」、その中のaタグには「nav-link」を適応させます。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1 class="ml-4">社畜エンジニア発掘前線</h1>
    <p class="ml-4">頑張る戦士たちを支援します</p>
  </div>
  <nav class="navbar navbar-dark bg-secondary">
    <a href="#" class="navbar-barand text-dark">SHACHIKU</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">今日のニュース</a></li>
      <li class="nav-item"><a href="#" class="nav-link">残業申請</a></li>
      <li class="nav-item"><a href="#" class="nav-link">休出申請</a></li>
      <li class="nav-item"><a href="#" class="nav-link">予約</a></li>
  </nav>
</div>

どうしてこうなった、、、

まず、リストが縦並びです、これを横並びにするには「nav」のクラスに「navbar-expand」をつける必要があります。ほんでから文字色がaタグの青っぽいやつ、「text-」で色をかえてもいいんだけども、ナビゲーションバーには全体の文字色を指定する仕様があり、「nav」のクラスに「navbar-dark」を加えるといい感じになります。

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1 class="ml-4">社畜エンジニア発掘前線</h1>
    <p class="ml-4">頑張る戦士たちを支援します</p>
  </div>
  <nav class="navbar navbar-dark bg-secondary">
    <a href="#" class="navbar-barand text-dark">SHACHIKU</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">今日のニュース</a></li>
      <li class="nav-item"><a href="#" class="nav-link">残業申請</a></li>
      <li class="nav-item"><a href="#" class="nav-link">休出申請</a></li>
      <li class="nav-item"><a href="#" class="nav-link">予約</a></li>
    </ul>
  </nav>
</div>

まあまあこんな感じか、

細かいレイアウトの調整

大枠が整ったので、もう少し細かいレイアウトを調整していきます。

まず、ブランドロゴを太字にします、対象のaタグに「font-weight-bold」を追記します。

<a href="#" class="navbar-barand text-dark">SHACHIKU</a>

↓

<a href="#" class="navbar-barand text-dark font-bold-weight">SHACHIKU</a>

太字になりました。

次は、ブランドロゴとリスト項目が近いので少しすき間を入れます、「ul」に「ml-4」を加えます。

    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">今日のニュース</a></li>

↓

    <ul class="navbar-nav ml-4">
      <li class="nav-item"><a href="#" class="nav-link">今日のニュース</a></li>

すき間があきました。

あとは「残業申請」の項目をアクティブにします、アクティブにしたい「li」の項目のクラスに「active」を追記します。

<li class="nav-item"><a href="#" class="nav-link">残業申請</a></li>

↓

<li class="nav-item active"><a href="#" class="nav-link">残業申請</a></li>

ひとまずこんな感じで完成です、ここからもうちょっと作り込んでいこうかと思います。リストを分けたり、検索フォーム作ったり、ページに固定したりなどなど、次のメモで書こうかな。