Header
2018-04-15
2019-07-19

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Html031231

Bootstrapはデザイン知識がなくても、レシポンシブデザインや 動的なデザイン対応が可能です。

今回は初心者が対応しようとすると地味に難しくなる ナビゲーションバーの設定方法をBootstrap4で解説します。

なお対象ブラウザがクロームやSafariなら、CSS のposition: stickを利用して固定化することをオススメします。

こちらはCSSのみなので設定がとても楽です

詳細は CSSだけでOK!ヘッダーとサイドバーを固定する|サンプルコード付きを御覧ください

Bootstrapのナビゲーションバーの設定方法

とりあえず、下記にコピペで動くサンプルを記載しているので メモ帳などへ保存して、.htmlの拡張子で保存し展開して見て下さい。

この記事の配下に解説を記載していますが、コード内にコメントを記載しているので、そのコメントも合わせて御覧ください

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Bootstrapでのナビゲーションバー設定</title>
  <!--CSS -->
  <!-- 必要なメタタグ -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    /*ヘッダーとコンテンツの要素間でコンテンツが重複しないように設定するcss 固定ヘッダー処理とは関係ない*/
    .m-100 {
      margin-top: 100px;
    }
  </style>
</head>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="https://programming-beginner-zeroichi.jp/articles/articles/94" target="_blank" rel="noopener">ゼロイチホーム記事へ戻る</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navber" aria-controls="navber" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navber">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">通常リンク(リンク設定なし)</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ドロップダウン
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item"  href="#ruby">メニュー1</a>
          <a class="dropdown-item" href="#Python">メニュー2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#html">その他</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" class="form-control mr-sm-2" placeholder="検索プレースホルダー" aria-label="検索...">
      <button type="submit" class="btn btn-outline-primary my-2 my-sm-0">検索</button>
    </form>
  </div>
</nav>
<div class="m-100" id="ruby">
  初心者・独学者向けにプログラミング言語:Rubyの配列について解説をします。

  Rubyだけでなく、様々なプログラミング言語で配列はよく利用されます。例えば、配列内に個人情報や地域の情報 など様々な情報が格納され、それの配列から情報を取り出したり追加するなどです。

  その為配列の操作は是非学んでおいてください。

  なおコードの実行例はirbで実行しているので、.rbファイルで 実行した場合は、ターミナル上で返り値が改行されるなど 結果の見え方が若干変わります。

  そもそも配列とは
  配列は要素を[ ]カッコで囲んで、複数の要素を格納する事ができます。

  中の要素は、数字や文字列など関係なく、異る型の要素を格納することができます。

  a= ["東京",12,"福岡"]
  => ["東京", 12, "福岡"]
  ※文字列は""ダブルクオートかシングルクオートで囲います。 下記のように文字列を囲まなければエラーになります。

  b = [l]

  NameError: undefined local variable or method `l' for main:Object
  from (irb):10
  from /Users/smt/.rbenv/versions/2.1.4/bin/irb:11:in `<main>'
  厳密にいうとRubyの配列はArryクラスにインスタンスとして生成され、配列を生成するには配列リテラルの[]を利用します。 初心者・独学者の場合は中々理解しきれないと思いますが、 そういうものだという認識で結構です。

  pushメソッドでRubyの配列に値を挿入する
  pushメソッドは配列の末尾に引数を要素として追加できます。

  a= ["東京","福岡"]
  => ["東京", "福岡"]
  a.push("大阪")
  => ["東京", "福岡", "大阪"]
  なお<<演算子メソッドでも追加可能です

          a= ["東京","福岡"]
  => ["東京", "福岡"]
  a.<< ("大阪")
  => ["東京", "福岡", "大阪"]
  popメソッドで配列内の末尾の要素を削除する
  .popでは末尾の要素を削除する事ができます。

  a= ["東京", "福岡", "大阪"]
  =>  ["東京", "福岡", "大阪"]
  a.pop
  => ["大阪"]
  配列内の要素の数を数える。
  .countメソッドを利用すれば配列内の要素の数を返してくれます。

  name = ["田中","鈴木","Tomy"]
  => ["田中", "鈴木", "Tomy"]
  irb(main):020:0> name.count
  => 3
  count以外にも.lengthや.sizeでも同じように要素内の数をカウントできます。

  empty?で配列が空か確認する
  .empty?で配列が空かを確認できます。

  a= ["東京", "福岡", "大阪"]
  => ["東京", "福岡", "大阪"]
  a.empty?
  => false

  b = []
  => []
  b.empty?
  => true
  実務例として、.empty?で配列内のユーザーや値が空か空ではないかで処理を変更する事があります。

  配列から値を取り出す
  引数に取り出したい値の、配列内の位置を指定すれば 配列から値を取得できます。

  a = ["東京", "福岡", "大阪"]
  => ["東京", "福岡", "大阪"]
  a[0]
  => "東京"
  上記のa[0]に注目してください。 Rubyのルールで配列内の、要素の順番は0からカウントされます。

  その為、配列内の"東京"は一番始めに格納されているので 0を指定する必要があります。

  以上 その他プログラミング言語では配列の他にHashもよく利用されます。

  Rubyに関するHashの記事は下記をご参照下さい

  関連記事:初心者・独学者向け|Rubyのハッシュ入門とよく使うメソッド

