ちづみさんの「コーディングの練習をしよう~その2~」実践中!4日目!

ここ1週間ほど、娘たちが通っている保育園から登園自粛要請がきたため、家で保育しているため、なかなか時間が取れませんが、毎日少しでも時間をとってPCに向かおうと思います。

今日は、PC用の画面でレイアウトを充てて終わり、レスポンシブの調整に入りました。今日の作業時点で新たに気づいたことをまとめておきます。

①1つ1つの大きなセクションなどの固まりに、wrapperとinnnerなど、とりあえず2つの箱を用意して、1つは外側に、もう1つは内側に設置すると、センタリングや中身の配置調整がしやすいかなと思いました。外側の箱にはmax-widthとmargin: 0 auto;などの指定をして画面中央でのセンタリングを行い、内側の箱では、paddingやtext-alignの調整を行う、といった具合です。

②フォント周りの調整をremで行っているが、いちいち計算しているのでそこをもっと効率化できそう。

③「vh」の意味は理解しているものの、使いどころが分かっていない。とりあえず、今回ちづみさんのコーディング課題には背景画像に大きな画像があるので、そこに使ったほうが良さそうだが、まだ出来ていない・・・そういった意味でPC用のCSSコーディングが完全に終わったわけではない^^;

④レスポンシブで画像とテキストを横に並べてflexboxを使用している箇所では、テキスト部分にflex:1;を使用することで、よりレスポンシブに対応できそう。

⑤①を作る際に、paddingには単位を%で指定することでレスポンシブに対応しやすくなる。一応、そこの計算も手作業で、XDデータを見ながら、最大画面幅に対する余白部分の割合を計算して出している。

以上です。また気づいたことがあればまとめていきたいです。

ちなみに今日の作業時間は1時間程、ここまでトータルで8時間くらいです。

この記事を書いた人