はじめてサイトを模写すると時間がかかります。
・余白をあわせないといけない
・色をあわせないといけない
・文字サイズをあわせないといけない
じつは、そんなことしなくていいんです。
最初の模写は、一番簡単なサイトを選び、それをさらに簡単な仕様に変更して作ればいいのです。
最初の模写で大事なのは「サイトを作ってみる」ことなのです。
今回つくることのできるサイト
https://practice.michiweb.net/practice-simple/
目次
- 模写するサイトを選ぶ
- サイトを印刷してマークアップ の設計図を書く
- 簡単な仕様にする
- コーディングする
- まとめ
模写するサイトを選ぶ
簡単なサイトを選びます。
今回は下記の画像をダウンロードして模写してみましょう。
https://practice.michiweb.net/time-attack-01-view/
画像？って思いましたか？
いいんです。最初の模写サイトには、以下の作業がいらないからです。
・デベロッパーツールを使ってフォントサイズや余白を測らなくていい
・カラーピッカーツールで色を調べなくていい
だって。模写だから。
自分で余白や色を仕様変更して作りなおせばいいんです。
サイトを印刷してマークアップ の設計図を書く
模写するサイトを印刷して、マークアップ の設計図を書いてみましょう。
サイト画像の印刷はプリント1を使います。
https://webnaut.jp/tools/print1/
印刷した紙の余白に、マークアップ の設計図を書きます。
簡単な仕様にする
余白やテキストや画像などを簡単な自分仕様に変更して、印刷する。
細かく設定してもいいし、コーディングしながらでも良いです。
＜基本のオススメ仕様＞
・余白は5pxか10pxの倍数
・画像はplaceholderで代用
・テキストは適当
・色は3〜5種類にする
＜大枠（赤枠）の仕様＞
div.container
・width:800px;
・padding:10px;
・backgrand:#ccc;
＜中枠（青枠）の仕様＞
.kv(h1)
・margin-bottom: 10px;
.content
・border: 10px solid #666;
・background: #fff;
・padding: 10px;
footer
・background: #999;
＜小枠の仕様＞
h2
・margin-top: 20px;
・margin-bottom: 10px;
・padding: 10px;
・border-left: 5px solid #f00;
・background: #999;
・color: #fff;
・font-size: 20px;
・line-height: 1.3;
p,ul,li
・font-size: 16px;
・line-height: 1.6;
.blog
display: flex;
ul
width: calc(100% – 210px);
.pic
・width: 200px;
・margin-left: 10px;
footer p
・color: #333;
・font-size: 14px;
＜全体の仕様＞
全て
box-sizing:border-box;
img
width:100%;
vertical-align: bottom;
コーディングする
初期ファイルを作成してから、HTMLを書きます。
それがおわったら、CSS書いて完成です。
初期ファイルを作る
「practice」フォルダの中に、「index.html」「style.css」「reset.css」を作成しましょう。
こちらからダウンロードもできます。
https://practice.michiweb.net/time-attack.zip
HTMLを書く
HTMLやCSSファイルの入ったフォルダを、エディタで開きます。
次に、「style.css」と「reset.css」を読み込みます。
エディタは「Visual Studio Code」（マイクロソフトが開発）がおすすめです。
https://michiweb.net/cre-vscode/
大枠、中枠くらいのタグを記述します。
（中枠）h1.kvのセクションを書いていきます。
ブラウザで表示してみる
（中枠）div.contentのセクションを書いていきます。
ブラウザで表示してみる
（中枠）footerのセクションを書いていきます。
これでHTMLは完成！
CSSで装飾する
reset.cssは「html5doctor」を使用しています。
style.cssを記述していきます。
共通のCSS
kv（キービジュアル）のCSS
.kv { margin-bottom: 10px; }
.content のCSS
footer のCSS
完成です。ブラウザで表示してみます。
まとめ
最初にやるサイト模写は、仕様変更してOKです。
10時間以上かけて作るより、1時間ていどで終わるくらいのサイト模写を何度かやって、得意なパターンを作りましょう。
複雑に見えるサイトも、簡単なレイアウトの組み合わせなのです。
余白もフォントサイズも色も適当で！
それが、最強のサイト模写をする方法です。
\シェアしていただけると嬉しいです。/
慣れてきたら「目指せ10分！タイムアタックコーディング」もオススメです。
【道WEB】目指せ10分！タイムアタックコーディング