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

CSSで位置固定の作り方と使い方を徹底解説CSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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に変化し、アニメーションが実行されるようになっています。

まとめ

CSSを使った位置固定の方法について解説しました。

positionプロパティを使った方法とtransformプロパティを使った方法があり、それぞれに対してサンプルコードを紹介しました。

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

Webデザインにおいて位置固定は非常に重要な技術の1つであるため、ぜひ参考にしてみてください。