Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssで追随させる方法、スクロールしてもついてくるよ

投稿日:

Pocket

 

うも、チャーさんです。

 

あなたは、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と書いてある、

サイドバーの位置は、画像の通りですが、

 

 

2枚目の画像では、

navigationサイドバーの位置が、

変わりましたね。

 

このように、

poisition:fixed;では、

好きな位置に固定して表示させることができます。

 

 

で、それを操作する方法が、

top: px;

left: px;

right: px;

bottom: px;

 

これらの最低2つを選び、

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;

と書きましょう。

 

やり方は全部この記事に書いておいたので、

参照してみてください。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-css

スポンサードサーチ

関連記事

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。