Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【30DAYSトライアル 2nd】SASS・デザインカンプコーディング編①のまとめ&感想(DAY7からDAY11)

スポンサーリンク

adobe XD

30DAYSトライアル2ndの目玉でもあるデザインカンプからのコーディング実践がはじまります。

 Progateでの学習の仕上げと、デザインカンプコーディングを実際に行った感想・課題を進めるポイントをまとめました。

 

 

Day7: ProgateでSASS学習&オートコンパイルの導入

<課題>

 

<感想>

SASSに関しては少し予習をしていたので、ProgateのSASSコースは1時間くらいで完了できたのですが、

 

ですが、

 

SASSの導入に手こずりました。。。

 

こちらの記事を参考にしましたが、うまくいかず撃沈。

記事が悪いのではなく化石みたいなMacをいまだに使っている私が悪いということにして、ローカルでのSASS導入は次の日に繰り越しました。

Ruby - Macにsassをインストールできません|teratail

MacOS SierraでSassがインストール出来ない時の解決策 - Qiita

 

ちなみに、じゃあProgate以外でどこで練習したかというと、Code Pen というオンラインで利用できるエディタサービス内で簡単にSCSSに設定ができるので、Code Penを使ってSCSSを練習しました。

 

treatmyself.hatenablog.jp

 

 

Day8: jQuery・SASSの復習

<課題>

 

<感想>

 SASSの環境構築が整えるためにたくさん調べて試した結果うまくいった方法はこの記事に教えて頂きました↓

 「Brackets Sass を使えるようにする手順/使い方

 

私の使っているBrackets内で完結するので便利です。Bracketsを使ってSASSをやりたい方にはオススメです。

 

とりあえずこれで一旦よしとして先に進みます。

 

Day9: デザインカンプからのコーディング(ヘッダー&トップ画面)

<課題>

 

これから始まるデザインカンプからのコーディングを始める前のショーヘーさんからのアドバイスも載せておきますね。

 

<感想>

カンプを開く時、とってもドキドキしました〜。

30DAYSトライアル1stは一応終わっていたけれど

 

飛ばしたところや、

 

妥協して進んだところもあるので。。

 

実力不足かもしれないとかなり怯えてました。

 

一応なんとかできました。(相変わらずpxで指定をしていますが。。)

 

XDから必要な数値や情報を見つけるのは直感的にできるのでとっても使いやすい!

新しいパソコンを買ったらXDを導入して「カンプを作る」ってこともしてみたいな。

 

Day10: デザインカンプからのコーディング(横並びのカード)

<課題>

 

<感想>

 カード自体のコーディングは問題なくできて、Flexboxを使ってカード達を横並びにさせることもできました。

こんな感じです↓

display: flex;

flex-direction: center;

flex-wrap: wrap;

 

一番つまづいたのはタイトルの下にある短い線の実装で、疑似要素を使うということがググった結果わかりました。

 

 

 疑似要素はよくわかっていないところも多く苦手意識があるので、必要な時にその都度調べて少しずつ慣れていきたいです。

 

Day11: Perfect Pixelを使ってチェック&修正

<課題>

 

<感想>

Perfect Pixelでカンプと照らし合わせるとかなりズレてました。。

あと、Navigationバーの下の「Card」の下の赤線をhoverで付けてしまったのでチェックの時にはマウスホーバーできないから(レイヤーがかかっているため)確認できなかったけど、ホーバーは後で実装するみたいなので放置しました。

 

カンプの指示されている数値通りに作ったはずだったのに、Perfect Pixelで見てズレてたことにちょっとショックを受けましたが 、修正してカンプと位置がピッタリあったときの満足感はたまりませんでした。

 

最後に

デザインカンプの完成版をみると「自分にできるのか?」と不安を覚えましたが、各セクションごとに分けて日々課題を積み上げていくのでなんとかついて行くことができました。

 

また、今まで見て見ぬフリをしてきたCSSの疑似要素をカンプからのコーディング実践で使う必要が出てきたので、手を動かしながら疑似要素の理解も深めていきたいと思います。

 

*30DAYSトライアル1stの課題と感想のまとめも気になる方はこちらの記事をどうぞ↓

treatmyself.hatenablog.jp