Edy's Hub

プログラミング・シェアハウス・ライフスタイルについて書き綴っています

コーディングトレースにチャレンジ

背景

普段は業務でサーバサイドエンジニアとして従事しているため、マークアップを0から行うことがほとんどありません。

ただ、Web開発に関わる人間としてフロントエンドの知見も多少なりとも保持しておきたいと思い、HTML/CSSを復習してみようと思いました。

前提として、HTMLのタグ、CSSのプロパティについての知識はあります。

何をやるか?

世に公開されているWebサイトをトレース(= 模写)しようと思います。

そして、ただデザインをトレースするのではなく、HTML/CSSを書いてマークアップをしてみます。

コーディングトレースを経て、そのサイトがどんなデザイン・構造のもと作成されているのかを理解していきます。

下準備

事前に過去にコーディングトレースをしてきた方々がどんな方法を用いて、コーディングをされてきたのかを調べておきます

※ 本記事は実際にコーディングはせず、調査のみになります。

やること

必要なファイルを用意します
  • index.html
  • main.css
フォントがわかる拡張機能を追加

フォントもこだわるべきではあるのですが、文字を睨めっこしてフォントを探り当てるのは本質的ではないので、一旦今回はGoogle Chrome拡張機能「WhatFont」に頼ることにします。

WhatFont - Chrome ウェブストア

画像の一括ダウンロードツールを追加

フォントに加え、画像のダウンロードも時間短縮したいものです。 今回は、サイト上の画像を一括保存できるGoogle Chrome拡張機能「Image Downloader」で画像を一気にダウンロードします。

ただし、この拡張機能は背景として用いられている画像については保存が出来ないようになっています。

その際は、デベロッパーツールなどでコードを確認して保存する必要があります。

Image Downloader - Chrome ウェブストア

色の抽出ツールを追加

さらに色の判別もGoogle Chrome拡張機能におまかせします。

用いるのは、「ColorPick Eyedropper」です。

ColorPick Eyedropper - Chrome ウェブストア

参考サイト

shibaken.org

haniwaman.com