模写コーディングの練習11、ファーストビューが強い清掃会社のサイト
PRE PAGE
HOME > 模写の練習 > 模写コーディングの練習11、ファーストビューが強い清掃会社のサイト
2022年05月22日

模写コーディングの練習11、ファーストビューが強い清掃会社のサイト

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

今回は清掃会社のデザインカンプです。

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

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

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

 

 

コーディングに使うサイトのロゴと他の画像

私が作成した会社のロゴと他の画像があるので配布します、↓からダウンロードしてください。

大阪商事株式会社のデータ (19 ダウンロード)

 

 

写真ACの画像データのURL

https://www.photo-ac.com/main/detail/23278301?title=%E9%9B%BB%E8%BB%8A%E3%81%AE%E6%95%B4%E5%82%99%E3%82%92%E3%81%99%E3%82%8B%E7%94%B7%E6%80%A7%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95

https://www.photo-ac.com/main/detail/23016212?title=%E4%BD%9C%E6%A5%AD%E7%9D%80%E3%82%92%E3%81%8D%E3%81%9F%E4%BC%9A%E7%A4%BE%E5%93%A1%EF%BC%88%E5%B1%8B%E4%B8%8A%E3%83%BB5%E4%BA%BA%EF%BC%89

https://www.photo-ac.com/main/detail/5096240?title=%E3%82%A8%E3%82%A2%E3%82%B3%E3%83%B3%E3%81%AE%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%82%92%E3%81%99%E3%82%8B%E4%BD%9C%E6%A5%AD%E6%9C%8D%E3%81%AE%E8%8B%A5%E3%81%84%E7%94%B7%E6%80%A7

https://www.photo-ac.com/main/detail/23042390?title=%E9%83%A8%E5%B1%8B%E3%81%AB%E3%81%84%E3%82%8B%E3%82%A8%E3%83%97%E3%83%AD%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E5%A5%B3%E6%80%A7

https://www.photo-ac.com/main/detail/23016208?title=%E4%BD%9C%E6%A5%AD%E7%9D%80%E3%82%92%E3%81%8D%E3%81%9F%E4%BC%9A%E7%A4%BE%E5%93%A1%EF%BC%88%E5%B1%8B%E4%B8%8A%E3%83%BB%E6%A8%AA%E9%A1%94%E3%83%BB%E3%82%AC%E3%83%83%E3%83%84%E3%83%9D%E3%83%BC%E3%82%BA%EF%BC%89

https://www.photo-ac.com/main/detail/4259648?title=%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%92%E4%BD%BF%E3%81%86%E5%A5%B3%E6%80%A7%E3%81%AE%E6%89%8B%E5%85%83

https://www.photo-ac.com/main/detail/4407731?title=%E3%83%8F%E3%82%A4%E3%82%BF%E3%83%83%E3%83%81%E3%82%92%E3%81%99%E3%82%8B%E3%83%9C%E3%83%A9%E3%83%B3%E3%83%86%E3%82%A3%E3%82%A2

https://www.photo-ac.com/main/detail/3331393?title=%E3%82%AC%E3%83%83%E3%83%84%E3%83%9D%E3%83%BC%E3%82%BA%E3%82%92%E3%81%99%E3%82%8B%E4%BD%9C%E6%A5%AD%E6%9C%8D%E5%A7%BF%E3%81%AE%E5%A5%B3%E6%80%A7

 

 

マウスオーバー時に変化する所

マウスオーバーした時に変化する所のスクショを貼るので注意してデザインカンプを見てください。

コーディング時にマウスオーバーした時に変化する部分

コーディング時にマウスオーバーした時に変化する部分

コーディング時にマウスオーバーした時に変化する部分

フッターにある上向きの矢印をクリックすると画面一番上に戻るスムーススクロールになっています。

コーディング時にクリックした時に変化する部分

マウスオーバー時の変化はスマホには設定していませんがpcの時と同じと思って下さい。

 

 

デザインカンプのリンクのURL

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

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