iSARA模写ツールの準備

HTML、CSSの勉強をしていて、あまり手応えがないなと思っていたところ、ふと見たサイトで「基本学習を終えたらサイト模写でコーディング練習」という記事を見て、これだ！ってことでやってみた。

iSARA模写！界隈では有名らしい。。

つまずいた箇所や困った部分をまとめていこうと思います。

まずはGoogle Chrome拡張ツールの準備

画面イメージの取得：Image Downloader

サイト上の画像を一括でダウンロードできる機能です。
Select allをチェックしてDOWNLOADボタンで一括ダウンロードができます。

取得した画像をHTMLに設定する。

サイト上のフォントを調べることができます。複数同時に確認できるので使いやすい。
調べたい文字をクリックするだけ。

取得したフォントサイズ等をCSSにコーディング。

マウスを当てた箇所の色の取得ができます。こちらも色情報をCSSにコーディング。

Webページ上のサイズをピクセル単位で把握ができます。CSSの縦横幅にコーディング。

無料の写真素材サイト。

これでツールの準備は完了。いよいよサイト模写でコーディング練習をしていきます。