A Little Each Day

note to self

ヘッダーをサイト上部に固定する

こんにちは。本日はHTMLやCSSでヘッダーを固定する方法です。

サイトを制作する上でヘッダー(メニューやナビバーなども)を上部に固定しておきたいと思うことがあると思います。

これはよくWeb制作で使われますが、HTML・CSSの基礎基本で、比較的簡単に実装することができますので一緒にみていきましょう。

バージョン

HTML5
CSS3


まずは下準備

今回はシンプルに

1.ヘッダーがあって
2.コンテンツが3つ横に並び
3.フッターがある

レイアウトにします。

HTMLファイル

<!-- ここからヘッダー -->
<header>ここにヘッダー</header>

  <!-- ここから各コンテンツ -->
  <div class="main">
    <div class="content left">コンテンツ1</div>
    <div class="content center">コンテンツ2</div>
    <div class="content right">コンテンツ3</div>
  </div>

 <!-- ここからフッター -->
 <footer>ここにフッター</footer>

CSSファイル

header{
  height: 50px;
  width: 100%;
  background-color: orange;
}
.main{
  display: flex;
  width: 100%;
}
.content{
  flex: 1;
  height: 800px;
  padding: 50px 0;
}
.left{
  background-color: lime;
}
.center{
  background-color: gray;
}
.right{
  background-color: skyblue;
}
footer{
  height: 50px;
  width: 100%;
  background-color: yellow;
}


すると以下のようにシンプルなレイアウトができます。

f:id:chi_kun:20170623214048p:plain


ここまでは非常にシンプルなレイアウトですね。


ヘッダーを固定する

ヘッダーやナビバーなどを固定すには以下のようにcssで指定してあげます。

header{
  height: 50px; /* 高さ */
  width: 100%; /* 長さ */
  background-color: orange;
  position: fixed; /* ヘッダーを固定(これが重要) */
  top: 0; /* 固定する位置 */
  left: 0; /* 固定する位置 */
  right: 0;  /* 固定する位置 */
}


これだけでヘッダーを固定できてしまいます。


ここ近年は縦長のランディングページが流行しており、こういったレイアウト・デザインのサイトをよく見かけます。

JavaScriptで固定されたヘッダーのリンクを押すとページ内スクロール(ページ移動)なんかを実装しているサイトも多いですよね。


今回はヘッダーでしたが、もちろんフッターや真ん中のコンテンツでもできるので、各々自分のサイトデザインにあわせてぜひ試してみてください。



本日は以上です。