【Webコーディング模写】12月分-1 まとめ
成果物
スクリーンショット
動画
カンプ読み取り勘違い、ヘッダー部分のコンテンツ幅が全体と統一されてなかった😅
— ふーしゃ@web (@fuchsia_84) 2019年12月18日
(absoluteでleft150pxとか設定していた)
修正済みスクショ。
こういうのすり抜け注意..._φ(･_･ pic.twitter.com/pzC5ilg9Yp
制作期間
12/17 4.5h (12/18微修正)
学習項目
HTML/CSS
- header分の高さ調整(padding-topでの対応)
- 要素の中央配置(margin,calc)
- 要素横並び(display:inline-block/float)
- 偶数番目、奇数番目でCSS切替(疑似要素nth-child odd even使用)
- フォント"YuGothic"指定
XD
- 共有urlから要素内容・サイズ・レイアウト情報取得
まとめと感想
10月分3つめの課題として行ったnoteがデザイン変更して更新されていたので、12月の1つ目として。
前回は合計12時間かかっていたところ、今回は4.5時間に短縮されました！ほぼすべてが復習内容でありデザインの更新箇所によって楽になった部分もあったけど(特にCAT3コンテンツの折り返し部分の調整が難しかったのが軟化していた)、成長を感じられて嬉しかった。
ただ、翌日になってからカンプを読み取る時に勘違いをして、header部分のコンテンツ横幅を他と別にしていた事に気付いた... 結果をまとめて発信する前に気付きたかった部分。 そういう取りこぼしのないように気をつけたい。
