どうも、こんにちは。
宮城県仙台市でWeb制作フリーランスをしているキクチです。
本日はノーコードWeb制作ツール「Studio」で
ヘッダーを固定する方法をご紹介致します。
スクロールをしてもヘッダーが固定されている状態で
完成イメージはこちらになります。
超簡単にできるので、ぜひやってみてください。
ヘッダーを用意する
まずは、ヘッダーを用意します。
今回は楽をして、無料テンプレートからサイトを作成します。
「Small Company」というテンプレートから始めます。
https://studio.design/ja/store/templates/pv7qGrOL9b
Studioのデザインエディタに入って
「ライブプレビュー」でヘッダーの動作を確認します。
このようにデフォルトではヘッダーが固定されていません。
これを次の工程で固定していきます。
ちなみに今回は無料テンプレートからヘッダー等を作成しましたが
「追加」の「セクション」から「ナビゲーション」を選択してヘッダーを効率的に作成することもできます。
そこからカスタマイズしていくのが楽です。
ちょっと脱線するのですが、ヘッダーやフッターは全ページ共通であることが多く
使い回しできるパーツなので、コンポーネント化すると楽できます。こちらの記事で解説しています。
ヘッダーを固定する
では、ヘッダーを固定していきます。
めちゃくちゃ簡単です。
ヘッダーを選択した状態で「配置」を「固定」に変更します。
はい、コレだけです。ヘッダーが固定されました。
このように自由な位置でヘッダーを固定できるのですが
通常は画面上部に配置すると思うので「位置」を「上左右：0」に設定します。
あとは、「重ね順」などを調整してもらえればと思います。
それとヘッダーの背景の「塗り」を「白」に設定します。
一つ注意点があって、ヘッダーを固定すると
ヘッダーの次に配置しているセクションが隠れてしまいます。
ちょっと分かりにくいのですが、画像の上部がヘッダーの下に潜ってしまっています。
これを解消するためにヘッダーの「縦幅」分だけ
ヘッダーの次に配置しているセクションの「マージントップ」を設定します。
これで完了です。
まとめ
お疲れ様でした。
このようにStudioではめちゃくちゃ簡単にヘッダーを固定することができます。
ぜひご自身の制作したサイトで使ってみてください。
最後までご覧いただきありがとうございました。
宮城県仙台市のWeb制作フリーランスのキクチでした。ではでは。
