WEB制作

模写コーディングを効率よく進める! 超便利なGoogle拡張機能4選

スポンサーリンク

PC浮遊

プログラミングを勉強中のみなさん、こんにちは!
今回は、模写コーディングに必要な、なおかつ便利なGoogle拡張機能を御紹介します。

Google拡張機能を使うとコーディングがスムーズにいきます。
そして、自分の知識が増えてとても勉強になります。

それでは見ていきましょう。

模写コーディングとは

模写コーディングとは、実際のWebサイトをそっくりそのまま実装することです。

なぜ、そんなことをするのか、というと、
実務に近い作業を想定できるからです。

私もそうですが、スクールや参考書で「ふむふむ」と理解したつもりでも、
この模写コーディングをいざ始めると、急に手の動きが鈍ります。

「あれ、これはどうやるんだっけ?」
「うまく表示できない・・・」

などなど、
とにかく調べる時間が多くなり、
「学習したことが全然身についてない・・・」
と錯覚に陥るほどです。

そして、
「これが本当のお仕事だったら、絶対納期に間に合ってない
と実感できるのです。

しかし心配はいりません。
これも慣れです。

複数こなすうちに、コードのイメージが、パッパッパと浮かぶようになります。
手の動きがスムーズになります。

おすすめGoogle拡張機能

前述のように、「最初はつまずくであろう」模写コーディングを助けてくる、
Google拡張機能を御紹介します。

言うまでもありませんが、ブラウザはChromeを使用する前提です。

Image Downloader

これは、サイトの画像を一度にまとめてダウンロードできる機能です。
一つのサイトに数多くある画像を右クリックで「名前をつけて保存」、
なんていちいちやってられません。

imagedl

このように、画像の一覧が出てきますので、「Select all 」にチェックを入れて、「Download」ボタンを押すと、自動的に全ての画像のダウンロードが始まります。

ColorZilla

ColorZillaは、色の値を取得できる便利な機能です。

起動させると、画像のようなバーが出現します。

colorzila

それと同時に、マウスカーソルが十字カーソルに変わります。

その十字カーソルを置いた箇所の色の値を取得できる便利な機能です。

色の表記であるrgbの値、#〜の値、両方表示されます。
そして、クリックすると、その色の値をコピーできる優れものなのです。

さらに、選択した要素の width と height も取得できちゃうんです。

色の値は見た目ではわからないので、こんな簡単にできちゃうととっても便利です。

Page Ruler Redux

これはサイト上で、自由に選択した範囲の width と height の値を取得できるんです。
クリックして起点を決めて、そこからドラッグして選択範囲を自由に決めます。

ruler

これで目的要素の高さや幅を計測できるのでスーパー便利です。

WhatFont

こちらは、サイト上の文字の上でクリックすると、画像のようにフォントの情報を全て取得できます。

whatfont

まとめ

模写コーディングは難しそうに感じますが、

これらの機能を使えばスムーズにに進めることができます。
自分の知識が深まりますし、調べる力もつきます。

拡張機能を有効に使って、効率のいいコーディングをしましょう。(って全然偉そうなことは言えませんが・・・・)

他にも便利な拡張機能があるかもしれませんが、ひとまず私はこの4つで不便なくやれています。

もし、「こんな機能あるよ」、と教えてくれる優しい方がいたら是非アドバイスください。
それではみなさん、共にプログラミング学習頑張りましょう。

レスポンシブデザイン



スポンサーリンク

-WEB制作
-, , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5