position: stickyを使用して追従要素を作成する【実装方法を解説】
position: stickyの実装方法と解説を当記事で書いていきます。
最近、Webページでよく見るようになった追従型のコンテンツを作りたい時に便利なposition: sticky。以下のようなやつですね。
広告を追従させたり、目次を追従させたりと用途が結構様々に使用できるので覚えておいて損がないと思います。
postion: stickyの実装方法
position: stickyの実装方法は簡単です。CSSにおいて以下の記述を足すだけ。
.sticky {
position: sticky;
position: -webkit-sticky; /* safari */
top: 1em;
}【実装の注意点】
親要素に高さ指定があることが必須です。
親要素に高さがないとうまく挙動しません。（仕様です）
親要素に高さを指定し、固定したいコンテンツを子要素に入れて、sticky用のCSSを書いていけば実装可能です。
まずは以下のようなHTMLを用意します。
<div class="parent">
<div class="sticky">
<ul class="list">
<li>
<a href="#" title="">目次1</a>
</li>
<li>
<a href="#" title="">目次2</a>
</li>
<li>
<a href="#" title="">目次3</a>
</li>
</ul>
</div>
</div>
そしてCSSは以下のように記述。
.parent {
height: 100%;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 1em;
will-change: auto;
}高さの指定はただ横着して100%にしていますが、それぞれのコンテンツ要素に合わせて直してください。通常のWebサイトのようであればサイドバーコンテンツに実装するのが通例なので、heigthは100%にしても特に問題ないと思いますが…。
position: stickyの対応ブラウザは？
上記の画像がよく分からないという方は以下で対応表を作成しました。「●」が付いているのが対応しているもの。「×」が対応していないものになります。
position: stickyの対応ブラウザ一覧
| IE | × |
|---|---|
| Edge | ○ |
| Firefox | ○ |
| Chrome | ○ |
| Safari | ○ |
IEだけ対応していないですね。（デザイナー泣かせのIEなので無視しましょう）モバイルの方は、追従コンテンツは通常使用しないので無視して良いと思います。（ヘッダーの固定などのも使用する場合がありますが、そこはposition: fixedでもいい気がします）
Webデザインのおすすめ勉強法
Webデザインのおすすめ勉強法は、動画学習を使用する事です。
動画学習を使用したおすすめ勉強法の詳しい解説は以下の記事で書いています。合わせてお読みいただくと理解が深まると思います。
Webデザインは参考に出来るサイトはいくつもあれど、実際に書いてみると挙動と違ったり、そもそもコーディングルールなどをすっ飛ばして書いてしまう場合があります。
そこで基礎を動画学習で身に着けることによって正しい技術、新しい技術を習得することができます。おすすめの動画学習サイトはUdemy。
単価の動画と、講座ごとに質問が可能なので分からない部分が出てきても解決可能です。更に、返金保証が30日分付いているので「自分には合わなかった」という場合でも、安心です。
UdemyのおすすめWebデザインコース
- HTML5+CSS3 手を動かしてマスターする WEBデザイン
- 未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
- Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
自分にあった講座を探してみてください！
人気記事【独学者おすすめ】プログラミング学習動画サービス3選