Code

【HTML/CSS初心者】便利なposition「sticky」の基本の使い方を解説|ときしらずの宿の模写

2020年11月7日

 

こんにちは、イケゾーです。

「position: sticky;」とは、ヘッダーやナビ、サイドバーなど指定した要素をスクロールした時に、指定した位置に貼り付かせる便利なモノです。

はじめは「position: fixed;」と何が違うの?と思ってしまいますが、stickyとは粘着という意味で、実践していくと違いがお分かりいただけます。動画や図を交えながら解説していきます。

 

今回は、「ときしらずの宿」様のサイトのトップ画像に使われているテクニックをご紹介します。パララックスとも呼ばれ、これを実現するには通常JavaScriptが必要になりますが、CSSのみで実現する方法を解説します。

スクロールした時に、トップ画像の位置は固定したまま、次の要素が重なって表示される

default

(こちらは「ときしらずの宿」様のサイトを模写したものです)

 

この記事はこんな人におすすめ!

  • 「position: sticky」を初めて使う
  • 「position: fixed」と「position: sticky」の違いがよくわからない
  • トップ画像を固定して、main本文をスクロールさせたい
  • JavaScript,jQueryを使わずに、要素を固定したい

 

また、当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

【HTML/CSS初心者】便利なposition「sticky」の基本の使い方を解説

では、下記の手順でやっていきましょう。
positionプロパティ全般の説明から、「sticky」の使い方、「fixed」との違いを動画で確認していきます。

 

「position」プロパティの基本

HTML要素は、記述した順番通りに表示されていきます。後に書いたものが下もしくは右に表示されていく仕様ですね。

 

ただし、WEBデザインをしていくにあたり、デザイン性の向上やユーザの利便性を考えると要素を自由に配置できる技術が必要になります。そこで、要素の位置を指定するときに使うCSSが「position(ポジション)」なのです。

 

positionプロパティは4種類あり、基準位置からの位置を指定するときに使われ、ヘッダーを常に上部に固定表示させたりすることができます。

position: static 初期値。
topやleftを入力しても適用されない。
position: relative 相対位置の指定をする。
通常配置される位置を基準に、位置を指定する。
position: absolute 親要素に「position: static」以外(だいたいrelative)を指定したときに、
親要素を基準に絶対位置を指定する。
position: fixed ブラウザのウィンドウ全体を基準に絶対位置を指定する。
position: sticky 通常の位置に配置され、その要素の位置がウィンドウ全体を基準として、指定位置の条件を満たすとフロートされる。
また、その範囲はstickyを囲っている要素内に限られ、囲っている要素の端までくるとそこで固定される。
そして、指定位置に配置されている間も、通常位置で高さを持っている。

 

relative,absoluteはセットで使うことが多く、fixedは良く使われており、解説されているサイトも多数ありますが、「sticky」は少し避けられがちなイメージがあります。

使いこなせると、JavaScriptやjQueryが必要だったスクロールした時の動きがCSSだけで簡単に作れる便利なモノなので、今回で自分のモノにしちゃいましょう!

 

 

「position: sticky」の使い方

冒頭でもお見せした「ときしらずの宿」様のトップページの動きを作っていきます。まずは、完成形を確認します。

ポイント

スクロールしてもトップ画像が動かない

スクロールすると、下の要素がトップ画像の上に重なって表示される

 

 

参考ですが、「position: sticky」を使わないとこうなります。
スクロールすると画像が動き、次の要素が表示される。

 

違いが分かりますか?「position: sticky」を使うと動きのデザインで差がつけられます。

 

HTMLの基本コード

index.html

<header>の中にトップ画像<img>を配置し、<main>中にコンテンツ<div>を3つ構成しています。

<body>
	<header>
		<img src="" alt="トップ画像" class="img-fluid" >
	</header>
	<main>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</main>
</body>

 

ここまでをブラウザで確認

CSSの基本コード

style.css

<header>position: sticky;を当てることで粘着させ、位置はtop:0を指定します。
スクロール位置が、トップ画像の高さを超えると<main>が表示されるという仕組みです。

<main>には、position: relative;を指定することで、トップ画像下に配置します。

 

header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: #ccc;
}
main{
	position: relative;
	text-align: center;
}
.box1{
	height: 400px;
	background: #FFFFCC;
}
.box2{
	height: 400px;
	background: #CCFFFF;
}
.box3{
	height: 400px;
	background: #FFCCFF;
}

 

イケゾー
これだけで完成です!JavaScript無しでここまでできるCSSすげえ

 

「fixed」と「sticky」の違い

fixed」の場合も、みておきましょう。

トップ画像を常にブラウザのウィンドウ上端に固定するモノです。ナビゲーションバーやフッターを固定するときに使われる場合が多いです。

 

イケゾー
お疲れ様でした、実際に手を動かす理解も早いので試してみてください

 

まとめ

以上で、「position: sticky;」の基本的な使い方を解説しました。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code
-, , ,

© 2021 IkezoooBlog