tanatiyo 1つ目のデザインカンプの時と違い、2つ目のデザインカンプに取り組む時には、1つ目のカンプの時には気付かなかったこと、出来るようになったことがあります。
まだ作成中ではありますが、ここに気づいたことを書き記しておこうと思います。
①いきなり拡張機能を使って、ピクセルパーフェクトで無理矢理揃えにいかなくなった。
②デザインカンプデータを見たときに、まずは全体の構造を把握し、どこにどのような構造で箱を置いて、どういったCSSを充てようかざっくりと見通しを立ててからhtmlを組むようになった。またその際に、共通のCSSを充てられるものは出来るだけ共通のものが充てられるように、クラス名を工夫するようになった。htmlが見やすいように、コメントやクラス名の付け方を工夫した。
③CSSを充てる前に、レスポンシブデザインについて意識するようになった。htmlの段階でもレスポンシブを意識して構造を考えるようになりましたが、CSSはその比じゃないくらい、考えました＾＾；1つ目のデザインカンプでは少しでも幅を変えようなら、いろんな構造がガタガタになっていたので、「そうならないようにするにはどうすればいいのか」を意識して取り組みました。どうしても自分で解決できそうにない時は、参考になりそうなサイトを訪れてデベロッパーツールで中身をみました。そこのサイトと私がコーディングしているサイトは何が違うのかを意識しながら比較していきました。
④③をやっていて感じたのが、「自分のコーディングしているサイトをまずはデベロッパーツールでよく観察することが大事だな」ということです。正直、1回目のデザインカンプの時は触って表示やフォントの最終確認をしたくらいでした。でも、自分のサイトがガタガタになっている時って、デベロッパーツールで確認すると、「よく分からない空白」や「謎の領域」が生まれてしまっています（笑）とりあえず、ここからきちんと一つ一つ対処して空白をなくし、デベロッパーツールでパッと見てシンプルに分かりやすい領域になることを意識してみました。そうすると、なんと！！ガタガタがなくなりました！！(((o(*ﾟ▽ﾟ*)o)))この過程ってとても大切なことなんだとちゃんと実感できました。もしかしたら、デベロッパーツールでの検証や確認方法ってきちんとまとめてくださっている方がいるかもしれません。今度の隙間時間ではそれを調べてみようかな。。。
⑤これもレスポンシブに関することです。③は具体的にはボックスの概念やセンタリングを中心に考えていました。⑤では、スマホカンプを見たときに、「コンテンツが来てその後写真なら、flexboxのrow-reverseをPC用に充てた方がよさそうだな」と意識したりできるようになりました。アキユキさんの動画を事前に観ていたのも良かったと思います。
⑥fontについて意識して設定するようになった。特にline-heightやletter-spacingはXDデータをそのまま使ってはダメということが分かり、計算方法や単位の指定ができるようになりました。→今後の課題としてフォントのサイズをpxではなく、rem指定で（ユーザーの端末に応じた大きさになる、という認識であっているかな？）できるようになりたい。
⑦自分でも以外だと感じたのですが、width(max-widthも含む)やheightを指定していなかったことです。これら２つに具体的に数値を指定するのはレスポンシブで崩れる原因になるかもと考えて、あまり前向きになっていませんでした。パッと思いついて、しっかり指定していたのは、写真のwidthやヘッダー、フッターのwidth/height指定ぐらいでした。でもコンテンツ自体にもwithを指定しないと（単位も柔軟に扱えるように）、これはこれでレスポンシブが崩れている原因でもあったのです。このつまずき点はもしかしたら私特有のものかもしれません・・・＾＾；
アウトプット以上です！
特に④についてはデベロッパーツールで確認した際に出来るだけ修正が少なくなるようにすること、意識せずともパッと修正箇所がないようなコーディングができるようになりたいです。これからはどんどんレベルも上がってくるので、頑張って腕を磨いていこうと思います。