fixedでサイドバーを固定する方法

当サイトのヘッダと矢印はfixedで固定しています｡追加で､サイドバーを固定したい｡その方法を案内します｡

完成

サイドバーを作って､固定してみました｡縦スクロールや画面サイズが変わっても､位置は変わりません｡画像をそうしてみます｡サイドバーの役割ですね｡

なお､この記事をスマホで見ていたら､サイドバーは表示されません｡

サイドバー

HTML

HTMLは以下になります｡

<div class="side">
<figure><img src="images/cloud.JPG"></figure>
<p>サイドバー</p>
</div>

主要な部分のみ､抜粋しています｡

CSS

CSSは以下になります｡

.side{
display: none;
}

@media (min-width: 768px) {

.side{
display: block;
position: fixed;
top:120px;
right: 20px;
width: 15%;
}
}

スマホでは非表示にし､画面サイズが768pxを超えるとサイドバーが出現します｡スマホでサイドバーを画面の横に置くのはあまり見かけません｡

非表示になっていたものをdisplay:blockで表示させます｡topとrightで位置を決めます｡ここでは､トップから120px､右から20pxの位置に置きます｡あとはwidthででサイズを決めます｡

stickyで固定する方法もある

flexを使い､サイドバー固定する方法もあります｡以下の記事で解説していますので､気になる方はチェックして下さい｡

• 浪人のサムライ
  サイドバーを固定する

fixedの方が簡単か｡ただ､広告など､1つのコンテンツを表示させるのが一般的か｡サイドバーのコンテンツが多いと､フッタと被り､そして､全て表示されません｡

テストでしてみましたが無理でした｡なので､コンテンツに応じて使い分けるのがいいですね｡

当サイトは､限定的な使い方ををしています｡

さいごに

位置を決めるだけで簡単に実装できます｡気になる方はお試しあれ｡