CSS positionページトップボタン、スクロール追随ボタン、表見出し(ヘッダー)固定の作り方

HTML・CSS
2026.06.28

実務でよく使用する position（ポジション）プロパティ の応用的なユースケースを紹介します。

Web制作では、ちょっとしたUIパーツを「どこに・どう配置するか」、そして「スクロール時にどう動かすか」によって、ユーザーの操作性や利便性が大きく変わります。特に、ページのスクロール中でも必要なボタンや情報を見失わないように配置することは、使いやすいWebサイトを作るうえで重要なポイントです。

そのような場面で活躍するのが position: fixed と position: sticky です。これらを活用することで、ページトップボタンを画面右下に固定したり、購入ボタンをスクロールに追随させたり、長い表の見出しをスクロール中も表示し続けたりと、実務でよく使われるUIを実装できます。

ここでは、position を使って実装する次の3つの定番UIパターンを、サンプルコードを交えながら初心者にも分かりやすく解説します。

・画面右下にページトップボタンを固定する
・スクロールしても追随する購入ボタンを画面下に固定する
・長い表の見出し行（ヘッダー）をスクロール中も固定する

それぞれの実装方法だけでなく、fixed と sticky の使い分けや、それぞれのプロパティが適している場面についても紹介します。

「スクロールに合わせてUIをどう動かせばいいの？」「fixed と sticky はどう使い分ければいいの？」という疑問を、実務で役立つ3つの実践例を通して解消していきましょう。

画面右下にページトップボタンを固定する

fixedを使うと、スクロール位置に関係なく常に画面の決まった位置に要素を表示できます。

例）style.css

.page-top {
  position: fixed;
  bottom: 24px; /* 画面下端から24px */
  right: 24px; /* 画面右端から24px */
  width: 48px;
  height: 48px;
  background-color: steelblue;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;　/* 行の高さを要素の高さ(48px)と同じにして、矢印をボタンの上下中央に配置させる */
  cursor: pointer;　/* マウスを乗せたときにカーソルを指の形にし、クリックできることを示す */
  font-size: 20px;
}

例）index.html

<html>
<head>
  <title>ページのタイトル</title>
  <style>
    @import url(style.css)
  </style>
</head>
<body>
  <div class="page-top" onclick="window.scrollTo(0,0)">↑</div>
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
    <p>コンテンツ3</p>
    <p>コンテンツ4</p>
    <p>コンテンツ5</p&g;
    <p>コンテンツ6</p>
    <p>コンテンツ7</p>
    <p>コンテンツ8</p>
    <p>コンテンツ9</p>
    <p>コンテンツ10</p>
    <p>コンテンツ11</p>
    <p>コンテンツ12</p>
    <p>コンテンツ13</p>
    <p>コンテンツ14</p>
    <p>コンテンツ15</p>
    <p>コンテンツ16</p>
    <p>コンテンツ17</p>
    <p>コンテンツ18</p>
    <p>コンテンツ19</p>
    <p>コンテンツ20</p>
    <p>コンテンツ31</p>
    <p>コンテンツ32</p>
    <p>コンテンツ33</p>
    <p>コンテンツ34</p>
    <p>コンテンツ35</p>
    <p>コンテンツ36</p>
    <p>コンテンツ37</p>
    <p>コンテンツ38</p>
    <p>コンテンツ39</p>
    <p>コンテンツ40</p>
</body>
</html>

※window.scrollTo(0,0) はJavaScriptのコードで、クリックしたときにページの先頭へスクロールする動作を指定しています。JavaScriptはWebページに動きや操作への反応を加えるためのプログラミング言語です。詳しくは別の記事で解説します。

ブラウザでの表示結果

右下のアイコンを押下するとJavaScriptのコードが実行されて、ページの先頭へスクロールします。

スクロールしても追随する購入ボタンを画面下に固定する

ショッピングサイトの商品ページなどでよく見かける「カートに入れる」「購入する」ボタンは、position: fixed を使ってスクロールしても画面に表示され続けるように実装できます。 例）style.css

