当ブログ使用テーマ「SWELL」を見てみる

【導入必須】模写の必須ツールをインストールしよう

・HTML&CSSの基礎が終わって模写に挑戦したい
・必要なツールって何だろう?

以上の疑問にお応えします。

こんにちは、なおです。

今回はLP模写に必須なツールについて解説します。

目次

必須ツール:GoogleChrome拡張機能

模写コーディングの効率を上げるために必要なツールは以下の4つです。

➀Image Downloader(画像を取得する)
What Font(字体を調べる)
Page Ruler(幅を調べる)
Color Picker(色を調べる)

では、1つずつ見ていきます。

Image Downloader

Image Downloader」ではサイト内に使用されている画像をまとめて取得することが出来ます。

使い方

今回は例として、この記事で写真を取得します。

サイト上でグーグルアカウントの左にあるパズルの様なマークをクリックします。
Image Downloader」を選択しましょう。

画像が出てきました。

Sellect all」をクリックします。

Download images」が出てきました。
これをクリックすればダウンロード完了です。

勿論、個別選択でダウンロードすることもできます。

What Font

What Font」ではサイト上の文字のフォントを調べることが出来ます。

使い方

同様に「拡張機能」から「What Font」を選択します。

そしたら、調べたい文字の上でクリックします。

今回は記事内の「こんにちは、なおです。」という文字を調べてみます。

こんな感じに文字情報が出てきます。

Page Ruler

Page Ruler」では要素の高さや幅を調べることが出来ます。

使い方

同様に起動します。

例として、サイトタイトルの「NAOBLOG」の大きさを調べてみます。

該当箇所にカーソルを合わせて、ドラッグします。

すると、こうなります。

widthやheightが出てきました。

これをもとにCSSでデザインをしていきます。

Color Picker

Color Picker」では色の識別をします。

使い方

同様に起動します。

カーソルを調べたい箇所に持っていきます。

今回はNAOBLOGのメニューの色を調べましょう。

こんな感じで色のコードが出てきます。

※スクショの時にカーソルが消えるみたいです。ごめんなさい。

まとめ:拡張機能を追加して効率的に模写をしよう

模写に必須なツールをまとめると

➀Image Downloader(画像を取得する)
What Font(字体を調べる)
Page Ruler(幅を調べる)
Color Picker(色を調べる)

でした。

これらのツールは模写だけじゃなく、自分のポートフォリオや案件のサイトを作成する時にも重宝します。

練習の段階で便利な機能に慣れておきましょう!

では、また!

よかったらシェアしてね!
目次
閉じる