【簡単コード】CSSでヘッダーとグローバルナビゲーションを上部に固定してみよう

2021.09.07
スポンサーリンク

こんにちは、Webプログラマー見習いのトムです。

さて先日には「シンプルなグローバルナビゲーションを作成しよう」という記事を投稿しましたが、今回はその続きで、CSSでヘッダー固定を実装してみたいと思います。ちなみに正確には、ヘッダーと共にグローバルナビゲーションの部分もサイトの上部に固定にし、コンテンツ部分がヘッダーとグローバルナビゲーションの下をくぐらせるデザインにします。

今回のポイント・・・固定したい要素にposition:fixedを指定すれば固定化される。固定される部分に連続するコンテンツの開始ポジションに注意する

スポンサーリンク

ヘッダー固定の実装

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Travel SKY VIEW Corp</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <section id="header">
    <h1><a href="#">旅行代理店 Travel SKY VIEW</a></h1>
  </section>

  <section id="global-navi">
    <nav class="wrapper">
      <ul>
        <li><a href="#news">新着情報(News)</a></li>
        <li><a href="#recommend">今月のお勧めツアー</a></li>
        <li><a href="#kokunai">国内旅行特集！</a></li>
        <li><a href="#">アクセス</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">会社概要</a></li>
      </ul>
    </nav>
  </section>

  <section id="news" class="wrapper">
    <h2>新着情報(News)</h2>
    <div id="news-contents">
      <article class="news-topic">
        <img
          src="https://images.unsplash.com/photo-1628196250522-4996c0363b02?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkwOTExMQ&ixlib=rb-1.2.1&q=85">
        <p><time>2021.9.5 </time>東欧のツアー予約開始！</p>
      </article>
      <article class="news-topic">
        <img
          src="https://images.unsplash.com/photo-1630180860243-3af9b5107357?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkwOTM5NA&ixlib=rb-1.2.1&q=85">
        <p><time>2021.9.6 </time>北欧のオーロラツアー受付中！</p>
      </article>
    </div>
  </section>

  <section id="recommend" class="wrapper">
    <h2>今月のお勧めツアー</h2>
    <div id="recommend-contents">
      <article class="recommend-topic">
        <img
          src="https://images.unsplash.com/photo-1628961434253-296d21adc2a4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkyOTU0OQ&ixlib=rb-1.2.1&q=85">
        <p>エメラルドグリーンの海を楽しもう！グレードバリアリーフ７日間の旅</p>
      </article>
      <article class="recommend-topic">
        <img
          src="https://images.unsplash.com/photo-1629221078063-be07a8a5f867?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkyOTU3OA&ixlib=rb-1.2.1&q=85">
        <p>南国の島を満喫しよう！ハワイ８日間の旅</p>
      </article>
    </div>
  </section>

  <section id="kokunai" class="wrapper">
    <h2>国内旅行特集！</h2>
    <div id="kokunai-contents">
      <article class="kokunai-topic">
        <img
          src="https://images.unsplash.com/photo-1624374984719-0d146ea066e1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkyOTU3Nw&ixlib=rb-1.2.1&q=85">
        <p>富士五湖を満喫する旅　3泊4日</p>
      </article>
      <article class="kokunai-topic">
        <img
          src="https://images.unsplash.com/photo-1629718139981-6a9540b319fc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDkzMDcwOA&ixlib=rb-1.2.1&q=85">
        <p>砂丘で異空間を楽しむ　2泊3日</p>
      </article>
    </div>
  </section>

  <section id="footer">
    <p>© Travel SKY VIEW</p>
  </section>

</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

#header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  text-align: center;
  background-color: #99e1ee;
  position: fixed;
  z-index: 10;
}

#header a {
  text-decoration: none;
  color: black;
}

#global-navi {
  width: 100%;
  background-color: rgb(127, 127, 127);
  color: white;
  margin-top: 80px;
  position: fixed;
  z-index: 10;
}

#global-navi a {
  text-decoration: none;
  color: white;
}

#global-navi ul {
  display: flex;
  text-align: center;
}

#global-navi li {
  list-style: none;
  width: 17%;
  padding: 20px 0px;
  font-size: 14px;
  border-left: 1px solid #222222;
}

#global-navi li:last-child {
  border-right: 1px solid #222222;
}

#news {
  padding-top: 150px;
}

#news-contents, #recommend-contents, #kokunai-contents {
  display: flex;
  justify-content: space-between;
}

#news h2, #recommend h2, #kokunai h2 {
  margin-top: 30px;
  margin-bottom: 30px;
}

#news .news-topic, #recommend .recommend-topic, #kokunai .kokunai-topic {
  width: 45%;
}

#news img, #recommend img, #kokunai img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

#news p, #recommend p, #kokunai p {
  text-align: center;
  font-size: 20px;
}

#footer {
  height: 100px;
  text-align: center;
  background-color: #dddddd;
}

#footer p {
  line-height: 100px;
}

実装結果

See the Pen header_fix_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

実装のポイント

  • 固定するヘッダー(#header)とグローバルナビゲーション(#global-navi)に、position:fixedを指定する（CSSコード：24、3８行目）
  • ヘッダー(#header)とグローバルナビゲーション(#global-navi)のz-indexを2以上に指定する(コードでは10に指定）(CSSコード：25、39行目)
  • グローバルナビゲーション(#global-navi)のmargin-topに、上部の要素であるヘッダーの高さである80pxを指定する（CSSコード 37行目。これが無いとグローバルナビゲーションが最上部に寄ってしまい、デザインが崩れます）
  • 最初のコンテンツである新着情報(#news)のpadding-topに、ヘッダーとグローバルナビゲーションの高さの合計値である150pxを指定する（CSSコード 65行目　これが無いとコンテンツの最上部がデフォルト状態でヘッダーの下にもぐってしまいます）

私は実装する際に「ヘッダー固定にしたいならposition:fixed と z-indexを指定すれば良いじゃん」ってシンプルに考えていましたが、固定させるヘッダーの次のコンテンツの開始位置を気を付けないと、おかしなデザインになってしまうので要注意です。

以上、CSSでヘッダーとグローバルナビゲーションを上部に固定する方法について解説しました！

タイトルとURLをコピーしました