スポンサーリンク
模写コーディングに使うと便利なおすすめツールを紹介します!
全てGoogle Chromeの拡張機能として無料で使うことのできるサービスで、これを使うことでコーディングのスピードアップ間違いなしです!
Page Ruler(大きさ計測)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_245/https://the-popuri.com/wp-content/uploads/2020/07/3fb88637be32ac3a57bc0e8185e5d60b-1024x490.jpg)
Page Rulerは、Webサイトの要素をモノサシとして計測するツールです!
おおよその大きさにはなりますが、大きさを把握してから要素を検証ツールで見ていくととても便利です!
What Font(フォント確認)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_228/https://the-popuri.com/wp-content/uploads/2020/07/e83f1556c11c216071bcce0af8b9a14f-1024x455.jpg)
What Fontは、Webページに使われているフォントを確認することができます!
使われているフォントを知ることで、さらに精度の高いサイト模写ができるようになります。
Color Picker(色の取得)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_228/https://the-popuri.com/wp-content/uploads/2020/07/aa2935f821f2ca0b77cb88673a5d249d-1024x455.jpg)
Color PickerはWebページ内から色を取得できるツールです。
取得したい色の上へカーソルを持っていってクリックすると、カラーコードが表示されます。
そのままコピーもできるので便利です!
ここまで読んでくださりありがとうございました!
便利ツールを上手く取り入れて作業を時間短縮していきましょう!
それでは、また!