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

HTML・CSS

実務でよく使用する 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>
<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使い方