こんにちは!コーダーを目指し学習中のあーやといいます。
はやく前へ進みたい!そんな気持ちで、数をこなしていく目標でした。
しかし、レスポンシブ時の崩れ、ピクセルパーフェクトの想像以上の大変さ。
そこで、難易度を下げて、なおかつ余白の取り方や、レスポンシブの崩れをないようにしたい!
また、レベルを段階的に上げて、実際はどのような流れで行うのかも知りたい!
(知らないと不安)
コーティング練習をして、ポートフォリオ作成もしていきたい!
そこで、前回の投稿でもお話ししたのですが、
しょーごさんの演習課題にチャレンジすることにしました!
https://note.com/samuraibrass/n/n2108f5f03dd8
- 演習課題取り組んだ結果
- 反省、次回に向けて
①演習課題取り組んだ結果
インナー要素について考えたり、XDデザインカンプからのコーティング方法について
学びました。
②反省と次回に向けて
横だけではなく、縦中央に要素を寄せることが苦労していました。
横は、text-align:center;や
margin-right:auto;
margin-left:auto;
を親要素に追加するものだと思いましたが、問題は縦。
今回、flexboxを使って中央に寄せましたが、未対応でうまく表示されないこともあり、
また、解答を確認すると、別の方法を使っていました。
次回はflexbox以外の方法を試してみます。
また、横並びのブログカードでは、
カードの幅を解答ではcalcを使って調整していました。
私はwidth:310px;のようにかいていたので、反省(-_-;)
calcの使い方も調べてもっと使っていきたいと思います。
また、レスポンシブ対応のコードは下にまとめて書いていたのですが、
解答をみると、要素ごとに書いていました。
とてもやりやすそうなので、次回この方法でコードを書いてみます!
次は初級Ex編にトライしてみようと思います!
最後までお読みいただきありがとうございました!