tanatiyo デザインカンプからのコーディング練習で、作業も大詰めを迎えるころ、ピクセルパーフェクトを目指して
デザインと見比べて細かな調整をしていくと思います。
コーディングの練習をここまでしてきて、少しずつ慣れてきましたが、中級編を終えるころ、私の中で2つ課題が見えてきました。
❶ブラウザを自動的にリロードさせながら修正を行っているせいか、反映されるまでに時間がかかる。リロード時間が長く待っている時間が長い。
❷デザインをchormの拡張機能を使って行っているが、毎回合わせ方が微妙に分からない。
この記事では中級Ex編を実践するにあたって、これら2つを解決できるようなやり方をやっと見つけた(閃いた、が正しいです。というか今まで気づかなかった自分って。。。。orz)ので解決策としてメモしておきます。
①❶に関してですが、Googlechormのディベロッパーツール上で修正・確認を繰り返しながらやれば、ページもリロードされずに素早く結果が分かるので、作業がすいすい進みます。いろいろ値を微調整して最終的に固まった値をメモしておいて、最後にVSCodeへ転記する、といった流れです。
②❷に関してですが、Googlechormのこれまたディベロッパーツールにてレスポンシブ対応をする際に使う画面に切り替えます。代表的なスマホの種類などを選択する欄の近くに、数字を自由に入力できるところがあるので、ここでデザインカンプに合わせた横幅と高さの幅を指定します。そしてその状態でchormの拡張機能を開き、xとyの欄は0に保ったまま斜め矢印の欄を大体1.5倍～2倍に合わせていきます(1.5～2倍というのはカンプごとにピタッとあてはまるサイズが違うからです。また作業しているPCによってもこの倍率は微妙に違ってくると思います。自分のケースに当てはまるように調整してみてください。)
①も②も、初級編の時から「そうゆう機能がある」と知っていたはずなのに、中級Ex編取り組み中に「そういえば…」的な感じで思いついた方法です。
このタイミングでこのやり方に気づけて良かったです。もし今後もこのまま進んでいたらと思うとぞっとします＾＾；
②では特にxとyのサイズを0にして左上の角を画面の左上にぴったりと合わせる点がポイントです。
このやり方でぐっと作業ペースも改善されました。
同じように悩んでいる方がいらっしゃったら、是非参考にしてみてください。