鳩がITをくらったような顔

ITでうんとこしょどっこいしょ

Webサイトトレース2日目

昨日から引き続きトレースしていきます。

あ、ちなみにですが、マイルールとして本家のソースを見ずに書いていきます。

昨日の修正

メディアクエリの変更

768pxだけブレイクポイントを設定していましたが、スマホ用に600px部分にもブレイクポイントを設定しました。

本日の作業

NEWS部分の作成

幅768px固定でセンタリング。 中のテキストは中央寄せするだけなので簡単にできました。

f:id:ninebird:20171208201545p:plain

RELEASE部分の作成

幅100%内に画像3枚を並べます。 画像には仮の画像を差し込んでおきます。

f:id:ninebird:20171208201602p:plain

ここまでで85分使用。計3時間5分経過です。

COLUMN部分の作成

要素が多く組み合わさっているので時間がかかりました。 フレームのネストが深くなるとサイズの関係性保持が難しくなるので、親要素から丁寧にサイズ決めをしていく必要があると改めて感じました。 box-sizing様様です!

素材画像は仮の画像を差し込んでおきます。

f:id:ninebird:20171208201614p:plain

COLUMNで90分使用。計4時間35分経過です。

今日はここまで

本日のノルマ達成です。まだスマホ版のCSS適用もありますが間に合うのでしょうか?

次回はSERVICEとMEMBER部分を作成していきます。