模写コーディングの練習12、パララックスを混ぜる和菓子のサイト

みなさんこんにちは、エンジニアのjonioです。

今回は和菓子サイトのデザインカンプです。

私が配布しているデザインカンプは難易度が難しく感じるかもしれませんがこれができたら拾ってくれる制作会社は絶対にあります。

説明しないといけないことが色々とあるので説明しますが全て読んでからコーディングに使ってください。

なおデザインカンプは1からありそれをやってないと色々と支障が出るのでそれをまだやってない人はやってから今回のデザインカンプを使うことをお勧めします。

模写コーディングの練習1、簡単なデザインカンプでやり方を知ろう

2021-11-26

コーディングに使う画像について

私が作った画像以外は写真ACとかの素材サイトを使っていますが著作権上配布ができない為画像のURLを掲載するのでそこから画像のダウンロードをしてください。

丸にくり抜かれている画像はクリッピングマスクで切り抜いています。

https://www.photo-ac.com/main/detail/22945519?title=%E5%92%8C%E7%B4%99%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%2F%E8%83%8C%E6%99%AF%E7%B4%A0%E6%9D%90

https://www.photo-ac.com/main/detail/23177951?title=%E5%9B%A3%E5%AD%90

https://www.photo-ac.com/main/detail/23294334?title=%E8%B1%86%E5%A4%A7%E7%A6%8F%E3%81%A8%E3%81%8A%E8%8C%B6

https://www.photo-ac.com/main/detail/23340390?title=%E3%82%8F%E3%82%89%E3%81%B3%E9%A4%85

https://www.photo-ac.com/main/detail/22401229?title=%E4%B8%B9%E6%B3%A2%E7%AF%A0%E5%B1%B1%E3%81%AE%E3%81%BE%E3%81%A1%E3%81%AA%E3%81%BF

https://www.photo-ac.com/main/detail/22200286?title=%E5%8F%B0%E6%B9%BE+%E6%9E%97%E7%99%BE%E8%B2%A8

https://www.photo-ac.com/main/detail/23294070?title=%E3%81%95%E3%81%8F%E3%82%89%E3%82%82%E3%81%A1%E3%81%A8%E3%81%8A%E8%8C%B6

https://www.photo-ac.com/main/detail/23317124?title=%E7%99%BD%E5%B7%9D%E9%83%B7+%E5%A5%A5%E5%B7%A6%E8%A1%9B%E9%96%80

https://www.photo-ac.com/main/detail/23002428?title=%E6%A8%AA%E6%B5%9C%E5%B8%82%E8%BE%B2%E6%9D%91%E7%94%9F%E6%B4%BB%E9%A4%A8%E3%81%BF%E3%81%9D%E3%81%AE%E5%85%AC%E5%9C%92%E3%83%BB%E6%A8%AA%E6%BA%9D%E5%B1%8B%E6%95%B7%EF%BC%88%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E6%A8%AA%E6%B5%9C%E5%B8%82%E9%B6%B4%E8%A6%8B%E5%8C%BA%EF%BC%89

https://www.photo-ac.com/main/detail/23241700?title=%E3%82%B3%E3%82%B9%E3%83%88%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8

https://www.photo-ac.com/main/detail/5096186?title=%E3%83%AC%E3%82%B9%E3%83%88%E3%83%A9%E3%83%B3%E3%83%BB%E3%82%AB%E3%83%95%E3%82%A7%E3%83%BB%E9%A3%B2%E9%A3%9F%E5%BA%97%E3%82%92%E7%B5%8C%E5%96%B6%E3%81%99%E3%82%8B%E7%94%B7%E5%A5%B3

https://www.photo-ac.com/main/detail/23009225?title=%E5%AF%85%E5%B9%B4+%E5%B9%B4%E8%B3%80%E7%8A%B6

私が作った画像は↓からダウンロードしてください。

マウスオーバーで変わる所

マウスオーバーした時に変化する部分の画像を掲載しますのでデザインカンプを注意して見てください。

↑の赤枠ですがフッターにも同じ様な内容（↓の赤枠です）がありますので同じ実装をしてください。

↓の赤枠と青枠ですが青枠はマウスオーバーした時に少し大きくなる実装をしてください。

マウスオーバーした時に大きくなる実装は↓の記事を読めば意味がわかるはずです。

https://weconet.co.jp/css_image_zoom/

商品3つに対して同じ実装をしてください。

↓の赤枠の画像ですがマウスオーバーした時に少し大きくなる実装をしてください。

枠線が一部しかないですがやり方が分からない人は↓の記事を読んでください。

https://qiita.com/7note/items/5cc706e215b4690a7b8f

読んでも実装できないなら枠線は付いたままでいいです。

↓の赤枠ですがマウスオーバーした時に画像が大きくなる実装をしてください。

↓ですがLINEだけマウスオーバーした時に変化する様にしていますが他のSNSのアイコンも同じ内容の実装をしてください。

↓ですがパララックスを実装してください。

パララックスが何か分からない人は↓の記事を見てください。

定番の実装内容なのでできる様にした方がいいです。

https://paralux.co.jp/blog/211

デザインカンプのURL

↓からデザインカンプを見てください。

https://xd.adobe.com/view/d14311c9-27c7-45fe-82bf-fb5f739eb168-8410/

●いいねをつけてもらえると励みになります。