FacebookやGoogle+のような固定ヘッダーを実装する方法

昨日の夕方くらいに「えいやっ」とヘッダーのデザインを変更しました。

リプレイス&デザインリニューアル後のアクセス解析を見つつ、視点誘導的なところを考えつつ、もういっそのこと最近トレンドになりつつある固定ヘッダーにしてしまおうじゃないか! と。(実際そんな短絡的な理由でもないんだけど)

変更するだけなのもアレなので、取り敢えず固定ヘッダーを作るHTML&CSSをまとめておきたいと思います。

デザインの変更点

スクロールしてもらえばわかりますが、ヘッダーのバーがスクロールしても固定されたままついてきますよね。今回の大きな変更点はこの部分です。

以前のデザインは、ヘッダー部分を大きく取っていたので、若干ファーストビューに記事が入りづらい状態でした。

そこでこの部分を改善。記事がファーストビューにきちっと入るようにしてみました。
また、固定ヘッダーにすることでどこにスクロールしていてもインデックスに遷移しやすいようにして回遊率が上がったらいいなぁっていうのもひとつの狙い。

こうしたデザインは、最近だとTwitterやFacebook、Google+といったソーシャルメディアでも採用されていますよね。

固定ヘッダー を実装するHTMLとCSS

実装自体はとても簡単です。
デザイン的なことは抜きにして、固定ヘッダーを実装するHTMLとCSSをご紹介。

まずはHTML。非常に簡素に書いてますが、もっと要素を足したい場合はheader_bar_innerの中に入れるようにしましょう。

<header id="header_bar">
  <div id="header_bar_inner">
    <h1 id="blog_title"><a>ブログタイトル</a></h1>
    <h2 id="description"></h2>
  </div>
</header>
<main id="contents">
--- コンテンツ ---
</main>

続いてCSS。固定ヘッダー実装の最低限の書き方は以下のようになります。

#header_bar {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 2; /*ヘッダーバー部分の重なり順*/
}

#content {
  margin-top: 70px; /*上部に70pxのスペースを指定*/
  z-index: 1; /*コンテンツ部分の重なり順*/
}

CSSのposition: fixed;はIE6では対応していません。
クロスブラウザ対応が別途必要になりますが、まぁIE6は撲滅対象なので別に対応しなくてもいいんじゃね? って思っているので、うちでは対応していません。

また、ヘッダーはコンテンツの上に重なるようにしなきゃならんので、z-indexプロパティを加えています。

z-indexプロパティは指定する数字が大きければ大きいほど重なりとしては上になります。いっそのこと2じゃなくて99くらいの数字を指定しておいてもいいかもしれません。

CSS3でヘッダーバーに影をつけてみる(おまけ)

とりあえずうちではCSS3も使ってヘッダーバーに影をつけ、ついでに透明化もしていたりするので、おまけとしてそれもついでにどうぞ。

#header_bar {
  background: #000000;
  /* 影指定 */
  box-shadow: 0 1px 8px #333333;
  -moz-box-shadow: 0 1px 8px #333333; /* Firefox対応 */
  -webkit-box-shadow: 0 1px 8px #333333; /* Safari、Chrome対応 */
  /* 透明化 */
  opacity: 0.9;
  filter: alpha(opacity=90); /* IE7対応 */
  -ms-filter: "alpha(opacity=90)"; /* IE8対応 */
}

たったこれだけで実装できちゃうという簡単さ。
元々のヘッダーの作りがややこしいことになっていなければ、書き換えも割と簡単にできるんじゃないでしょうかね。