2 flat logo on transparent 256
2018-04-15

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

Html031231

Bootstrapはデザイン知識がなくても、レシポンシブデザインや 動的なデザイン対応が可能です。 今回は初心者が対応しようとすると地味に難しくなる ナビゲーションバーの設定方法を記載します。

関連記事

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テストナビゲーションバー</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet">
    <style>
        /*ヘッダーとコンテンツの要素間でコンテンツが重複しないように設定するcss 固定ヘッダー処理とは関係ない*/
     .m-50{
         margin-top: 50px;
     }
     .m-100 {
            margin-top: 100px;
      }
    </style>
</head>

<body>
    <!--navbar-fixed-topを削除すればヘッダーが固定されなくなる-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <!-- data-target="#togglebar"で、ハンバーガーメニューを選択するとメニューリンクを表示する-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#togglebar">
                    <!--以下からハンバーガーメニューのhtml要素 画面が縮小されると表示-->
                    <span class="sr-only">Toggle navigation</span>
                    <!--icon-barはBootstrapのcss -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#Python">固定メニュータイトル</a>
            </div>
            <!--メニューの要素-->
            <div class="collapse navbar-collapse" id="togglebar">
                <ul class="nav navbar-nav">
                    <!--以下でページ内リンクを設定している-->
                    <li><a href="#ruby">Ruby</a></li>
                    <!--class="active"で選択されているメニューの色が変わる-->
                    <li class="active"><a href="#Python">Python</a></li>
                    <li><a href="#html">html</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="m-50" 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>
</body>
</html>

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

<nav></nav>

にコンテンツを記載します。 class="navbar"は Bootstrapのcssでこれは必須になります。 navbar-fixed-topを設定するとナビゲーションバーが固定され、 削除してみると、ナビゲーションバーが固定されなくなります。

<nav>配下の
<div class="container">

で、containerで設定した配下の要素をレシポンシブ対応にします。ここも設定が必須です。

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

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

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#togglebar">
                    <!--以下からハンバーガーメニューのhtml要素 画面が縮小されると表示-->
                    <span class="sr-only">Toggle navigation</span>
                    <!--icon-barはBootstrapのcss -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

メニューのリンクの設定部分

ハンバーガーメニューで設定している、 datatarget="#togglebar" とメニューリンクの id="togglebar"はリンクされています。 このリンクによって、ハンバーガーメニューを選択すると メニューに設定しているリンクが表示されます。

            <!--メニューの要素-->
            <div class="collapse navbar-collapse" id="togglebar">
                <ul class="nav navbar-nav">
                    <!--以下でページ内リンクを設定している-->
                    <li><a href="#ruby">Ruby</a></li>
                    <!--class="active"で選択されているメニューの色が変わる-->
                    <li class="active"><a href="#Python">Python</a></li>
                    <li><a href="#html">html</a></li>
                </ul>
            </div>

以上になります。

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

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

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

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

前の記事
次の記事