.buy-button {
  position: fixed;          /* ブラウザ画面に固定 */
  bottom: 20px;             /* 画面の下端から20px上に配置 */
  right: 20px;              /* 画面の右端から20px内側に配置 */
  background-color: crimson;
  color: white;
  padding: 16px 32px;       /* ボタン内側の余白 */
  border-radius: 4px;       /* 角を少し丸める */
  text-decoration: none;    /* リンクの下線を消す */
}

例）index.html

<html>
<head>
  <title>ページのタイトル</title>
  <style>
    @import url(style.css)
  </style>
</head>
<body>
  <h1>商品名</h1>
  <p>商品の説明文がここに入ります。</p>
  <p>...(中略)...</p>
  <p>商品の説明がさらに続きます。</p>
  <a href="https://example.com/cart" class="buy-button">カートに入れる</a>
</body>
</html>

ブラウザでの表示結果 ページをスクロールしても、ボタンは常に画面右下に表示され続けます。 このCSSのポイントは2つあります。

①<a> タグにクラスを指定して、ボタンとして装飾する → <a href=”…”>〜</a> はリンクを作るためのHTMLタグです。ここに class=”buy-button” を指定して、CSSでボタンらしい見た目(背景色、内側の余白、角の丸みなど)に装飾しています。text-decoration: none; で、リンク特有の青い下線を消しています。

② position: fixed でブラウザ画面の右下に固定する → bottom: 20px; right: 20px; で画面の右下から20px内側の位置に固定します。 リンクの貼り方 <a href=”リンク先のURL”> の リンク先のURL の部分に、購入ページのURLを書きます。

<a href="https://example.com/cart" class="buy-button">カートに入れる</a>

＞＞CSS position（ポジション）種類.static、relative、absolute、fixed、sticky使い方

長い表の見出し行をスクロール中も固定する

件数の多い表を下にスクロールしていくと、見出し行（ヘッダー）が画面の外へ消えてしまい、いま見ている数字がどの列の値なのか分からなくなります。見出しのセルに position: sticky を指定すると、表をスクロールしても見出し行が画面の上端で止まって固定され、常に表示され続けます。

例）style.css

table {
  border-collapse: collapse;　/* 隣り合うセルの枠線を1本にまとめる */
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

thead th {
  position: sticky;　/* スクロールしても固定する */
  top: 0;　/* 画面の上端で止める */
  background-color: steelblue;　/* 背景色は必須（無いと下の行が透ける） */
  color: white;
}

例）index.html

<html>
<head>
  <title>ページのタイトル</title>
　<style>
　　@import url(style.css)
　</style>
</head>
<body>
  <table>
　<thead>
　　　<tr>
　　　　<th>注文番号</th>
　　　　<th>商品名</th>
　　　　<th>金額</th>
　　　</tr>
　 </thead>
　 <tbody>
　　　<tr><td>0001</td><td>商品A</td><td>1,200円</td></tr>
　　　<tr><td>0002</td><td>商品B</td><td>2,500円</td></tr>
　　　<tr><td>0003</td><td>商品C</td><td>980円</td></tr>
　　　<tr><td>0004</td><td>商品D</td><td>4,300円</td></tr>
　　　<tr><td>0005</td><td>商品E</td><td>1,800円</td></tr>
　　　<tr><td>0006</td><td>商品F</td><td>3,100円</td></tr>
　　　<tr><td>0007</td><td>商品G</td><td>2,200円</td></tr>
　　　<tr><td>0008</td><td>商品H</td><td>760円</td></tr>
　　　<tr><td>0009</td><td>商品I</td><td>5,400円</td></tr>
　　　<tr><td>0010</td><td>商品J</td><td>1,500円</td></tr>
　　　<tr><td>0011</td><td>商品K</td><td>2,900円</td></tr>
　　　<tr><td>0012</td><td>商品L</td><td>3,600円</td></tr>
　</tbody>
　</table>
</body>
</html>

ブラウザでの表示結果（初期表示）

表を下にスクロールしても、見出し行は固定されたままになります。

＞＞バッジ(ラベル)、モーダルウィンドウの作り方.CSS positionで作るUIデザインパーツ実装

＞＞CSS position（ポジション）種類.static、relative、absolute、fixed、sticky使い方

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