FileMaker開発者のためのHTML/CSS/JavaScript入門 Day4

HTML/CSS/JavaScript for FileMaker Developers

FileMaker開発者のためのHTML/CSS/JavaScript　入門 Day4

CSS positionプロパティ – 2

2024-03-29 野田修

今回はposition: stickyをご紹介します。

その前に前回のチャレンジの答え合わせです。

Webビューア上での表示

Webビューアで下のコードを実行した場合、このようになると思います。
左側上の赤枠がhtmlコードで、右側下がWebビューアでの表示です。

data:text/html,
<style>
    body{
        border:1px solid black;
    }
</style>
<body></body>

わずかに黒枠の外に余白があるのはbody要素には8pxのマージンがあるためです。
style要素の中で、margin: 0; を指定すると余白がなくなります。(Webビューアでお試しください)

これまでのこのブログ上でのWebビューア表示では、この”bodyのmargin部分”を表現していなかったので、赤枠と要素の間に余白がありませんでした。
Webビューアでお試しいただいた方は、要素とWebビューアの間に余白があることに気づかれたと思います。

今後もこのブログ上でのWebビューア表示では、body { margin: 0; } が指定されているものとして表示します。

position: sticky

2番目のdiv要素にだけにposition: sticky, top: 0 を指定してみます。 

data:text/html,
<style>
    div{
        border: 1px solid black;
        height: 100px;
    }
    div:nth-of-type(2){
        position: sticky;
        top: 0;
        background-color: pink;
    }
</style>
<div>Hello, HTML-1</div>
<div>Hello, HTML-2</div>
<div>Hello, HTML-3</div>
<div>Hello, HTML-4</div>
<div>Hello, HTML-5</div>
<div>Hello, HTML-6</div>
Hello, HTML-1
Hello, HTML-2
Hello, HTML-3
Hello, HTML-4
Hello, HTML-5
Hello, HTML-6

2番目のdiv要素はtop: 0と指定されているのに、要素位置が変更されていません。
position: sticky, top: 0 の持つ意味は実は画面をスクロールして見るとわかります。

2番目のdiv要素が画面の上端に来たときに、その要素だけそれ以上スクロールされず上端(top: 0)の位置に固定されます。

通常これは表やリストで一番上の要素に適用されて、画面がスクロールされてもその要素がスクロールアウトせず、画面の上端に残り続けるようにするために使われます。

チャレンジ

  • Webビューアで1番上の要素に position: sticky, top: 0を適用して、スクロールしてもその要素がスクロールアウトしないことを観察してください。

参考リンク