【Studioはじめてみた #9】レスポンシブ修行とおっちょこちょい発揮で作業量増の巻

こんにちは、IT+の巴です。
現在、caroa campでStudioを勉強中。基礎編を終え、発展編に進み、3つ目の課題＝中規模サイトの構築に取り組んでいます。
Studio学習もいよいよ9週目。

今回は、レスポンシブと格闘しつつ、おっちょこちょいをしっかり発揮した一週間でした。
え？デジャヴ？はい、相変わらず初心者を脱出できず、ぐるぐる迷走中です。

初心者をいつか脱出できるまで、飽きずにお付き合いください。

前回（8週目）の記事「【Studioはじめてみた #8】CMS挑戦とコピペ快進撃。初心者の道のりはやっぱり甘くなかった」もぜひどうぞ。

1. アクティブな夏休み継続中

日本各地をあっちこっちに移動するアクティブな夏休み継続中。
先週はちょっと中休みでしたが、今週からいよいよ夏休み後半戦です。

今週は、弊社溝口が連長を務める東京・高円寺の阿波踊り連「灯連（あかしれん）」が結成15周年を迎え、本場・徳島の阿波踊りに初参加（そして最後になるかも？）ほとんどの連員が参加し80名での出演という特別な機会があり、私も家族で徳島まで観に行くことにしました。

連日阿波踊りを体いっぱいで楽しんだ後、夜は静寂の旅館でPC画面と睨めっこ。
子どもたちが寝静まった後、レスポンシブ設定をちまちまと調整していきました。

パディング、マージン、要素の並び替え…。
本当はコピペ前に最初から設定しておけば不要だった作業です。

でも、不思議とこういう細かい作業は嫌いじゃないんですよね。
お祭りの余韻をまといながら黙々と進めると、ちょっとした内職みたいで意外と楽しかったりします。

「レスポンシブだけコピペできないかな…」と心の中でつぶやきつつ、ひとつずつ地道にクリックを積み重ねました。

2. おっちょこちょい発揮で作業量増

レスポンシブ調整を進めていると、タブレット＆モバイル用のメニューモーダルを作り忘れていたことに気づきました。

慌てて取り掛かったものの、ここでおっちょこちょいを発揮。
エディタ上部のブレイクポイントでスモールサイズを選んだまま、モバイル用のデザインカンプを見て構築をスタートしてしまったのです。2重の過ち、、、

途中で「あ、これは順番が違う」と気づき、PCサイズ（デフォルト）に戻してPCサイズ用デザインを見ながらメニューを作り直したものの、再度スモールサイズに切り替えると反映が崩れて、タブレットもスマホも大混乱…。

数値をいじっても直らず、「これはもう1から作り直しか」と覚悟。
ただ、念のため作り直し以外に方法がないか先にメンターさんに質問しました。

返ってきた答えはシンプルに一言。
「作り直しが一番早いですね。」

はい、自ら作業量を増やしました…。これぞ初心者あるあるか!?

後日談。
この2週間後にベータ版が発表されたStudio 5.0バージョンでは、ブレイクポイント切り替えが画面下に常時表示されるようなりました。
「これはみんな一度はやっちゃう案件だろう」と、一人で勝手に納得しました（笑）。

3. flexの壁、現る

レスポンシブ設定をしながらデザインカンプと自分の構築サイトをくまなく見比べ続けていると、ちょこちょこ設定ミスを発見。

レスポンシブの全ページ再設定のおかげで見直しにもなりましたw
基本ポジティブ人間ですw

そんな中で出てきたのが、ちょっとした設定ミスに含まれていたボタンの配置問題。
ロゴとボタンの上下位置が、どうしてもデザインカンプ通りにならないのです。

↑デザインカンプ

↑私が構築したサイト

数値をいじっても、余白を変えても思った通りにならず、気づけば1時間以上格闘。
最終的にメンターさんにSlackでSOSを送ると、返ってきた答えは明快。
「ここはflex設定ですね。」

あぁ、やっぱり…。
薄々気づいてはいましたが、次なる私の天敵はflex。
単純な配置なら対応できても、複雑になると完全にお手上げ。
次回以降の課題として、ここはじっくり理解していきたいと思います。

4. 夏を楽しみつつ、作業は持ち越し

阿波踊りだけでなく、徳島滞在中は吉野川で川遊び、高知で藁焼きカツオ、瀬戸内海のイルカショーと、夏を全力で満喫。
その一方で、Studio作業はレスポンシブ設定を終えたものの、細かい修正がまだまだ残ってしまいました。

「今週こそ課題提出！」と意気込んでいたのですが、完成にはあと一歩届かず…。
構築するよりも見直し・微調整・修正の方が時間がかかる――そんな学びも得られましたw

5. まとめ

9週目は、四国滞在の合間に3度目のレスポンシブ修行を積み重ねた一週間。
メニューモーダルではおっちょこちょいを発揮して自分で作業量を増やし、flexの壁にも立ち止まりました。
でもその分、またひとつ「初心者あるある」を経験値に変えられたと思います。
（どこまでもポジティブです！w）

細かい修正はまだ残っていますが、着実に前進していることは間違いなし。
Vol.10では、いよいよ仕上げと課題提出に挑みます！

ではまた、次回！