webサイトのヘッダーのサンプルと備忘録

Webサイトで重宝するヘッダーのサンプルコードとして

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">メインタイトル<br>二行でもいけちゃいます</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 justify-content-center" id="Navber">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">リンクその１</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">リンクその２</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">リンクその３</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="#">メニュー1</a>
                        <a class="dropdown-item" href="#">メニュー2</a>
                        <a class="dropdown-item" href="#">メニュー1</a>
                        <a class="dropdown-item" href="#">メニュー2</a>
                        <a class="dropdown-item" href="#">メニュー1</a>
                        <a class="dropdown-item" href="#">メニュー2</a>
                    </div>
                </li>
                <li class="nav-item">
                    <button type="submit" class="btn btn-outline-primary d-inline d-lg-none my-3">ログアウト</button>
                </li>
            </ul>
        </div>
        <button type="submit" class="btn btn-outline-primary d-none d-lg-inline">ログアウト</button>
    </nav>

bootstrapのクラスをしようしていますので、まずはファイルを読み込む必要があります。今回はCDNで読み込みました。
以下を記述します。自分はbodyタグの終わりの直前に記述しました。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

以下のコードのnavbar-expand-lg navbar-light bg-light"を変更することで、

ハンバーガーメニューになるブレイクポイントを変更
ヘッダーの背景色の変更
ヘッダーの文字色いの変更

ができる。

<nav class="navbar navbar-expand-lg navbar-light bg-light">

以下のコードのjustify-content-centerの箇所を変更することで、ナビリンクの位置を調整できる。
startで左端（デフォルトと同じ）
centerで真ん中
endで右端
となる。実際にクラスを変更してみて、合うものを探して見ると良さそう。

<div class="collapse navbar-collapse justify-content-center" id="Navber">

他にも細かいカスタマイズはできると思われるが、ひとまずは備忘録として、今回自分がやくにたった内容で、まとめました、
他に築いたことがあれば更新していく次第です。