【HTMLで作れる採用LP】Bootstrapでヘッダーを固定する

１年間ナニも書いていない個人ブログのサブタイトルを変更したいと思っている「がみさん」と呼ばれているCTOの中神です。

今日はBootstrapでヘッダー固定です。

前回の記事は、こちらからどうぞ

まずは整えましょう

前回のときに作成したコンテンツ部分（jumbotoron）をcontainerでくくります。

<div class="container">
  <!-- contents START -->
  <div class="jumbotron">
    <h1>あなただから、一緒に働けるのではないだろうか？</h1>
    <p>これはデモサイトです。上にキャッチを、ここに詳細をかいてください。下に応募するボタンを設置します。</p>
    <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">応募する</a></p>
  </div> <!-- contents E N D -->
</div>

すると下記のようなソースコードになります。

ヘッダーナビを作成します

ヘッダーを作成します。

<div class="navbar navbar-inverse">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand text-muted" href="https://d-rect.jp">D-rect Inc.</a>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
    </ul>
  </div>
</div>

div要素にclass=”navbar nabvar-inverse”を付与すると、ページ上部にヘッダーナビが作成できます。

黒いナビが表示されましたか？
ここにページ内リンクを付与することで、ページのユーザビリティ−を向上させたナビゲーションが作成できます。

ヘッダーナビの固定

このままでもいいんですが、ページスクロールした時に、今なんのページを閲覧しているんだろうと迷子になってしまいます。
そこで、スクロールしてもウィンドウ上部に固定されるようにしてみると、どこにいても、そのナビゲーションをクリックすることで思い通りにページ遷移することが可能になります。

やり方は簡単。先ほどのnavbarをつけたdiv要素にnavbar-fixed-topのクラスを付与するだけです。

<div class="navbar navbar-inverse navbar-fixed-top">
<!-- 省略 -->
</div>

完成

これで完成です。

では実際のソースを見てみましょう。（※スクロールがわかりやすいように実際より多めに改行をいれています）
確認してみる

See the Pen 【HTMLで作れる採用LP】containerを使って整形する by taishigami (@taishigami) on CodePen.

ぜひ、お試しください。

おしらせ

「宮崎でITの勉強会に参加したいけど、情報がない！」というあなたへ

宮崎IT関連勉強会という、Facebookグループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。