![](/images/home/first-view-img-1.png)
![](/images/home/first-view-img-2.png)
Stella Design
[ ステラ デザイン ]
宇宙に瞬くキラ星のような。
ただひとつ、あなたの
Webサイトをお作りします。
業務案内
Stella Designでは、フロントエンドコーディング業務を承っています。
- Webサイト・ランディングページのHTMLマークアップ
- CSS設計/実装
- CSS/JSアニメーション実装
- 各種UI実装(アコーディオンパネル/スライド/スムーズスクロール/タブパネル/モーダルウインドウ/外部API連携/アイテム絞り込み 他)
- CMS/JAM Stack(MicroCMS)実装
ブログ
![](https://images.microcms-assets.io/assets/5548d3d0f644447bb3286a3fc1ea25aa/f00e31d4acf140c4a12950b5c616c70b/sd-blog-240103.png)
【react/next.js】useContextを使ってページのスクロール量を各コンポーネントで共通化するサンプルコード
サイト内の各ページで使い回せるスクロール量を検出するコンポーネントの実装方法を解説します。検出した値をページ内の他のコンポーネントと共有する方法が解ります。
![](https://images.microcms-assets.io/assets/5548d3d0f644447bb3286a3fc1ea25aa/2f0cbc2241af4cc3bec04f549e67d002/window-size-font-variable-css-img.png)
ウィンドウサイズに合わせて文字サイズを可変させるCSS
ウィンドウサイズに応じてフォントサイズを可変させるCSSをご紹介。calc()を使ってピクセルをvwに変換します。最小値、推奨値、最大値の3つの設定で制御します。
![](https://images.microcms-assets.io/assets/5548d3d0f644447bb3286a3fc1ea25aa/6f05ca3945214076a31d3fb9b0e51ea9/scroll-fixed-btn.png)
スクロールして画面から消えたボタンをもう一度表示!ページの移動を促す固定ボタンの作り方。
お問い合わせや資料請求、ショッピングカートへの誘導ボタンなどでよく見る固定ボタンの作り方を動画とソースコードを交えてご紹介します。Intersection Observer使用!