【初心者】初めてのLP模写のやり方と所感

プログラミング

おはこんばんちわ

valです

 

今回LPを初めて模写したので

そのやり方と模写するにあたって感じたことを書いていきます

これからLP模写するぞという方やどうやってやるのかわからない

といった方の参考になれば幸いです

 

結論だけ先に言ってしまうと

まぁじで難しいけどすげぇ成長できた気がします

 

LP模写するまでにやったこと

まずはLP模写にどの段階で突入したか紹介します

Progate
・HTML & CSS 初級・中級(2周)
・HTML & CSS 上級
・HTML & CSS 道場コース 初級・中級
・JavaScript(ES6) Ⅰ~Ⅳ
・jQuery 初級~上級
以上です
Progateしかやってません
ドットインストールもほんの少しだけやりましたが
2,3個動画見てほぼ内容被ってるなと感じたのでそれ以上やってません
実際できてしまったので
Progateかドットインストールのどちらかを一通りやっておけばできそうです

LP模写をする前の準備

次に実際にどのようにLP模写を行っていったのか紹介します

 

まず予め用意しておいたものですが

・テキストエディタ

以上!

 

最悪テキストエディタを用意しなくてもメモ帳でできますが

流石になんかかっこ悪いやりにくいのでプログラミング用のテキストエディタを用意しましょう

ちなみに自分はAtomを使用しました理由はドットインストールで使われていたからです

あとはSublime textなんかがよくオススメされていますが

初心者のうちは違いとかよくわからないと思うのでどちらでもよいかと

 

ちなみにAtomはこんな感じです

なんかプログラミングしてる感が感じられてワクワクしますね

 

LP模写する際のルール

次にLPを模写するにあたりルールを設定してきましょう

ルールを設定しておかないと成長できないので

・フォントのサイズや色は確認してもよい
・画像はダンロードしてよい
・背景の色や画像のサイズは確認しても良い
・わからない部分はググってもよい
・ソースコードを直接確認するのは不可
要するにソースコードを直接確認さえしなければ何してもオッケーというルールです

LP模写の手順

ようやくここからLP模写を実際に行っていきます

今回はこちらのLPを模写しました

PAS-POL

こちらはよくLP模写の初心者向けとして紹介されていますね

 

フレームのレイアウトをコーディング

まずは全体をいくつかの要素に分けて

おおよそのサイズを決めてフレームのレイアウトを書きました

画像・テキストの配置

次にテキストや画像を見本のように配置しました

見た目だけならこの時点でほぼ出来上がりですね

ただしここではまだリンクやhoverした際の動作はしてません

floatで揃えるのがめんどくさすぎたので

途中でFlexboxについてググって使ってみました

 

すげぇ便利ですねFlexbox

LP模写する前にこちらの記事を一通り目を通しておくといいと思います

とても参考になりました

日本語対応!CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており

 

ページ内リンクとjQueryコーディング

実際のPAS-POLのページではリンクは別のページに飛ぶようになってましたが

今回はページ内の該当箇所にスクロールするようにしました

アニメイトメソッドが動かない問題が発生しましたが

タダの誤字でした・・・

 

いやーほんと誤字脱字が多くて

エラーは吐かないものの意図したとおりに動かない事が多くて

大変でした

 

今回はレスポンシブの実装はしなかったのでこれで完成です

今回模写したLPはGoogleDriveにアップしたのでよろしければ見てやってください

val's portfolio - Google ドライブ

誰か添削とかしてくれると嬉しいなー (チラッチラ

 

初めてLPを模写して思ったこと

正直0からコードを書くということを甘く見てました

くっそ難しかったです

時間にして15時間位かかりました

 

Progateをこなすだけならヒントも多くサクサク進むので

もしかして自分結構できるのでは?

とか思っちゃってましたが全然書けませんでしたね

 

ただこの一回のLP模写だけでもレベルアップした感覚が感じられました

LP模写まじでおすすめです

ある程度HTML、CSS、jQueryでできることを把握した段階でLP模写に入ってしまって良いかと

 

やはり自分で考えながら手を動かすことに勝る勉強はないなと感じました

次はBootstrapの勉強をしたら次のLP模写に移りたいと思います

次はレスポンシブ実装もしたいですね

 

それでは

コメント

  1. […] 【初心者】初めてのLP模写のやり方と所感おはこんばんちわ valです 今回LPを初めて模写したので そのやり方と模写するにあたって感じたことを書いていきます これからLP模写するぞとい […]