【サイト模写】簡単にWebサイトを模写する方法


はじめてサイトを模写すると時間がかかります。

・余白をあわせないといけない
・色をあわせないといけない
・文字サイズをあわせないといけない

じつは、そんなことしなくていいんです。

最初の模写は、一番簡単なサイトを選び、それをさらに簡単な仕様に変更して作ればいいのです。

最初の模写で大事なのは「サイトを作ってみる」ことなのです。

今回つくることのできるサイト
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

/* 共通クラス */

* {
box-sizing: border-box;
}

img {
width: 100%;
vertical-align: bottom;
}

 

kv(キービジュアル)のCSS

.kv { margin-bottom: 10px; }

.content のCSS

.content {
border: 10px solid #666;
background: #fff;
margin-bottom: 10px;
padding: 10px;
}

.content h2:first-of-type {
margin-top: 0;
}

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 {
padding-left: 20px;
width: calc(100% – 210px);
}

li {
margin-bottom: 8px;
}

.pic {
width: 200px;
margin-left: 10px;
}

 

footer のCSS

footer {
background: #999;
text-align: center;
}

footer p {
color: #333;
padding: 5px;
font-size: 14px;
}

 

完成です。ブラウザで表示してみます。

まとめ

最初にやるサイト模写は、仕様変更してOKです。

10時間以上かけて作るより、1時間ていどで終わるくらいのサイト模写を何度かやって、得意なパターンを作りましょう。

複雑に見えるサイトも、簡単なレイアウトの組み合わせなのです。

余白もフォントサイズも色も適当で!

それが、最強のサイト模写をする方法です。

\シェアしていただけると嬉しいです。/



慣れてきたら「目指せ10分!タイムアタックコーディング」もオススメです。

【道WEB】目指せ10分!タイムアタックコーディング