ヘッダーや要素の固定（CSS）

Webサイトの制作をしていると「ヘッダーを固定したい」であったり特定の要素を画面上へ固定したいといった要望がありますよね。

今回は初歩的な方法でCSSによる要素の固定方法を紹介したいと思います。

まずはサンプルの完成形がこちらになります。

f:id:yonetggp:20180925005640p:plain

サンプルとしてダミーのヘッダーとコンテンツを簡単に用意してみました。
HTMLのサンプルは以下になります。

<div class="wrapper">
    <header class="header">
      <div class="header-bk">
        <h1>Header Fixed</h1>
        <nav cladd="header-nav">
          <ul class="header-nav_list">
            <li class="header-nav_item">test01</li>
            <li class="header-nav_item">test02</li>
            <li class="header-nav_item">test03</li>
          </ul>
        </nav>
      </div>
    </header>
    
    <div class="contents">
      <div class="articles">
        <article>
          <div class="article-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting      industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>     
        </article>

       <!-- 以下省略 -->

      </div>
    </div>
  </div>

次にCSSファイルを準備するのですが、今回ヘッダーを固定する際に必要なプロパティは以下になります。

position: relative;
position: fixed;
top: 0;
left: 0;
z-index: 1 (任意の数値);

まずヘッダーを固定させる為に position を利用して全体の親要素（今回では .wrapper）に相対値を指定します。

.wrapper {
  position: relative;
  width: 100%;
}

次に固定させたい要素（今回は headerタグで囲まれた部分）に position: fixed; を指定します。
position: fixed; は今回のような特定要素を固定したい場合に使うことができます。

top, left は固定させたい位置を指定することができます。
ここでは画面上部に固定させたいので、それぞれの値を '0' にしています。

positionを使った場合、重なり順（どの要素を全面に出すか等）の問題が出てくるので、z-index で最前面にくるよう任意の数値を指定しましょう。

.header {
  widh: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

以上で簡単に要素の固定を実装することができました。さらに細かい調整を加えたい場合は js で記述する必要が出てきますが、単純に要素固定させておきたい場合などは以上で事足りるかと思います。
途中出てきた position, top, left についてよくわからないという方は「おすすめ参照」を貼っていますのでぜひ参考にしてみてください。

サンプル：Header Fixed
codepen.io

Mile Stones

駆け出しのWebデザイナーが知って得した情報を紹介します。

ヘッダーや要素の固定（CSS）