</div>
<div class="m-100" id="Python">
  MacではデフォルトでPython2が登録されています。

  このデフォルトで登録されているPython2を利用して、 環境構築やテキストエディタをダウンロードする事なく、 文字列の表示や四則演算の計算、変数への値代入などが可能になります。

  なお最新のPythonバージョンはPython3になりますので、 ある程度コツを掴んだら、バージョンアップする事をオススメします。

  【初心者・入門者向け】MacでPython3をインストールする方法

  ターミナルを起動する
  MacのFinderを開いて、アプリケーションを選択し 検索ウインドウでターミナルと選択すれば、起動します。

  ターミナル画像

  ## ターミナルへコマンドを登録する ~と表示されているホームカレントで下記コマンドを登録

  python
  irb画像

  対話モードが成功する
  対話モードが成功すると画像のようにバージョンが表示されます。

  対話モードを終了する際はControlキー+Dを押すと対話モードが終了します。

  irb画像2

  Pythonの対話モードで文字列を入力してみる
  文字列を入力する際はprint(" ")かprint(' ')で文字列が出力されます。文字列を囲むのはシングルクオート、ダブルクオートどちらでも表示されます。

  print('Hellow World')
  print("Hellow World")
  irb画像3

  ※printを省略することも可能ですが、初心者・独学者の場合は printを記入することを意識して下さい。

  なお、Pythonはインデントによって構文を判別する為 余分なスペースが入っている場合はインデントエラーとなります。

  irb画像4

  print(" ")の中に日本語を入れた場合は、文字コードの関係で 正しく表示されません。

  設定をすれば正しく表示されますが、そもそも対話モードではなくテキストエディタとターミナルから普通にPythonを起動した方がよいかと思います。

  ○関連記事○

  Python3初心者向け|無料で使えるIDE PyCharmの紹介

  Pythonの対話モードで数字を入力してみる
  基本的に半角数字を入力して演算子を入力すれば 回答が表示されます。

  >>> 1+2
  3
  >>> 3*4
  12
  >>> 6/3
  2
  >>> 9-1
  8
  irb画像5

  Pythonの対話モードで変数を入力してみる
  英語で好きな変数名を記入し、変数= 代入値を登録すれば 変数へ値が入力されます。 複数の変数同士で計算も行うこともできます

  >>> price = 1000
  >>> man = 5
  >>> man * price
  5000
  irb画像6

  以上

  その他小数点の計算や値の大小比較なども可能です。 自身で思いつく内容を記入してみて下さい。

</div>
<div class="m-100" id="html">
  今回はBootstrapでModal(モーダルウインドウ)を設定する方法を解説します。実際にコピペで動くコードをサンプルとして記載しています。

  利用シーンといては注意点を表示したり数秒間コンテンツを見たらキャンペーンフォームを表示させるなどで利用できます。

  ■関連記事■

  jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

  モーダルとは
  ボタンを押すと下記画像の用に、コンテンツが前面に表示されるウインドウの事を指します。

  モーダルウインドウ

  モーダルウインドウ利用シーン
  指定した時間を経過するとモーダルでサービス申し込みページのアナウンスを表示する

  ログイン、ログアウトの際にモーダルでアナウンスを表示する

  などです

  モーダルウインドウのサンプルコード
  下記コードをそのまま貼り付ければ動作を確認できます。

</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap4でナビゲーションバーを設定するには

<nav></nav>

にコンテンツを記載します。 class="navbar"は Bootstrapのcssでこれは必須になります。

fixed-topを設定するとナビゲーションバーが固定され、 削除してみると、ナビゲーションバーが固定されなくなります。

ドロップダウンの設定部分

以下の要素はドロップダウンボタンの要素になります。

      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ドロップダウン
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item"  href="#ruby">メニュー1</a>
          <a class="dropdown-item" href="#Python">メニュー2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#html">その他</a>
        </div>
      </li>

ドロップダウンメニューを増やす際は以下要素を追加していきます。 今回は内部リンクを設定していますが、もちろん外部リンクも可能です。

<a class="dropdown-item" href=" "></a>

dropdown-dividerはドロップダウンメニューの線の部分になります。

 <div class="dropdown-divider"></div>

ハンバーガーメニューの設定部分

以下のボタン要素では画面を縮小した際に右側に表示される ハンバーガーメニューのcssと付随する設定になります。 navbar-toggle はBootstrapのcssになります。

  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navber" aria-controls="navber" aria-expanded="false" aria-label="ナビゲーションの切替">
    <span class="navbar-toggler-icon"></span>
  </button>

以上になります。

その他Bootstrapの記事は下記から

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

前の記事
次の記事
人気記事
カテゴリーから記事を探す