一生懸命準備中
一生懸命準備中
✪ 画像はランダムで表示されるようになっています。フリー素材などでご用意ください。
おすすめChromeプラグイン一覧
プラグイン名 | 特徴 |
---|---|
GoFullPage | ウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。 |
ColorZilla | 色を抽出するための拡張機能です。 |
WhatFont | ウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。 |
PerfectPixel | デザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。 |
模写の手順
ステップ | 内容 |
---|---|
ステップ 1 | 構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。 |
ステップ 2 | HTMLの基本構造を作成する |
ステップ 3 | CSSでレイアウトを模写する |
ステップ 4 中級〜 | JavaScriptを追加して動きを再現する |
ステップ 5 | 最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。 |