どうも、チャーさんです。
あなたは、cssでサイドバーなどを、
追随させる方法を知りたいと思っていませんか？
この記事では、スクロールしても、
ちゃんとサイドバーがついてくるようになる、
その方法を説明しています。
なので、あなたがこの記事を読めば、
cssでサイドバーを追随させれるようになります。
もしあなたが、cssでの追随をしたいなら、
このままスクロールして読んでみてください。
スポンサードサーチ
目次
cssでサイドバーなどを追随させる方法
で、結論から言います。
cssでサイドバーなどを追随させたい場合は、
position:fixed;
を使えば完了です。
理由はposition:fixedを使えば、
画面をスクロールしても、
画面上の指定した位置に貼りついてくれるからです。
ということで早速具体例をみてみましょう。
(右のスクロールバーが下にいくのに、
緑のnavigationがずっとついてくるのにご注目。)
こんな風に、下にスクロールしても、
ちゃんと張り付いたまま、下についてきてくれますね！
なので、cssでサイドバーなどを追随したければ、
position:fixed;
を使えばできるわけです。
スポンサードサーチ
cssで追随させるための具体的な方法を説明
で、じゃあ実際にどう書いていけばいいか、
それを説明します。
追随対象を作りましょう。
まずは、追随させたい物を用意しましょう。
理由はそれがないとそもそも、
追随させる対象がないからです。
で、追随させるためには、
<div>タグなどで、ボックスを作るといいです。
ボックスはわかりやすいように、
高さと幅をつけて、背景色もつけときましょう。
divタグのボックスのコード例
<head>
<style>
.box {
width:100px;
height:100px;
background-color:limegreen;
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
position:fixedを書きましょう
で、ボックスを作ったら、
次は、position:fixed;をつけましょう。
これを書くことで、
cssでの追随が可能になります。
で書く場所は、
先ほど作ったボックスのcssの中に書けばOKです。
例
<style>
.box {
width:100px;
height:100px;
background-color:limegreen;
position:fixed;
}
</style>
ページの長さを作ろう
さて、これで追随してくれるようになりました。
しかし、このままでは、
まだ不十分です。
cssでサイドバーなどを追随させるには、
スクロールすることが前提です。
しかし現状のこのままでは、
スクロールするほどのページの長さがありません。
なので、ページを長くしましょう。
でページをスクロールできるほど長くするには、
bodyにheightを多めに適用しましょう。
理由は手間がかからずページを長くできるので。
bodyにheightを設定する例
<style>
body {
height:9000px;
}
</style>
ブラウザで確認してみましょう
さて、ここまでできたら、
htmlファイルを保存して、
実際にブラウザで表示してみてみましょう。
(ブラウザ表示はクローム上で、
htmlファイルをドラッグアンドドロップすると、
実行できます。)
そして、ページを下にスクロールしてみましょう。
すると画面右の縦のバーが下に、
下がってくはずですが、
先ほど作ったボックスはそのままついてきます。
上記のようになれば、
追随は成功です。
もしわかりにくければ、
bodyに文章書いたりして、
スクロールされてるか確認しやすくしましょう。
スポンサードサーチ
cssで追随させる対象の位置を変えたい場合
ちなみに、
position:fixed;では表示させたい物の、
画面上での場所を指定できます。
例えば、
現在navigationと書いてある、
サイドバーの位置は、画像の通りですが、
２枚目の画像では、
navigationサイドバーの位置が、
変わりましたね。
このように、
poisition:fixed;では、
好きな位置に固定して表示させることができます。
で、それを操作する方法が、
top: px;
left: px;
right: px;
bottom: px;
これらの最低２つを選び、
pxの前に数値を入力すれば、
入れた分の数値だけ移動してくれるわけです。
例えば、
top: 20px;
left: 20px;
とすれば、
一番上を起点に20px分下に、
一番左端を起点に20px分右に動いて動いてくれるわけです。
例としては下の画像の感じです。
なので、
topとleftの数字を大きくすればするほど、
どんどん右下の方に動いてくわけです。
とまぁ、文字だけでみるとわかりづらいですが、
これは実際にあなた自身で、
数値を入力して、どういう風に動くかをやってみましょう。
するとわかりやすいです。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssでサイドバーなどを、スクロールしても、
追随するようにしたければ、
position:fixed;を使いましょう。
また追随させるサイドバーの固定する位置を、
動かしたい、指定したい場合は、
top: px;
left: px;
right: px;
bottom: px;
も合わせて書きましょう。
そうすれば、好きな位置に表示して、
追随させれます。
さて、これであなたは、
cssでの追随について、
ある程度知識がついたと思います。
なのでそれをより完璧なものにするために、
実際にあなた自身でコードを書いて、
cssで追随させてみましょう。
ということで、
まずはエディターを立ち上げ、
bodyにheightを設定し、
ボックスを作ってみましょう。
そしてボックスにposition:fixed;
と書きましょう。
やり方は全部この記事に書いておいたので、
参照してみてください。
それでは、読んでもらってありがとうございました。
チャーさん
