CSSで位置固定するやり方と使い方を初心者向けに徹底解説

はじめに
●CSSで位置固定をする方法
- ○positionプロパティを使う方法
- ○transformプロパティを使う方法
●位置固定の応用例とサンプルコード
- ○ヘッダーの固定
- ○スクロールするとフェードインする要素
まとめ

はじめに

Webサイトのデザインにおいて、要素を固定しておくことは非常に重要です。

スクロールしても画面上に固定された要素は、ユーザーにとって使いやすく、また重要な情報を伝えるための方法としても有用です。

このような位置固定をCSSで実現する方法を初心者向けに解説していきます。

●CSSで位置固定をする方法

CSSで位置固定をする方法は、2つあります。

1つはpositionプロパティを使う方法で、もう1つはtransformプロパティを使う方法です。

それぞれの方法を順に解説していきます。

○positionプロパティを使う方法

positionプロパティを使う方法は、要素の位置を指定する方法です。

まず、固定する要素に対してposition: fixed;を指定します。

次に、top、right、bottom、leftプロパティを使って、要素をどの位置に配置するかを指定します。

たとえば、画面上部に固定したい場合は、次のように指定します。

固定したい要素 {
  position: fixed;
  top: 0;
  left: 0;
}

上記のコードでは、要素を画面の左上に固定しています。

同様に、rightやbottomを指定することで、画面右端や下端に固定することもできます。

また、leftやright、topやbottomを組み合わせて、要素を画面の中央に固定することもできます。

○transformプロパティを使う方法

transformプロパティを使う方法は、要素を移動させる方法です。

まず、固定する要素に対してposition: absolute;を指定します。

次に、translateプロパティを使って、要素をどの程度移動させるかを指定します。

たとえば、画面上部に固定したい場合は、次のように指定します。

固定したい要素 {
  position: absolute;
  transform: translateY(0);
}

上記のコードでは、要素を画面の上端に配置した後、translateYで0px移動させています。

同様に、translateXを使うことで水平方向に移動させることもできます。

●位置固定の応用例とサンプルコード

位置固定は、ヘッダーやフッター、ナビゲーションなど、様々な要素に適用することができます。

次に、実際に使われることが多い応用例と、そのサンプルコードを紹介します。

○ヘッダーの固定

ヘッダーはWebサイト上で最も重要な要素の1つであり、画面上部に固定しておくことで、常にユーザーに見えるようにすることができます。

<header class="header">
  <nav class="nav">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </nav>
</header>

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.nav ul {
  display: flex;
}
.nav li {
  margin-right: 20px;
}
.nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

上記のコードでは、header要素を画面上部に固定しています。

また、nav要素内にはリスト形式のメニューを配置しています。

nav要素には、flexboxを使って、メニュー項目を中央揃えにしています。

また、a要素には文字装飾を施して、メニュー項目をユーザーにわかりやすく表示しています。

○スクロールするとフェードインする要素

スクロールすると要素がフェードインするという効果は、Webデザインにおいて非常によく使われる効果の1つです。

<div class="box"></div>

.box {
  position: relative;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.box:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.box.fade-in {
  opacity: 1;
}
.box.fade-in:after {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

上記のコードでは、box要素が画面内に表示された時、スクロールするとフェードインするようになっています。

まず、box要素の親要素に対してposition: relative;を指定し、box要素に対してopacity: 0;を指定します。

次に、box要素に:after疑似要素を追加し、position: absolute;で要素を中央に配置しています。

さらに、:after疑似要素には、アニメーションを追加しています。

box.fade-inクラスが要素に追加された時に、opacityが1に変化し、アニメーションが実行されるようになっています。