背景
普段は業務でサーバサイドエンジニアとして従事しているため、マークアップを0から行うことがほとんどありません。
ただ、Web開発に関わる人間としてフロントエンドの知見も多少なりとも保持しておきたいと思い、HTML/CSSを復習してみようと思いました。
前提として、HTMLのタグ、CSSのプロパティについての知識はあります。
何をやるか？
世に公開されているWebサイトをトレース（= 模写）しようと思います。
そして、ただデザインをトレースするのではなく、HTML/CSSを書いてマークアップをしてみます。
コーディングトレースを経て、そのサイトがどんなデザイン・構造のもと作成されているのかを理解していきます。
下準備
事前に過去にコーディングトレースをしてきた方々がどんな方法を用いて、コーディングをされてきたのかを調べておきます
※ 本記事は実際にコーディングはせず、調査のみになります。
やること
必要なファイルを用意します
- index.html
- main.css
フォントがわかる拡張機能を追加
フォントもこだわるべきではあるのですが、文字を睨めっこしてフォントを探り当てるのは本質的ではないので、一旦今回はGoogle Chromeの拡張機能「WhatFont」に頼ることにします。
画像の一括ダウンロードツールを追加
フォントに加え、画像のダウンロードも時間短縮したいものです。 今回は、サイト上の画像を一括保存できるGoogle Chromeの拡張機能「Image Downloader」で画像を一気にダウンロードします。
ただし、この拡張機能は背景として用いられている画像については保存が出来ないようになっています。
その際は、デベロッパーツールなどでコードを確認して保存する必要があります。
Image Downloader - Chrome ウェブストア
色の抽出ツールを追加
さらに色の判別もGoogle Chromeの拡張機能におまかせします。
用いるのは、「ColorPick Eyedropper」です。
ColorPick Eyedropper - Chrome ウェブストア
