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

スポンサーリンク

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

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

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

デザインの変更点

[M] mbdb の 固定ヘッダー

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

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

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

こうしたデザインは、最近だと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対応 */
}

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

「Information」新着記事

約4年ぶりとなる全面リニューアルを実施しました

Avatar for ホシナ カズキ

ホシナ カズキ

お散歩と旅の多言語ウェブマガジン「STROLL」をスタートしました

Avatar for ホシナ カズキ

ホシナ カズキ

【お知らせ】モバデビの記事がInstant Articlesで読めるようになりました

Avatar for ホシナ カズキ

ホシナ カズキ

2016ブロガーズフェスティバルで話すことは「ブログデザイン」についてです

Avatar for ホシナ カズキ

ホシナ カズキ

制作・開発を担当したダイソンのオウンドメディア「Dyson 5127」がローンチしました

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく