ここ1週間ほど、娘たちが通っている保育園から登園自粛要請がきたため、家で保育しているため、なかなか時間が取れませんが、毎日少しでも時間をとってPCに向かおうと思います。
今日は、PC用の画面でレイアウトを充てて終わり、レスポンシブの調整に入りました。今日の作業時点で新たに気づいたことをまとめておきます。
①１つ１つの大きなセクションなどの固まりに、wrapperとinnnerなど、とりあえず２つの箱を用意して、1つは外側に、もう１つは内側に設置すると、センタリングや中身の配置調整がしやすいかなと思いました。外側の箱にはmax-widthとmargin: 0 auto;などの指定をして画面中央でのセンタリングを行い、内側の箱では、paddingやtext-alignの調整を行う、といった具合です。
②フォント周りの調整をremで行っているが、いちいち計算しているのでそこをもっと効率化できそう。
③「vh」の意味は理解しているものの、使いどころが分かっていない。とりあえず、今回ちづみさんのコーディング課題には背景画像に大きな画像があるので、そこに使ったほうが良さそうだが、まだ出来ていない・・・そういった意味でPC用のCSSコーディングが完全に終わったわけではない＾＾；
④レスポンシブで画像とテキストを横に並べてflexboxを使用している箇所では、テキスト部分にflex:1;を使用することで、よりレスポンシブに対応できそう。
⑤①を作る際に、paddingには単位を％で指定することでレスポンシブに対応しやすくなる。一応、そこの計算も手作業で、XDデータを見ながら、最大画面幅に対する余白部分の割合を計算して出している。
以上です。また気づいたことがあればまとめていきたいです。
ちなみに今日の作業時間は1時間程、ここまでトータルで8時間くらいです。
コメント