XDデザインからのコーディング初級編

 こんにちは!コーダーを目指し学習中のあーやといいます。

 はやく前へ進みたい!そんな気持ちで、数をこなしていく目標でした。

 しかし、レスポンシブ時の崩れ、ピクセルパーフェクトの想像以上の大変さ。

 そこで、難易度を下げて、なおかつ余白の取り方や、レスポンシブの崩れをないようにしたい!

また、レベルを段階的に上げて、実際はどのような流れで行うのかも知りたい!

(知らないと不安)

 コーティング練習をして、ポートフォリオ作成もしていきたい!

 そこで、前回の投稿でもお話ししたのですが、

しょーごさんの演習課題にチャレンジすることにしました!

https://note.com/samuraibrass/n/n2108f5f03dd8

  1. 演習課題取り組んだ結果
  2. 反省、次回に向けて

①演習課題取り組んだ結果

 インナー要素について考えたり、XDデザインカンプからのコーティング方法について

学びました。

 

②反省と次回に向けて

 横だけではなく、縦中央に要素を寄せることが苦労していました。

 横は、text-align:center;や

margin-right:auto;

margin-left:auto;

を親要素に追加するものだと思いましたが、問題は縦。

 今回、flexboxを使って中央に寄せましたが、未対応でうまく表示されないこともあり、

また、解答を確認すると、別の方法を使っていました。

 次回はflexbox以外の方法を試してみます。

 また、横並びのブログカードでは、

カードの幅を解答ではcalcを使って調整していました。

私はwidth:310px;のようにかいていたので、反省(-_-;)

calcの使い方も調べてもっと使っていきたいと思います。

 また、レスポンシブ対応のコードは下にまとめて書いていたのですが、

解答をみると、要素ごとに書いていました。

 とてもやりやすそうなので、次回この方法でコードを書いてみます!

 次は初級Ex編にトライしてみようと思います!

 最後までお読みいただきありがとうございました!