今週始めに、このブログにヘッダーバー（トップバー、ツールバー、管理バー）を実装しました。ヘッダーバーといえば、Facebook、Twitter、Google+などの世界的に影響力のあるSNSにも採用されており、おそらく今後のWebデザインのトレンドになるのではないかと予想しています。
この3つのサービスのヘッダーバーに共通しているのは、ページに固定されているということです。ページをスクロールしても、移動せずにその場に留まるようになっています。そうすることにより「見せたい情報」や「使わせたい機能」を常に表示させておくことが可能となります。
例えば、そのサイトのタイトル、検索フォーム、ホームへ戻るボタン、重要なページへのリンクなどがあると、常に表示されているわけなので、かなりそのサイトの利便性が高くなると思います。SNS系のサービスだと、リアルタイムで新着情報をお知らせしてくれる「通知機能」が実装されていたりしますね。
中でも私が特に気に入っているのがGoogle+のヘッダーバーで、ヘッダーバーの余白部分をクリックするとページトップに戻るようになっています。（iOSやAndroidにも同様の機能が実装されていますね。）
これがけっこう便利で、サイトにヘッダーバーがあればついついクリックしてしまうほど癖になっています。これほど便利な機能なので、ぜひ自分のブログにも取り込みたいと思っていました。なので、今回のヘッダーバーの実装に際して、Google+と同じようにヘッダバーの文字の書かれていない余白の部分をクリックするとページトップに戻るようにしました。
このブログをお読みいただいている中でページトップに戻られる場合は、ぜひヘッダーバーをクリックしてみてください！
最後に「クリックするとページトップに戻るヘッダーバー」の実装方法についてまとめておきます。
ヘッダーバーの実装（HTML部分）
ヘッダーバーのコーディングのポイントとしては、ヘッダーバーのどの部分をクリックした時にページトップに戻るかJavaScript側で識別できるようにそれぞれ「id属性」をつけておきます。
<!--▼ヘッダーバー部分▼-->
<header id="header_bar">
<div id="header_bar_inner">
<hgroup>
<h1 id="blog_title"><a href="http://mae.chab.in/">mae's blog</a></h1>
<h2 id="blog_sub_title">Linux、プログラミング、ピアノ…30代から始めるエンジョイLife！</h2>
</hgroup>
<nav>
<ul class="menu">
<li id="blog_search">
<div class="search_box">
<form method="get" id="searchform" action="http://mae.chab.in/">
<input type="text" value="" name="s" id="s" /><button type="submit" id="searchsubmit"><span class="hidden_elem">検索</span></button>
</form>
</div>
</li>
<li id="blog_profile"><a href="/about">プロフィール</a></li>
</ul>
</nav>
</div>
</header>
<!--▲ヘッダーバー部分▲-->
<!--▼コンテンツ部分▼-->
<div id="content">
--- コンテンツ ---
</div>
<!--▲コンテンツ部分▲-->ヘッダーバーの実装（CSS部分）
CSS部分は、デザイン面は省いてポイントだけ書いておきます。
ヘッダーバーを画面に固定
画面をスクロールしても、ヘッダーバーが動かないように「position:fixed」を使って画面に固定します。なお、「position:fixed」はIE6には対応していません。別途クロスブラウザ対応する必要がありますが、このブログではまだ未対応です。
#header_bar {
width: 100%; /*ヘッダーバーの幅*/
height: 36px; /*ヘッダーバーの高さ*/
position: fixed; /*ヘッダーバーを画面に固定*/
top: 0; /*ヘッダーバーの固定位置（上）*/
left: 0; /*ヘッダーバーの固定位置（左）*/
}コンテンツ部分の上部の位置を調整
ヘッダーバー部分を固定したことにより、コンテンツ部分はヘッダーバーの高さの分だけ下げて表示させる必要があります。ここでは、ヘッドバーの高さを「36px」と指定したので、「margin-topプロパティ」でその分だけコンテンツ部分の上部にスペースを作ってあげます。
#content {
margin-top: 36px; /*上部に36pxのスペースを指定*/
}コンテンツ部分がヘッダバーの下を通るように
コンテンツ部分をスクロールした際に、固定されたヘッダバーの下を通るようにします。「z-indexプロパティ」を使って、ヘッダバー部分とコンテンツ部分の重なりの順序を指定します。
#header_bar {
z-index: 2; /*ヘッダーバー部分の重なり順*/
}
#content {
z-index: 1; /*コンテンツ部分の重なり順*/
}あとは好きなようにデザインしてもらって大丈夫だと思います。ちなみに今回の実装においてはCSS3を使ってヘッダーバーに影をつけて、半透明にしました。その方法も併せてご紹介します。
おまけ（ヘッダーバーに影、透明度を指定）
影の指定は「box-shadowプロパティ」、透明度の指定には「opacityプロパティ」を使います。これらはCSS3のプロパティであるため、ブラウザによっては対応していない場合があります。（クロスブラウザー対応方法についての詳細は、過去の投稿『HTML5 & CSS3のクロスブラウザー対応方法まとめ』をご覧ください。）
#header_bar {
background-color: #000;
/*ヘッダーバーに影を指定*/
box-shadow: 0 1px 8px #444;
-moz-box-shadow: 0 1px 8px #444; /*Firefox向け*/
-webkit-box-shadow: 0 1px 8px #444; /*Safari、Chrome向け*/
/*ヘッダーバーの半透明化*/
opacity: .7;
filter: alpha(opacity=70); /*IE向6、IE7け*/
-ms-filter: "alpha(opacity=70)"; /*IE8向け*/
}ヘッダーバーの実装（JavaScript部分）
ヘッダーバーをクリックした時に、ページの上部に戻る機能はJavaScriptで実装しています。
今回はjQueryを使っているので、前もってjQueryライブラリーを読み込んでおく必要があります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>jQueryのソースコードは、たったこれだけです。大変簡単に実装ができます。
//ページが完全に表示されてから以下の処理を実行
$(document).ready(function() {
//#header_bar（ヘッダーバー部分）がクリックされたら以下の処理を実行
$("#header_bar").click(function(e) {
//ヘッダーバー部分のどの部分がクリックされたかid属性を取得
var element = $(e.target).attr("id");
//もしクリックされた部分のid属性が「header_bar」「header_bar_inner」
//であれば以下の処理を実行
if(element === "header_bar" || element === "header_bar_inner") {
//ヘッダーバー部分をクリックした際に戻る位置（ページトップ）を指定
var target = $(document.body).offset().top;
//ページトップに戻る際のアクション（スムーズスクロール）を指定
$("html, body").animate({scrollTop: target}, 200);
//念のため（クリックした場所にhtmlのリンクが含まれていたら無視）
return false;
}
});
});上記で利用しているそれぞれの関数については『jQuery日本語リファレンス』の各項目をご参照ください。
以上のようにけっこう簡単にヘッダーバーを設置し、なおかつページトップへ戻る機能を実装することができます。先にも述べましたが、おそらく今後のWebデザインのトレンドになると思います。ヘッダーバーを実装したサイトが今後どんどん増えていくのではないでしょうかね。そんなことを勝手に思っています…w
コメント