Studioでスクロールすると途中から追従してくるメニューの作り方｜カスタムコード使用｜position:sticky
スクロールして途中から追従させてヘッダー、メニュー、バナー、目次などを簡単に追従させる方法をノーコードWeb制作ツール「Studio」で実践する方法を解説します。
本記事では以下の動画のように右カラムで追従するバナーの作り方についた紹介しますが、別のやり方でも応用可能なので、ぜひお試しください。
完成イメージとしてサンプルページを公開していますので、実際の画面で確認いただけます。
https://caroa.jp/design/sample/sticky
今回はSTUDIOのカスタムコード機能を使用して、一部CSSを書きます。なるべく分かりやすく書きますが、もしカスタムコード機能についてあまり知らない方は、公式のヘルプページをご覧ください。
カスタムコードとは
STUDIOのカスタムコードとは、サイトや個々のページの <head> や <body> タグに独自のコードを追加することができる機能です。
ノーコードツールのSTUDIOは通常はコードの埋め込みができずにドラッグ&ドロップにてWebサイトを制作します。
ただ、STUDIOの機能が及んでいないところで一部、自身でCSSやJavascriptなどを記述してコードを組み合わせてWebサイトを作ることができます。
カスタムコードはあくまでノーコードではない拡張機能になり、STUDIOの公式のサポート外になるので、自己責任でお願いします。
また、一部注意事項もあるので、事前に確認ください。
注意点1：有料プラン限定
カスタムコードは、STUDIOの有料プラン（Starter以上）でないと使用することができません。
そのため、事前に有料プランになっているか確認してください。
STUDIOの有料プランについては、こちらでも解説しているので参考にどのプランにするか検討が必要です。
注意点2：プレビューで確認できない
STUDIOにはリアルタイムでWebサイトを確認できるプレビュー機能がありますが、プレビューではカスタムコードは動作しません。
そのため実際に動作確認を行う場合は、サイト全体を公開して公開サイトで行う必要があります。
そのため、運用中のサイトの場合は他のページで更新途中のものがないか事前に確認することをお勧めします。
追従はposition:stickyを使う
今回追従させる方法として解説するのは「position:sticky」というCSSの仕組みを利用します。
stickyとは「粘着性のある」という意味があり、スクロールした際に規定のエリア内で要素を粘着させて、追従させることができます。
ちなみにpositionはSTUDIOではfixedを意味する「固定」、relativeを意味する「相対」、absoluteを意味する「絶対」の3種類は標準機能として使用できます。
Stickyの仕組み
本記事はノーコードツールSTUDIOを用いて簡単に行う方法なので、CSSの詳しい説明は省略して、Stickyがどういう仕組みで追従（粘着）するのかを解説します。
上の図が記事冒頭で紹介したページのボックスを色分けしたものです。この中で注目して欲しいのはピンク色の「Sticky Container（スティッキーコンテナ）」と、赤色の「Sticky Item（スティッキーアイテム）」です。
Stickyの仕組みをシンプルに紹介すると「Sticky Container内でのみSticky Itemが追従する」ということになります。
この仕組みを理解するだけで好きに応用できるので、あとで応用例も紹介します。
STUDIOで追従させる手順
01：Sticky ContainerとSticky Itemを用意する
まずは追従させるためのボックスを用意します。先ほどのピンク色の部分と赤色の部分をボックスで準備してください。
その他は自由にボックスを作っていただいて大丈夫ですが、画面がスクロールできるくらい縦幅を広げてあげないと確認できないので注意してください
サイドバー追従をするときの注意点
サイドバーとして追従するとき限定の注意点なのですが、Sticky Itemは「Sticky Container内を追従」します。ただ、STUDIOのデフォルトの設定では、高さが小さい苦なってしまいます。
そこで画像のように、左右のボックスの高さを自動で揃える設定にしてください。
OKの図のように追従したい高さいっぱいまでSticky Containerの高さが設定されるようにしてください。
02：Sticky ItemにIDを付与する
追従させてたいボックスに「sticky」というIDを付与してください。このID名は、後ほど紹介するCSSのID名と一致していればどんな文言でも大丈夫です。
今回はわかりやすいように「sticky」というIDにしています。
03：カスタムコードを使用する
サイト全体ではなく、ページ設定の「<body>内の末尾」という部分に、以下のCSSを挿入してください。
<style>
.StudioCanvas > .sd {
overflow: visible !important;
}
#sticky {
position: sticky;
top: 32px;
}
</style>
ここからは上記の記述したコードの意味や理由などを、項目ごとに簡単に解説していきます。不要な方は読み飛ばしていただいて大丈夫ですが、知っておくと自身で応用することができます。
STUDIOのスタイルを上書き部分
.StudioCanvas > .sd {
overflow: visible !important;
}上記の部分はSTUDIOの仕様上仕方なくやっている仕組みです。なので呪文のようにそういうものかと記述するのがいいかと思います。
理由を知りたい方のために説明するとposition: stickyは、親要素にoverflowでhiddenのが設定されていたら機能しないというCSSの仕様があります。STUDIOではデフォルトでhiddenが設定されているので、それを無理やり打ち消しているコードになります。
なので、STUDIOのデフォルトの仕様が変わったらこのコードも変わったり、動かなくなる可能性があるので、自己責任でお願いします。
追従部分
#sticky {
position: sticky;
top: 32px;
}後半の部分が実際に追従しているコードになります。#stickyの部分が先ほどIDで付与した文字列です。（ご自身で違うIDを使用している部分は、#stickyを書き換えてください）
ここで注意するポイントは「top： 32px;」の部分です。これは追従する時に画面上部から32px離れて追従するという意味になります。なので「top: 0px;」なら、画面上部に隙間なくぴったりと追従します。
topだけでなく「bottom： 32px;」のようにすると、画面下部で追従します。
追従しない場合の解消法
「position: sticky;」は結構癖があり、効かなくて困るケースがよくあります。今回はよくある追従しない理由を解説するので、もし追従しない方はこのどれかが当てはまっていないかご自身で確認ください。
原因1：親要素のどこかに「overflow：hidden」がある
STUDIOで一番引っかかるポイントはここの部分です。STUDIOはデフォルトでoverflow: hiddenが設定されている箇所があるので、以下のコードで上書きしましょう。
.StudioCanvas > .sd {
overflow: visible !important;
}その他にSTUDIOの「はみ出し：非表示」に設定している箇所はありませんか？
これも実はoverflow: hiddenと同じ意味なので、Sticky Containerのどこかの親要素に非表示が一個でもあったら機能しません。
必ず「表示」にしておきましょう。
原因2：親のdivの高さが足りない
これはサイドバー追従をするときの注意点で解説した内容ですが、Sticky Containerの高さが足りずに、追従するエリアがない場合に発生します。
もう一度記事の序盤をよく読んで、修正してみてください。
原因3：topやbottomなどの指定がない
「position: sticky;」を使用する場合は、top、bottomなどの位置の指定が必要です。（left、rightでも可能です）
位置の指定がないとどこで追従させればいいのか分からないので、追従しないという仕組みです。
どう設定していいか分からない場合は「top： 0;」と、topからの位置を設定しておくと安心です。
注意点として、STUDIOの固定設定でヘッダーを追従させている場合は、ヘッダーの高さ分隠れてしまう可能性があるので、その数値をプラスして位置を指定しましょう。
例）ヘッダーの高さが60pxで、ヘッダーから32px分隙間を開けたい場合は、60px + 32px =92pxなので、top: 92px;とします。
応用としての使い方
ここからは今までの知識を使って応用したやり方について紹介します。
複数の追従エリア
基本編でやったものと仕組みは一緒でサイドバーとして使用するならこういうやり方もあります。
今回使用したコードは以下です。
<style>
.StudioCanvas > .sd {
overflow: visible !important;
}
[id^="sticky-"] {
position: sticky;
top: 118px;
}
</style>今までと違う部分としては、「 [id^="sticky-"] 」の部分です。これはIDの前方一致を表していて、idがsticky-で始まるもの全てに指定したcssを適応するという内容です。
ボックス（Sticky Item）へのIDの付与も画像のように、sticky-から始まる文字列を指定しています。
サンプルページを公開していますので、操作感をお試しください。ただし、動画や記事の数値やデザインとは一部異なります。
STUDIOで簡単に追従メニューができるが、注意が必要
STUDIOで「position: sticky;」を使って簡単に追従メニューを作る方法を紹介しました。STUDIOの標準機能ではできないのでカスタムコードを使って少し大変な部分もありますが、一度覚えたら色々なWebサイトで応用可能です。
ただ、この仕組みは少し癖や上限があるので、もし困ったら「追従しない場合の解消法」をよく読んで当てはまっていないか確認してみてください。
正直、ノーコードで完結したいのにコードをわざわざ書く必要があるのは大変なので、いつか標準機能でリリースされることを願っています。
※STUDIOは頻繁に仕様変更が行われているため、記事執筆時点（2024/01/25）と変更になっている可能性があります。最新の情報は公式サイトをご覧ください。