【初級】XDデザインからのコーディング練習【HTML/CSS】(模範解答付き)実践中!

本格的に始まったアウトプット。ここではツイッターでは詳しく書けないことを書き記しておこうと思います。

まず、デザインカンプをするにあたって、早くもいくつかの壁がありました。

①そもそもデザインカンプってどうやるの?→ググる

②デザインカンプを始める前に事前準備が必要なことを知るが、ここでAdobeXDやGoogleChormのプラグインが正常に動作せず→数時間後に、プラグイン機能は使えるように。ただし、VSコードの拡張機能(LiveServer)がなぜかFirefoxのみで起動してしまい、スムーズな操作にはならず・・・。そして今後は必須になってくるAdobeXDをダウンロードしてみるが、クラッシュしてしまい、未だ使えず。いろいろググってみるものの、解決策が見つからず。これは早いことなんとかせねば・・・。

③プラグイン機能の助けも借りながら、なんとかサイトを仕上げる。「できた!」と思ったのも束の間、レスポンシブを確認してみると、いろんなところがガタガタに(Σ(゚∀゚ノ)ノキャー)。結局、もう一度コードをいじりなおしたり、ググったりするが良く分からない・・・。おそらく基礎が抜けているところがあると思い、もう一度Manaさんの本に戻る。

④Manaさんの本、1回だけ通して手を動かしただけで、ダウンロードしたコードには手つかずでした。そこで、もう一度本を片手に、今度はManaさんの見本のコードを印刷し、ひとつひとつ見ていってみることに・・・。すると、なんとなく分かってきました。ボックスの概念や競合、%単位、グリッドレイアウトのプロパティや値の指理解がまだ不十分であることが分かる。

⑤そこに気づいて、再度トライ。そうすると、画面を拡大・縮小しても取りあえずなんとかバランスは少し取れた形に・・・。あとはメディアクエリを設定して、スマホカンプに取り組みます!

本当に、脳みそから汗(;^ω^)が出るくらい、考えてググって、という作業をしていました。PCに向かっている時間以外も常に、頭で考えているような状態。大学時代を少し思い出しました(遠い目)。

次回投稿までにはなんとか初級終えたいです!!

この記事を書いた人