[HTML/CSS]模写コーディングにあると便利なツール3選

未分類

こんにちは、ななです。

今回は、模写コーディングに便利なツールを3選、紹介します。

私はフロントエンドエンジニアとして働いていて、
模写コーディングの経験もあります。

本記事は、模写コーディングを初めて行う方に向けた記事になります。

すでに何度か模写コーディングを行っている人にも、役立つツールだと思うので、
ぜひ使って試してみてください。

HTML/CSSの模写コーディングに便利なツール

Image Downloader

Image Downloader
Browse and download images on the web

模写サイトに使われている画像を一括でダウンロードできるChromeの拡張機能です。

使い方は簡単です。

模写に使うサイトで、ChromeImage Downloaderをクリックします。

「Select all」にチェックを入れて、Downloadをクリックすれば、
サイトに使われている画像を一括でダウンロードできます。

これで、いちいち画像を一つずつダウンロードする必要がなくなります。

open in browser

Visual Studio Code(VSCode)の拡張機能で、
コマンド一つで、HTMLのファイルをChromeに反映させることができます。

今までは、VSCodeに書かれたHTMLをChromeに表示させるときは、
マウスでドラッグ&ドロップしないといけませんでした。

しかし、この「open in browser」を使うと、
コマンド「alt + B」でChromeに表示できます。

VSCodeの拡張機能の検索欄で、「open in browser」と入力すれば出てきます。

Digital Color Meter (Macのみ)

こちらは、画面上の色を16進数で表示してくれるスポイトツールです。

Digital Color Meterを使うことで、模写サイトの色を測定することができます。

例えば、以下の場合だと、色彩コードは
#781118
であるとわかります。

このツールはMacbookに標準で備わっている機能で、
「Launchpad → その他」のフォルダ内にあります。

コメント

タイトルとURLをコピーしました