どもです、TechAcademy WEBデザインコース22日目が終了しました。
今日の作業時間は9時間ぐらいです。
コーディング中心の一日でした。
なんと、課題で作成していたTOPページのコーディングが8割くらいは終了したのでそこは良かったかなと。
また、突然ですが僕のブログを良くして行きたいので今日はチョットやり方を変えてみようと思います。
試行錯誤大切ですから、、がんばります。
今日やったこと
- Lesson12【課題ガンガン】
- サイト分析
chot.design「Photoshop入門」- 読書＆ストレッチ
まーーーーーーたchot.designやってねぇじゃん!
Lesson12【課題ガンガン】
今日はメインコンテツ部分のコーディングを主に行い、TOPページは大体できあがったかなと言う印象です(よかったよかった)。
あれですね、コーディングしてると時が経つのを忘れちゃいますな。
作業中なかなかハマってしまった部分はこの記事の下に備忘録として書いているので良かったら読み進めてください。
コーディングをもっとサクサクすすめていける様になりたいので明日もひたすら手を動かす事に専念したいと思います。
サイト分析「webdesignclip」より
本日はギャラリーサイト「webdesignclip」から、こちらのサイト1件を分析しました。
こちら「SKINCARE LOUNGE BY ORBIS」のコーポレート・店舗サイトです。
白ベースにグレー系のアクセントカラーを選び、「清潔感・透明感」が演出されています。サイトに配置されたグレー系のグラデーションがいいアクセントに。
想定されているユーザーとしては
「20代から40代くらいでスキンケアなどにこだわりを持つ女性」
といったところかなと思いました。
サイトの中盤の店内紹介部分ではブロークングリッドレイアウトが採用されており、
ブロークングリッドにきちんと理由があるサイトって探してもあんまりないのでいい勉強になりました。
読書＆ストレッチ
かるーーーーーく、すこーーーーしだけどちらもやりました笑。
つまずき備忘録
今日の作業中、SP(スマートフォン)表示で簡単なカードを2列3行で表示したい部分があり、ハマってしまってごっそり時間を削られたのでここに残します。
つまずいた原因【カード部分のmarginでした】
CSSでスタイリングしたカードにmarginで余白を設定していたためflexで2列3行の指定をしても【カラム落ち】が発生し表示されなかった。
※flexboxで2列3行の指定方法はこの記事がめっちゃ参考になりました！
解決策【margin外してwidthは％で指定!】
とにかく今日みたいな場合は
- カードにmarginが追加されていないか確認する!
- 追加されていた場合はmarginの削除(追加されてなかったら知らん!)
- カードのwidthを%に切り替え少し小さくしてみる【width:50%→width:47%】
僕の「flexちゃん」だけアホなのかなってずっとモヤモヤしながら思ってました。
アホha,おまeだZe
明日のやることリスト
- Lesson12【下層ページに着手】
- サイト分析
- chot.design「Photoshop入門」
- 読書＆ストレッチ
ここ何日かやってることが変わらないので「リスト作成の意味あるんかなって」考えちゃいますが、一応書いておきます。
まとめ
最近ブログの記事がマンネリになってしまい「飽きた、、、」となっていたのですが、今日はじめて「つまずき備忘録」なるものを作成してみたところ意外と様になっていい感じかなって思ってます。
ブログ作成の負担は大きくなりますが、しっかり手を抜かず更新していこうと思います。しっかり作り込むほど愛情がでてくるので、もっと試行錯誤していきます!
ではまた！
コメント