CSS position: stickyの使い方。効かない!ときはここをチェック。ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

position: stickyの使い方。効かない時は位置や高さを!

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

position: stickyの使い方。

サイドバーをスクロールの途中で固定させたい場合、以前はJavaScriptなどを組み合わせなければ実装できなかった。それがposition: stickyの登場により、CSSだけで可能になった。

ブラウザ対応もすでに追いついており、使い方を覚えると、とても便利なプロパティとなる。

position: stickyの使い方。効かない時。


position: stickyが効かないとき。

位置や高さの指定など、CSSの仕様を踏まえておく。

ただし単にサイドバーに「position: sticky;」だけを指定しても、何も変わらない。

CSSの仕様上、「position: sticky;」を使用する時は、、、

  1. 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されているか?
  2. 「position: sticky;」と一緒に、高さ「height」が指定されているか?
  3. 「position: sticky;」を指定した要素の親要素の「overflow」が初期値の「visible」となっているか? 逆に、hidden、 scroll、 auto、 overlay」のいずれかが指定されていないか?)

が、必要となる。

最低限、このセットで「sticky」は機能する。

もしうまく効かないときは、この3つをチェックすると良い。


position: stickyの実装例。

mainタグとasideタグで2カラムにする場合。

例えば一般的なブログのような2カラムにする場合は、以下の通りで実装できる。そしてサイドバーになるasideを「sticky」にする。

position: stickyの使い方。

HTML

例)

<div>
 <main>メインコンテンツなど</main>
 <aside>サイドバーなど</aside>
</div>
CSS

例)

div {
 display: flex;
 overflow: visible; /* 初期値なので省略可。hiddenなどが指定されていないように注意。 */
}
main {
 width: 70%;
}
aside {
 position: sticky;
 top: 50px;
 width: 30%;
 height: 100%;
}

効かないときは、もう一度ここをチェック。

今回の例では、mainとasideをdivで囲み、「display: flex」を指定している。これで子要素のmainとasideがFlexアイテムとなり、自動的に2カラムになる。

上記の繰り返しとなるが、チェックする項目としては、、、

asideに、「top」などの「位置」のしきい値が指定されているかをチェック。

  • 「position: sticky」を指定した要素に、位置を決める「top、 right、 bottom、 left」のいずれかを併用する必要があるため。

asideに、「高さ」が確保されているかをチェック。

  • 「position: sticky」を指定した要素に、高さがなければ機能しないため。

mainとasideの親要素の「overflow」プロパティが初期値の「visible」かをチェック。

  • 「overflow」の初期値は設定しなければデフォルトの「visible」となる。もし「hidden、scroll、auto、overlay」の値が指定されていると、CSSの仕様上、「position: sticky」は機能しない。

position: stickyの使い方。効かない時は位置や高さを!

MDN: position – CSS: カスケーディングスタイルシート | MDN


2023.01.21追記)

ChatGPTに聞いてみた場合。

「CSSのposition: stickyの使い方を教えてください。」

ChatGPTによる、CSS position: stickyの使い方の説明。

英語で返答が来たので、Google翻訳で日本語に。

ChatGPTによる、CSS position: stickyの使い方の説明。

現実的にはこれでは実装できない。というよりもこれでは効かないため、失敗してしまうことが多いのだ。

動作させるにはコードが足りないので、これを盲信すると確実に、stickyは効かない。
なので次の質問をしてみた。

「CSSのposition: stickyが効きません。どうすれば良いですか?」

ChatGPTによる、CSS position: stickyが効かないときの解決方法。

また英語で返答が来たので、Google翻訳で日本語に。

ChatGPTによる、CSS position: stickyが効かないときの解決方法。

おおむね正しい感じだが、文章が長く、くどく、ちょっと読みにくい。

z-indexに触れているが、z-indexは必須ではない。設定しなくても「position: sticky;」は実装できる。

また、ブラウザのサポートについての言及があるが、IEのサポート終了により現在のモダンブラウザ(Safari、Chrome、Firefox、Edge、Operaなど)では問題なく使用できる。


このChatGPTの説明の正確性は? Can I Useによるチェック。

Can I Useによる、ブラウザ実装状況のチェックを改めてしてみた。

2023年時点使われているブラウザ、いわゆるモダンブラウザでの実装状況は問題なく、気兼ねなく使える。

Can I Useによるposition: stickyのブラウザ対応状況。

参照:“position: sticky” | Can I use… Support tables for HTML5, CSS3, etc

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。