はじめに
はじめまして、メンバーズルーツノーコード推進員の木下です。
メンバーズルーツでは、ノーコードでWebサイトを構築・運用できるツール「Studio」を活用した開発支援を行っております。
今回は2024年12月4日に登場したStudioの「追従（Sticky）」機能の活用方法についてご紹介したいと思います。
追従（Sticky）とは
Webデザインにおける「追従（Sticky）」とは、スクロールしてもそのコンテンツが固定されており、追いかけてくるような動きのことを指します。たとえば、バナーやメニューをずっと表示させておきたい時や、スクロール中に動きをつけたい時などに追従を活用します。
従来のStudioでは、「相対位置」「絶対位置」のみの配置設定だったのですが、新しく「追従位置」が登場したことにより、さらにサイトに動きをつけることが可能になりました。
今回の記事では、Studioの新機能を活用した追従バナーや追従メニュー、スクロール中の動きの実装方法をご紹介いたします！
追従（Sticky）の使い方
まずはじめに、新機能「追従（Sticky）」の使い方をご紹介いたします。
①画像またはボックスを追加する
② ①で追加したオブジェクトの「配置」を「追従」に変更する(追加したオブジェクトは画像追加またはカラー変更をおこなっておくと、プレビューで分かりやすいです)
たったこれだけで、スクロール途中で背景(ボックス)を固定することができました！簡単ですね。
上記方法を活用して、テキストや画像が入ったボックスを追従させることも可能です。
①ボックスを追加
② ①の中にボックスを追加しテキストまたは画像をその中に追加する
③ ②の配置を追従にする(任意でカラー変更や余白の調整をおこなってください)
ぜひテキストや画像を入れて試してみてください！
追従（Sticky）機能の活用例
先ほど紹介した方法を活用すれば、以下のような動きを実装することができます。
追従バナー
①ボックスを追加する
②その中に、追従用バナーを配置する
③ ①のボックスの「配置」を「追従」にする
④重ね順を5にする(他のオブジェクトより前にする)
⑤余白を調整して完成
追従メニュー
①ボックスを追加する
②その中に、メニュー部分のボックスを追加する
③ ①のボックスの「配置」を「追従」にする
④重ね順を5にする(他のオブジェクトより前にする)
⑤メニューのデザインを整えれば完成
カラムレイアウトの際、特定のカラムだけ固定
①ボックスを追加する
②その中に、ボックスまたは画像を追加する(固定する側)
③その隣に、ボックスまたは画像を追加する(追従させる側)
④ ①のボックスの「配置」を「追従」にする
⑤余白を調整して完成
最後に
今回の記事では、Studioの新機能「追従（Sticky）」の使い方や活用方法について解説いたしました。
この記事があなたの素敵なサイト制作の手助けになれば幸いです。
ご一読いただきありがとうございました！
