perilune-net　

Webスキルtips

チャレンジ・LP模写

Progateを終えて、Udemyのオンライン講座をやりながら、LP模写に取りかかりました。

どのサイトのLPを模写するか調べると、このサイトを模写している方がいて、できるか不安でしたが、後に続け！とチャレンジしました。

模写する際は「目コピ」が主流だと思われますが、開発者ツールを見ても良しとしました。見ても良しとした代わりに、元サイトはCSSで書かれていたところを、Sassで書くことで自分に課題をかけてみました。

chromeの拡張機能を使って、元サイトに近づけるよう模写しました。

  • Page Ruler Redex：web上の要素をピクセル単位で測る。
  • WhatFont：web上のフォントを調べる。
  • ColorPich Eyedropper：調べたい色のところにカーソルを持っていきクリック。カラーコードが取得できる。

PlaceIMG

リロードするたび画像が変わるこちらのサイトのソースを貼って、ちょっとオリジナル感を出しました。


 http://placeimg.com/

こちらのサイトを模写しました。

http://icedog.xsrv.jp/portfolio6/
perilune-net