2025/10/31
［ 初回公開日：
2025/10/31
］
【Studioはじめてみた #12】夏休み明け、課題も仕事も全力モード！
こんにちは、IT+の巴です。
現在、caroa campでStudioを勉強中。基礎編を終え、発展編の真っ最中。
いよいよ最終課題（発展課題②）に挑戦しています。
Studio学習も終盤の12週目（全13週）に突入！
前回（11週目）の記事「【Studioはじめてみた #11】魔法なし、自力勝負。最終課題スタート！」もぜひどうぞ。
1. アクティブすぎる夏休み、そして現実へ
アクティブすぎる夏休みもついに終了！
「やっと毎日Studioに集中できるぞー！」と意気込んだ矢先、ふと気づく。
……あれ？ 自分の仕事量、増えてない？
そう、私も夏休みモードで仕事を止めていたのでした（笑）
結局、1日の“隙間時間”を見つけてはポチポチ地道に課題を進める日々に逆戻り。
2. “追従”が全然追従してくれない件
今週は、前回残したトップページの難所4つに挑戦！
① 追従ナビゲーション
② 追従するメッセージタグ
③ 横スクロールのタグ一覧
④ 背景にオブジェクトを埋め込む表現
まずは①と②、「追従」シリーズから着手。
Figmaのメモに“追従”とあるので、Studioでも「追従配置」を設定。
……が、まったく追従してくれない！！
StickyなのにStickyしないし、
画面の両端どこいった！？状態。
公式ヘルプも読む👇
Position Sticky｜Studio公式
さらに弊社・溝口のブログも熟読👇
Studio「追従配置」の使い方｜IT＋ブログ
それでもできなーい！！
溝口に文句を言いたくなったがグッと我慢。
あっちこっち調整しても解決せず、ついにギブアップしてメンターさんにヘルプ要請。
すると、返ってきた回答がまた一段とレベルアップしていた！
3. flexの再登場
メンターさんの回答内容はこちら👇
mainを100%設定のままにする場合は、「navigation」は固定設定にする
または
mainの中に左右の「navigation」と「MessageTag」を入れる
「MessageTag」も追従配置にする
mainの中のsection2つをdivでグループ化
sectionを囲んだdivの横幅をflexにする
……できたーーー！！！🎉
まさかのflex設定オチ。
そう、またしてもflex。
何週前のブログでも書いたこのワード、ここにきて再登場w
“追従”配置の問題ではなく、“flexの理解不足”が原因でした。
なるほど、これは奥が深い…。
4. カルーセル地獄ふたたび
③「横スクロールのタグ一覧」は、まったく見当もつかず。
あらかじめメンターさんがヒントをくれていました👇
カルーセルを使うこと
なるほど、ふむふむ。
カルーセルにタグを入れて…
静止状態ではそれなりに再現できたのですが、
ライブプレビューで動かしてみると――
……大爆笑。
動画で残しておけばよかったと後悔するほどのはちゃめちゃ挙動w
小学6年生の長男にも爆笑されるレベル。
Webサイト構築で家族を笑わせられるなんて、ある意味才能かもしれませんw
あれこれ数値をいじっても改善せず、絶望的なループへ。
はい、この項目はまたしても後回し決定ですw
5. 背景設定と、検索力の進化
最後は④「背景にオブジェクトを埋め込む表現」。
ここで、私に小さな――いや、大きな進化が。
ついに“Web検索力”を手に入れました！（遅っ）
これまでも意味や操作方法を調べたことはありましたが、
構築そのものを検索して、解説を理解し、
自分の力で難問を突破できたのは今回が初めて！
参考にしたのはこちら👇
背景画像を固定表示する方法｜Studio公式ヘルプ
“読んでも分からない”だった頃を思い出すと、
「読めば分かるし、試せばできる」になっていた自分にちょっと感動w
もしかしたら“自走力”が少しついてきたかも…？
6.まとめ
こうして、前回残していたトップページの4大難所をなんとか設置完了！
……とはいえ、完璧ではありません（③ はただ配置しただけw）
今週は、追従にflex、カルーセルに背景と、
見た目以上に中身の濃い一週間。
そして、まだ残る難関と未着手ページたち…。
来週はいよいよ最終週！
このまま突っ走って、最終課題提出にたどり着けるのか！？
ではまた、Vol.13で！
この記事を書いた人
