見出し画像

サイト模写

あけましておめでとうございます。
せっかくの8連休、前半は会いたい友達に会って
後半は勉強しようと思ってたのに、
1/1から高熱を出し寝込むと言う休みになりました。

体調も戻ったのでLPサイト模写。

写真がたくさん入っていて、見やすいのと、
お茶漬け専門店流行ってんなぁと思ってなんとなく選んだサイト。
http://shibaraku-jp.com/

縦書きにして、Googlefontを使うとなぜか小さい「っ」だけ
めちゃくちゃ詰まる。
letter-spacingとline-hightで調整しても上手くいかなった。
また原因を探そう。

メインイメージは見ているデバイスによって自動的に高さを
決めてくれるjsを入れてみました。

バックグラウンドを斜めににするのは調べて
skewを使って要素を斜めにしました。
http://www.htmq.com/css3/transform_skew.shtml

before,afterのオンパレード。

1年前ならこのサイトを絶対できなかったなぁ。きっと。
どうなって、こうなってるのか、Googleの検証機能を使って調べる。
調べると意味がわかるので、できる。

もっと正確に早くできるように今年はもっと頑張ります。

ここ1ヶ月の目標はpaddingやmarginをremでできるようになる事。
今日中にもう1サイトくらい模写しよう。

画像1


この記事が気に入ったらサポートをしてみませんか?