エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSだけでサイドバーを固定(スクロール追従)する方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSだけでサイドバーを固定(スクロール追従)する方法
今回は、CSSだけでサイドバーを固定する方法を紹介します。 コンテンツをスクロールすると、サイドバー... 今回は、CSSだけでサイドバーを固定する方法を紹介します。 コンテンツをスクロールすると、サイドバーの一部が途中から追従する動きは、ブログなど2カラムのサイトではよく使われています。 頻繁に使われるので、実装方法を覚えてきましょう。 サイドバーの下部にあるエリアが、スクロールに追従するようになります。 昔はJavaScriptを駆使して実装していましたが、今ではCSSだけでできるようになりました。 HTML bodyやヘッダー、フッターのHTMLは省略します。 <div class="wrapper"> <main class="main"></main> <aside class="sidebar"> <div class="widget"></div> <div class="widget widget--sticky"></div> </aside> </div> 以下のCSSで、.