ブログでよく見られる､サイドバー固定の方法です｡完成形はこちら｡
ポイント解説
親要素にdisplay:flexをして､サイドバーにposition: sticky;を書きます｡heightを100%にして､実現します｡
HTMLは以下になります｡
HTML
<article class="container">
<div class="wrap">
<div class="item">
<figure><img src="images/compo.JPG" alt=""></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="item">
<figure><img src="images/sakura.JPG" alt=""></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
<div class="item">
<figure><img src="images/tou.JPG" alt=""></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>
<aside class="side-bar">
<div class="box">
<figure><img src="images/cloud.JPG" alt=""></figure>
<p>サイドバー</p>
</div>
</aside>
</article>
親要素はcontainerです｡この中に､コンテンツ部分のwrap､サイドバーのside-barがあります｡itemで画像と文字を囲んでいます｡ヘッダやフッタのHTMLは含まれておりません｡
CSSは以下になります｡
@media (min-width: 768px) {
.container{
margin-top: 150px;
display: flex;
justify-content: space-between;
gap: 1rem;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.wrap{
width: 80%;
}
.side-bar{
width: 40%;
position: sticky;
top:120px;
height: 100%;
}
}
親要素(container)にdisplay:flexを書き､コンテンツとサイドバーを横並びにします｡widthなどは､自由で構いません｡ちなみに､margin-topは､必須ではありません｡
ヘッダを固定しているので､コンテンツが被ります｡意図的に､marginを設定しています｡wrapとside-barのwidthも自由で構いません｡
ヘッダとフッタのCSSは省いています｡
ちなみに､メディアクエリで対応しています｡理由は､768px以上から､サイドバーを右側に置きたいので､メディアクエリで対応しました｡この方が実用性があると､思っています｡
side-barにposition: stickyを書き､topでどの位置にするか､設定します｡ここでは120pxにしています｡heightを書かないと固定されません｡
さいごに
ブログで割と､目にする機会がありますね｡多くは､ソーシャルボタンや､アフィリエイトをしているのであれば､広告を固定することもありますね｡
当サイトはトップページのみ､プロフィールを固定しています｡他ページでは､しておりません｡
興味のある人は､ご参考に｡バックアップを取ってから､対応しましょう｡