【Studioはじめてみた #10】打ち消して、崩して、また積む。新たな修行の記録

こんにちは、IT+の巴です。
現在、caroa campでStudioを勉強中。基礎編を終え、発展編の真っ最中。
3つ目の課題＝中規模サイト（発展課題①）の修正を進めています。
Studio学習もついに10週目（全13週）に突入！

前回（9週目）の記事「【Studioはじめてみた #9】レスポンシブ修行とおっちょこちょい発揮で作業量増の巻」もぜひどうぞ。

今週は、先週予告していた「仕上げと課題提出！」のはずだったのですが…
そう簡単には終わらせてもらえませんでした（笑）

1. メンター面談で発覚した“新事実”

毎週恒例のメンターさんとのWeb面談。
進捗報告をしているとき、ふと指摘されました。

「タブレットとモバイルでは、ホバーとアニメーションは不要なので打ち消し設定が必要ですよ」

……えっ。
えーーーーーっ！？！？

レスポンシブの4画面サイズ（PC／スモール／タブレット／モバイル）をちまちま調整して、ようやく終わった！と思っていたのに、
まさかの“打ち消し再設定”が残っていたとは。

これはまたしても「最初に気づいておけば良かった」シリーズ。
もう、初心者あるあるが止まりませんw

2. ホバー打ち消しとの戦い

打ち消し作業を始めてみると、これがまた地味に大変。
カルーセル内やコンポーネント内にもホバーやアニメーションが組み込まれており、
どのレイヤーで打ち消せばいいのか分からず、あたふた。

特に、コンポーネント化した赤丸の中の「→」がホバーで右に動き、赤丸が150％拡大する設定がされている箇所。

これは素人にはちょっと複雑すぎるホバー設定で、タブレットとモバイルで無効化しようとしたら、PCとスモールサイズでも動かなくなるという負の連鎖…。

試行錯誤するうちに、気づけば全体が少しずつ崩壊。
「え？さっきまでちゃんと動いてたのに…？」
もう、ジェンガの塔が音もなく崩れていくような感覚でしたw

しかし――これで終わりではありませんでした。

3. もうひとつのホバー迷子事件

さらにもうひとつ、ホバー打ち消しで迷子になったパターンがありました。
文字の下に黒い下線が左から右にスッと入る、あのオシャレなホバー。

どこを調整すれば打ち消せるのか分からず、あっちをいじりこっちをいじり…。
「inホバーで線のピクセルを0に？」「いや、透明度0？」「下線の色を白に？」
と試すも、結果は――

黒い線が消えず出続けるか、そもそもデフォルトの線まで消えるかの二択（笑）。

完全にお手上げ状態になり、最終的にメンターさんにヘルプ要請。

もうお分かりですよね。
こういう時の回答って、だいたい想像をはるかに超えて“シンプル”なんです。

こっちはレイヤーを開きまくってピクセル単位で格闘してるのに、
返ってくる答えは、拍子抜けするほどスッと一言。

そして今回も、例に漏れず――

「タブレット以下では非表示にしちゃいましょう。」

……それですか！w
いや、確かに正解です。間違いなく正解なんですが、
その選択肢、初心者の脳内にはまだ存在してないんです！！w

4. プロとの差は“保険をかける”ひと手間

途中で気づいたのですが、
おそらくプロの方なら修正前にセクションをコピーして、
元の状態をキープしながら修正テスト をするんですよね。

でも、初心者はその「保険策」という発想がそもそも抜けている。
私はいつものように、いきなり本番を編集。
結果、ジェンガ崩壊。もとに戻せず白目。w

またメンターさんにヘルプを出し、
細かい修正を加えながら何とか再構築。

5. そしてついに、提出！

ホバーとアニメーションの打ち消し作業は、
レスポンシブ調整よりも遥かに神経を使いました。w

それでも、なんとか課題を提出までこぎつけましたー！！🎉

📝初心者メモ

レスポンシブ設定同様、ホバーとアニメーションの設定も
最初の構築時に画面サイズごとに細かく設定してからコピペすること！

あとで直すのは、学びにはなるけど…時間効率は最悪です（笑）

6. 3つ目のサイト、ついに完成！

Studioを学びはじめて10週目。
3つ目のサイト、ついに完成！（正確にはメンターさんの添削待ちですがw）

どんなに「ちまちま作業好き」な私でも、
レスポンシブ→ホバー＆アニメーションの連続はなかなかの精神修行でした。

でもその分、爽快感もひとしお！

次週はいよいよ最終課題へ！
3ヶ月集中のcaroaマンツーマンプログラム、ラストスパートに入ります。
残り3週間、引き続きお付き合いください✨

では、次のVol.11で！