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