概要
模写コーディングを始めるに当たり必要なツールと、プロジェクトを作成して作業を開始するまでの流れを紹介します。
Chromeアドオンのインストール
以下のツールがあれば十分と思います。
1. Image Downloader
ページ内の画像を全て保存するツール
※ background-imageはchromeのDeveloperToolから手動でダウンロードする必要あり。
[https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja&]
2. What Font
利用されているフォントの調査用
[https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja]
3. Page Ruler Redux
要素や空白のサイズ調査用
[https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=ja]
4. ColorZilla
カラーピッカー
[https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja]
5. (PerfectPixel)
完成品と模写対象の画像差分を確認するためのツール。
ピクセルパーフェクトを目指す場合のみ必要。
[https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja]
プロジェクトの作成
Webサーバーには「browser-sync」を利用し、ファイル保存時にリロードされるようにしながら開発を進めます。
[https://browsersync.io/]
1. プロジェクトのディレクトリ作成
$ mkdir sample
$ cd sample
2. browser-syncのインストール
$ yarn add --dev browser-sync
3. yarnスクリプト追加
# package.json
{
+ "scripts": {
+ "watch": "yarn browser-sync start --server --files *.html, *.css, *.js"
+ },
"devDependencies": {
"browser-sync": "^2.26.14"
}
}
4. index.html追加
# index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> test </body>
</html>
5. watch開始
Webサーバーを起動します。デフォルトでは「http://localhost:3000/」 が環境のURLになります。
$ yarn watch
6. Rest CSSの読み込み
Reset CSSには色々ありますが、今回は「normalize.css」を利用しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
+ <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
</head>
<body> test </body>
</html>