模写コーディングの練習10、実務レベルの廃棄物処理会社のサイト

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

今回は廃棄物処理会社のデザインカンプです。

難易度が難しく感じるかもしれませんがこれができたら拾ってくれる制作会社は絶対にあります。

写真の配布ができないので写真AC、イラストACからダウンロードするかデザインカンプのリンクでスクショを撮ってください。

使った写真のURLをつけます、コーディングの際はクリッピングマスクをしてトリミングしてください。

使った写真のリンク

写真のURLは↓になります。

https://www.silhouette-illust.com/illust/26084

https://www.silhouette-illust.com/illust/10132

https://www.silhouette-illust.com/illust/48339

https://www.silhouette-illust.com/illust/41114

https://www.silhouette-illust.com/illust/7542

https://www.photo-ac.com/main/detail/3545110?title=%E5%A4%96%E3%81%A7%E3%81%97%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8%E3%81%AE%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E3%82%92%E6%8F%8F%E3%81%8F%E5%AD%90%E4%BE%9B%E3%81%9F%E3%81%A1

https://www.photo-ac.com/main/detail/4192979?title=%E6%89%93%E3%81%A1%E5%90%88%E3%82%8F%E3%81%9B%E3%81%99%E3%82%8B%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%82%A6%E3%83%BC%E3%83%9E%E3%83%B3

https://www.photo-ac.com/main/detail/23222185?title=%E5%A4%A7%E9%87%8F%E3%81%AE%E3%83%9A%E3%83%83%E3%83%88%E3%83%9C%E3%83%88%E3%83%AB%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%83%9701

https://www.photo-ac.com/main/detail/22681159?title=%E8%A6%AA%E5%AD%90%E3%81%8C%E6%8A%B1%E3%81%88%E3%82%8B%E5%9C%9F%E3%81%A8%E5%9C%B0%E7%90%83

https://www.photo-ac.com/main/detail/4401607?title=%E6%8F%A1%E6%89%8B%E3%81%99%E3%82%8B%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%83%91%E3%83%BC%E3%82%BD%E3%83%B3

https://www.photo-ac.com/main/detail/22265643?title=%E7%B4%A0%E6%9D%90%EF%BC%88%E3%82%B4%E3%83%9F%E7%AE%B1%EF%BC%89

https://www.photo-ac.com/main/detail/22999248?title=%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E3%81%AE%E7%B2%97%E5%A4%A7%E3%82%B4%E3%83%9F

https://www.photo-ac.com/main/detail/834840?title=%E7%82%B9%E6%BB%B4%E3%81%AE%E9%87%9D

https://www.photo-ac.com/main/detail/22408075?title=%E5%88%9D%E5%BF%83%E8%80%85%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%BB%E4%BB%AE%E5%85%8D

https://www.photo-ac.com/main/detail/4020539?title=%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%88PDCA%29

https://www.photo-ac.com/main/detail/2715421?title=%E9%80%9A%E5%A4%A9%E9%96%A3%E3%81%A8%E8%A1%97%E4%B8%A6%E3%81%BF

スムーススクロールの設定とGoogleマップ

スマホ画面でなぜかスムーススクロールが効かないのでここで指示を出しますがPC画面でスムーススクロールを実装しているのをスマホにもそのまま使ってください。

「ACCESS」のセクションにマップがありますがデザインカンプ上では画像になっていますがこれはGoogleマップなのでコーディングの時にはGoogleマップを埋め込んで下さい。

ロゴのデータとデザインカンプのリンク

ロゴは私が作ったので配布します、↓からダウンロードしてください。

デザインカンプのリンクはここになります。

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