ワイワレ速報

eye-catch.jpg

position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*最終更新日

2025/01/18 02:50

position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*引用元:

https://blog.hog.as/entry/2025/01/17/181214

ずん

えーっと、CSSでスクロールしたときだけ境界線を出すって話なのだ。これ、どういうことなのだ?

でぇじょうぶ博士

おお、これは興味深いテーマでやんすね!position

やきう

いやいや、それただの自己満足ちゃうか?誰がそんな細かいデザイン気にするねん。ワイなら全部ボーダーつけっぱなしでええわ。

ずん

でも、なんかオシャレっぽくないのだ?博士、それどうやるの?

でぇじょうぶ博士

方法は簡単でやんす。透明な背景色を持つ要素を見出しの裏側に配置しておいて、見出しが貼り付いたタイミングでその要素が「境界線」として現れるようにする仕組みなんでやんすよ。

やきう

は?透明な背景色とか言われてもピンとこんわ。それ、結局「見た目だけ」ちゃうんか?

ずん

やきう、お前には美的センスというものが欠如しているのだ!博士、この方法以外にも何かあるの?

でぇじょうぶ博士

他にもanimation-timeline

やきう

擬似クラスとか聞くだけでも頭痛くなるわ。そもそもposition

ずん

じゃあさぁ、この技術って結局何に役立つのだ?ただカッコいいだけなのだ?

でぇじょうぶ博士

デザイン性向上はもちろん、ユーザー体験(UX)の改善にも繋がる可能性があるでやんす。ただし、「必要以上に凝り過ぎない」というバランス感覚も大事なんですよ。

ずん

ボクにはちょっと難しい話だったけど...まあ、とりあえずボーダー引いておけばいいってことなのだ!(適当)