tanatiyo 今日で完成させたかったんですが、日付超えてしまいそうなので、先にブログに作業メモを残しておこうと思います。ここまで、トータルで17時間くらいです。
～気づいたこと( ..)φメモメモ～
①ヘッダー部分をfixedでtop:0;とleft:0;を当たり前のように指定していたが、大画面表示の時は中央配置されないので、top:0;のみで指定するのが良い。
②大きな背景画像の高さは、XDデータから1画面の高さに対して、その画像の高さの割合を計算して指定した。
③セレクタを複数指定してスタイルをあてる場合、セレクタの指定方法でしっかりと親子関係を意識して指定しないと（親子関係を明確にせずただ「,」だけで繋げて指定していた）、そのセレクタの一部に要素が含まれていた場合、全ての要素に適用されてしまうことになるので気を付ける。
例：
.dog3-ttl-inner>time,
.dog3-ttl-inner>span,
.dog3-ttl-inner>p {
display: inline-block; line-height: 42px; font-size: 1rem;
}
④背景画像が拡大されたまま表示されてしまっている。レスポンシブ対応時の画像の修正も含め、ピクセルパーフェクトを目指そうと透過画像を重ねていった時に、予想以上に画像の修正に時間が取られた。
⑤出来れば、カンプを始める前にXDデータから分かる内容は紙に書き出した方が良さそう。縦横比や何度も見返しそうなデータは書き出してからの方が、スムーズに仕事が出来そう。
以上です。残りはレスポンシブ対応部分と最後のセルフチェックになります。これが意外に時間を取るのですが、丁寧にやっていこうと思います。