模写コーディング初心者のための進め方!〜事前準備編〜

こんにちわ、keikoです!

今回は模写コーディングの事前準備について紹介します。

模写コーディングするために何を準備すればいいんだろう?

一から始めるとなると何が必要なのか分からないですよね。

実際に使っているツールやおすすめの環境を紹介していきます!

keiko
keiko

少しでも参考なれば嬉しいです!

模写コーディングとは

実際にあるサイトの見た目をマネしてコーディングすることです。

progateや独学で基礎を勉強した方は実際に手を動かしてサイトを作る

模写コーディングはおすすめのアウトプット方法です!

事前準備

テキストエディタのダウンロード

テキストエディタとはコードを書くためのツールです。

もうすでにダウンロードしてるものがあれば使っているテキストエディタで大丈夫。

まだという方はよく使われているサイトを貼っておきます!

Visual Studio Code

Atom

Visual Studio Codeは私も使っています。

標準は英語ですが、日本語にもでき個人的には使いやすいです。

どちらもテキストエディタと検索した際に上位に出てきます。

keiko
keiko

無料でダウンロードできるので

2つとも試してみて

使いやすい方を選んでみるのもありですよ!

Google Chromeのダウンロード

コードを見るためのWebブラウザとしてGoogle Chromeが便利です。

ブラウザ上でコードを確認できる検証モードというものがあり

コーディングする上で必須の機能なので使っていない方は

ぜひダウンロードしてください。

Google Chromeダウンロード

keiko
keiko

次に模写コーディングするためにいくつか拡張機能を

ダウンロードしましょう!

おすすめの拡張機能

Awesome Screenshot 

サイト全体を一枚の画像として保存できる機能です。

模写をする際、ウェブ上でみながらでもいいんですが

スクショを撮ることでサイト全体を見ることができ

細部も確認できます。

ColorPick Eyedropper

サイトの背景だったり、文字の色など簡単に確認できます。

Download photo from Instagram

サイト内に使われている画像を一気に保存することができます。

一つひとつ画像かどうか確認しなくても、自動で認識してくれるので

めっちゃ便利です。

Page Ruler Redux

例えば文字と文字の余白がどのくらいか、要素自体がどのくらいの大きさかを

確認する際に便利です。

拡張機能のダウンロードはこちら👉chromウェブストア

Google Chromeの検証モード

冒頭で少し触れた検証モードについて簡単に紹介します。

起動の仕方

模写したサイトの画面上で左クリックを押すとオプションが表示され

一番下の「検証」クリックします。

するとこのような表示になるかと思います。

ちなみにショートカットキーは

Windows:Ctrl+Shift+I

Mac:Command + Option + I

またはF12でも起動できます。

keiko
keiko

F12で起動できるのは今回調べてみて知りました笑

ずらずらっと英語が書いてあってうわぁとなるかもしれませんが、慣れてくれば大丈夫です。

赤で囲っている部分に書いてあるのがソースコード(html)

右側の青で囲っているところがcssです。

模写をする際は、文字の大きさや色などを確認することもできます。

モバイル表示の確認

めっちゃ便利なのは、スマホでの表示も確認できるところです。

左下スマホのアイコンをクリックし、上のプルダウンメニューから

様々な大きさのデバイスを選択できます。

keiko
keiko

検証モードは、実務でも必須のツールなので

使い方に慣れておきましょう!

まとめ

いかがだったでしょうか?

最後まで見ていただきありがとうございます。

今回紹介させて頂いたツールや環境を押さえておけば

快適にコーディングができると思います。

私もまだまだなので一緒に模写コーディング頑張りましょう!

コメント

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