Webページの模写で詰まったら部品ごとに作ろう

システムエンジニアについて知る

・Webページの模写をしているけどなかなか進まない・何から始めたらいいかわからない

という悩みを解決する為の記事です。

Webページの模写をするなら部品単位で分けて作成しましょう。

なぜなら自分が理解していない点が明確になるからです。

以下のツイートをしたらそこそこの反響がありました。

このツイートの内容を具体的に説明します。

Progateは何周したらいいですか?という問いに対する答え

Webページ模写ができないのは基礎学習が足りないからではない

基礎学習
模写を始めると何をやっていいかわからずいきなりフリーズする人も多いと思います。

私も初めて模写をした時はフリーズしました。

フリーズしてしまう原因は何でしょうか?

それはページ全体を見てしまうからです。

全体を見て模写しようとするとどこから手をつけていいかわからなくなり、フリーズします。
まずは、ページを部品に分けて考えましょう。

「模写全然できない。基礎学習が足りないんだ、もうProgateもう一周してくる」

というツイートをたまに見かけますが、フリーズしたら基礎学習に戻るのは間違いです。

ここで思考停止してProgateの周回を重ねたり、目的もなく参考書を読み直すのはやめましょう。

部品化すれば模写は難しくない

Webサイトは部品化すれば理解しやすいです。

かなりざっくりとした図ですが、Webページのレイアウトは以下の通りです。

Webページレイアウト

図にある通り、Webページは以下の部品に分けることができます。
・ページのフレーム(部品を入れる容れ物)
・ヘッダー
・コンテンツ(1個〜ページによって数は異なる)
・フッター

一つのページとして見るとなかなか理解しにくいですが、ヘッダー・フッター・コンテンツのように部品単位で考えれば割と単純な構造です。

部品単位で考える

模写をする時も部品単位で作成して、最後はフレームにはめ込めばOKです。

Webページ模写の方法

模写の具体的な方法を説明します。(後日、もう少し具体的な方法に修正予定)

わからない点が出てきた場合はググって作りましょう。

ページのフレームを作成

最初に「ページのフレーム」を作成します。
HTML形式でファイルを作成して、head部分を記述しましょう。

各部品を作成

ヘッダー・フッター・コンテンツのコードを書く為のファイルを作成します。

必要なHTMLとスタイルを作成しましょう。

部品を組み合わせる

フレームファイルに作った部品のコードをコピーします。
サイズや位置のずれがある場合はCSSを調整しましょう。

記述した内容やCSSを観察

ページ全体や部品単位でHTMLコード・CSSを観察しましょう。
・どんな部品で構成されているか
・どこまでがヘッダーでどこまでがコンテンツか
・色や位置・サイズを変えるにはどうすれば良いか

などページの構成要素やCSSの使い方を観察しておきましょう。

模写は完璧でなくても良い

模写という言葉から全く同じレイアウトで作った方が良いと感じるかもしれませんが、そんなことはありません。
だいたい元のページと同じになっていればOKです。

色や位置の調整に時間を使う必要もありません。
画像もだいたい同じサイズのものであれば何でも良いです。

コンテンツも全て再現しなくても良いです。
ヘッダー・フッター・重要だと思うコンテンツ2つくらい作れればOKです。

完璧に再現できなくて挫折するくらいなら適度なところで終了しましょう。

完璧に作るよりもページを数作ってページ構成や部品を頭に入れることが大切です。

まとめ

Webページ全体を見ると圧倒されフリーズしますが、Webページはいくつかの部品で分けて考えれば簡単に模写できます。

部品単位で考えればどこが理解できていないかも見つけやすいです。

理解できていない部分は後で復習しておきましょう。

模写は完璧でなくても良いです。元のページとだいたい同じ構成になっていればOKです。

完璧を目指さずに数をこなしてページのパターンを理解しましょう。

関連記事>>Webサイト模写まで進んだらProgateは卒業しよう
関連記事>>note:プログラミングの基礎学習は繰り返しても上達しない

コメント

タイトルとURLをコピーしました