今回はpositionプロパティの値の1つであるposition: stickyの使い方を解説していきます。
stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができるので便利です。
もくじ
※なお、本記事ではpositionプロパティのstatic・relative・absolute・fixedの使い方について解説していません。
これらについては【初心者向け】CSS positionで位置指定でする方法・使い方」をご参照ください。
position: stickyとは?スティッキーアイテム・コンテナについて
まずはposition: stickyの概要について紹介します。
position: stickyを使用することで、以下のように画面の途中から要素をウィンドウ上にくっつけたりすることができるようになります。
なおstickyが指定された要素のことをスティッキーアイテム、その親要素のことをスティッキーコンテナと呼びます。
1 2 3 4 5 6 7 8 9 10 11 |
<aside> /* スティッキーコンテナ */ <div class="sidebar-element se1"> サイドバー要素1 </div> <div class="sidebar-element se2"> サイドバー要素2 </div> <div class="sidebar-element se3"> /* スティッキーアイテム */ サイドバー要素3 </div> </aside><br> |
1 2 3 4 5 |
.se3 { position: sticky; top: 0px; background-color: rgb(84, 175, 255); } |
■(参考)position: stickyのブラウザ対応状況
現在ではIE(Internet Explorer)を除くほとんどの主要ブラウザに対応しています。
position: stickyの使い方
つぎに、stickyの使い方を紹介していきます。
stickyを使って要素を固定させたい場合、固定させたい要素に対して「position: sticky」を指定し、縦スクロール時の場合はtopやbottomプロパティ、横スクロール時の場合はleftやrightプロパティといった位置指定のプロパティを指定します。
■position: stickyの使い方
- 固定させたい要素に対して「position: sticky」を指定する
- 縦スクロール時の場合はtopやbottom、横スクロール時の場合はleftやrightなどの位置指定プロパティを指定する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <header>Header</header> <div class="container"> <div class="flex-wrap"> <main>Main Contents</main> <aside> <div class="sidebar-element se1">サイドバー要素1</div> <div class="sidebar-element se2">サイドバー要素2</div> <div class="sidebar-element se3">サイドバー要素3</div> </aside> </div> </div> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
body { text-align: center; } .container { width: 1000px; margin: 0 auto; } header { background-color: pink; line-height: 80px; margin-bottom: 60px; } .flex-wrap { display: flex; justify-content: space-between; } main { background-color: bisque; line-height: 2000px; width: calc(60% - 30px); } aside { width: calc(40% - 30px); } .sidebar-element{ line-height: 300px; margin-bottom: 30px; } .se1{ background-color: rgb(198, 229, 255); position: sticky; top: 0; } .se2{ background-color: rgb(172, 214, 251); } .se3{ background-color: rgb(129, 192, 247); } |
これでスティッキーアイテム(サイドバー要素1)がスクリーンの上部(top:0)に到達した時、こちらがスクリーン上に固定されるようになります。
また、下の方の要素に「position: sticky」「bottom: 0」を指定してあげると、スティッキーアイテムがスクリーンの下部(bottom:0)に到達した時、固定されるようにすることも可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.se1{ background-color: rgb(198, 229, 255); } .se2{ background-color: rgb(172, 214, 251); } .se3{ background-color: rgb(129, 192, 247); position: sticky; bottom: 0; } |
スティッキーアイテム・コンテナの動作の特徴
つぎに、position:stickyで設定したスティッキーアイテム・コンテナの動作の特徴を紹介します。
■スティッキーアイテム・コンテナの特徴
- (特徴. 1) スティッキーアイテムはコンテナ内でのみ固定される
- (特徴. 2) スティッキーアイテムは高さを有する
- (特徴. 3) スティッキーアイテムは重なり順をz-indexで指定できる
スティッキーアイテムはコンテナ内でのみ固定される
「position: sticky」を指定した要素は、fixedを指定した要素と同様、要素をスクリーン上のある位置に固定させて表示させることができます。
ただし、スティッキーアイテムはスティッキーコンテナ内でのみスクリーン上に固定されて移動することが可能です。
例えばサイドバー(例ではこれがスティッキーコンテナ)に対して「height: 1000px」などのように固定値を使った指定をしている場合は、指定した値より下にスクロールするとアイテムがそれより下には付いてこなくなります。
スティッキーアイテムは高さを有する
「position: sticky」を指定した要素は、position:absoluteやfixedを設定した要素と違って高さを有します。
これはstickyを指定して要素の位置を指定した位置に変更したとしても変わりません。
■通常のstatic・relativeを指定した要素と同様に高さがあります。
スティッキーアイテムは重なり順をz-indexで指定できる
スティッキーアイテムが複数あって重なる場合は、HTMLファイル内下の方に記述されている要素の方が上に重なっていきます。
なお、この重ね順に関してはz-indexを使用することで変更することが可能です。
以下はサイドバーに配置している要素3つに「position: sticky」「top: 0」を指定した例になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.se1{ background-color: rgb(198, 229, 255); position: sticky; top: 0; } .se2{ background-color: rgb(172, 214, 251); position: sticky; top: 0; } .se3{ background-color: rgb(129, 192, 247); position: sticky; top: 0; } |
z-indexプロパティ
positionなどでフロートしている要素の重ね順を指定することができるプロパティ
overflow:hiddenでうまく動かない場合
なお、「position: sticky」は、stickyを指定した要素の親(あるいは先祖要素)にoverflow: hidden ;の指定があると効かない場合があるので注意しましょう。
厳密には親(先祖)要素に「overflow」「overflow-x」「overflow-y」のvisible以外の値が指定されていると効かなくなります。
(関連記事)【CSS overflowの使い方】hiddenやscrollの違い
(応用)position: sticky使った表テーブルの左端列を固定
最後にposition: stickyの実際の使用例として、stickyを使って左端のセルだけ追従するテーブルの実装方法を紹介します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="table-scroll"> <table> <tbody> <tr> <th scope="row">見出し</th> <td>ここにテキストが入ります </td> <td>ここにテキストが入ります </td> </tr> <tr> <th scope="row">見出し</th> <td>ここにテキストが入ります </td> <td>ここにテキストが入ります </td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.table-scroll { overflow-x: scroll; } table { width: 1000px; } table, th, td { border: 1px solid #333; } tbody th { background-color: #36a93b; color: #fff; width: 200px; position: sticky; left: 0; } |
こちらは「position: fixed」を使っても実装は可能ですが、fixedの場合だと1列目の下に2列目以降のセルが入り込んでしまうため、stickyを使った方が簡単にできます。
まとめ
まとめです。今回はpositionプロパティの値の1つである「position: sticky」の使い方を紹介しました。
position: stickyが使用できるようになると途中から追尾してくるサイドバーなどをCSSのみで実装することができるようになります。
使えるようになると非常に便利ですので、ぜひ覚えておきましょう。
今回は以上になります。最後までご覧頂き、ありがとうございました。
・(まとめ)初心者向けHTMLの基本
・リンク:aタグ
・見出し:h1〜h6
・画像:img
・リスト:ul・ol・li
・説明リスト:dl・dt・dd
・テーブル・表:table
・グルーピング:div/span
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。