むねひろ@プログラマープログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。munehiro超簡単!CSSでサイドバーを追従させる方法ツイートシェアはてブLINEPocket前回の記事でjQueryを使ってサイドバーを追従する方法をご紹介しました。jQueryでサイドバーを追従させる方法フッターやコンテンツエリアの位置情報を取得したり、面倒ですよね。スクロールする度に起動されるので環境によっては重く感じることもあるかもしれません。それが、CSSで簡単に出来るようなので実際に作ってみました。CSSでサイドバーを追従させるコード前回作成したjQueryで追従させるサンプルです。jQueryで追従そしてCSSでサイドバーを追従するサンプルです。CSSでサイドバーを追従HTMLはjQueryで追従のときと同じです。jQueryは追従に関するものは削除しました。CSSのサイドバー追従に関するものは以下の通りです。50px;}だけです。これを追加しただけで追従するようになりました。普通に作成したサイドバーに上のコードを追加しただけです。指定した位置に来たら固定表示され、同列か上の階層のブロック要素が来たら上に押し上げられるというものです。サイドバーの追従に関して言えば、そのために用意されたんじゃないか?と思うほど便利なものですね。まとめjQueryは画面が重くなったりカクカクしたりするから出来るだけ多様しない。CSS3で出来ることが大幅に増えたためCSS3で解決する場合はそちらを利用する。指定位置まできたら固定表示され、次のブロック要素がきたら上に押し上げられる。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。CSSで要素の角を丸くする「border-radius」を設定し柔らか味のあるサイトへjQueryでサイドバーを追従させる方法RECOMMENDこちらの記事も人気です。HTML+CSS2018.8.5HTMLとは?HTML5の基本構成とはHTML+CSS2018.9.13CSSで画像やブロック要素をど真ん中に表示する方法HTML+CSS2019.9.15CSSのletter-spacingでテキストの文字の間隔を狭くする方法HTML+CSS2018.9.12CSSで要素の角を丸くする「border-radius」を設定し柔らか味...HTML+CSS2018.8.16HTMLのINPUTタグの種類を、お問い合わせフォームで解説HTML+CSS2018.9.17CSSで台形のHTML要素を描く方法HTML+CSS2018.8.7CSSでULのリストを横並びのメニューにする方法HTML+CSS2018.9.18CSSでグラデーションを作成する方法むねひろ現在36歳。プログラマー歴16年。高校卒業後は調理師見習いをしていたけど、不況で先が不安になり離職。その後上京しハローワークの紹介でプログラマーに。分からないことだらけで辛い日々だったけど、3年頑張ったら色々見えてきてフリーランスに。面白そうなシステム開発をもっとしたい。