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

1年間ナニも書いていない個人ブログのサブタイトルを変更したいと思っている「がみさん」と呼ばれている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グループに参加してください。ここで、勉強会の主催者が開催情報などを告知しています。
こちらのグループもよろしくお願いします。

この記事が気に入ったら
いいね ! しよう

Twitter で
 

新卒採用をはじめるならディーレクトにご相談ください

新卒採用に踏み出せない人事担当者の方、 そのお悩み、ディーレクトが解決します!

ABOUTこの記事をかいた人

中神 大司

株式会社D-rect CTO 専務取締役。大学院在学中よりITベンチャー企業にてプログラマ・エンジニアとして活躍。有名アーティストや海外ブランドのECサイト構築に携わる。その後、株式会社インタークロスにおいて、求人サイト全てのシステム設計・構築に携わり、現在に至る。 Wordbench宮崎の主催や、職業訓練校においてプログラミングの講師を務めるなど、若手技術者の育成にも力を注いでいる。サーバーの構築を得意としており、得意な事は、粗探しとあげ足取り。