ISARA[イサラ]のレスポンシブデザイン模写終了。

f:id:gharuto:20200702135517j:image

ISARA[イサラ]のレスポンシブデザイン(スマホ画面)の模写が終了しました!

かかった期間は約半月。

pc画面と合わせると、イサラの模写に約2か月かかりました。

出来栄えはこんな感じ↓

f:id:gharuto:20200701095245p:plain
isara.life模写制作LP
f:id:gharuto:20200701095304p:plain
isara.life模写制作LP

この「受講の流れ」部分は、スマホ画面だとアコーディオンになってて戸惑いました。

一瞬アコーディオンにするのはやめようかと思いましたが、意地でやってみたら意外と簡単にでした。

jQueryはいじらず、pc画面で作った「よくある質問」のアコーディオンのclassをそのまま付けたらできました。

f:id:gharuto:20200701095351p:plain
isara.life模写制作LP

この「特典」部分もめんどくさかった。

pc画面とスマホ画面で文章が全然違うのでHTMLに追加し、

pc画面用の文章をdisplay:noneで隠し、

スマホ画面用の文章をdisplay:blockで表示しました。

あとはなぜか白色の文章の配置もうまくいかず、途中で妥協しました。

f:id:gharuto:20200701095436p:plain
isara.life模写制作LP
f:id:gharuto:20200701095452p:plain
isara.life模写制作LP

レスポンシブ(スマホ画面)の模写を始めたばかりは分からないことが多く進みが遅かったですが、

後半になるにつれてどんどん早くなっていきました。

スポンサーリンク

次の予定。

次はこちらのサイトを模写しようと思っています↓

PAS-POL -旅のモノづくりブランド-|TABIPPO

なぜこのサイトかというと、Bootstrapで作れる部分があるらしいからです。

実はBootstrapも少し勉強してました。

勉強といってもユーチューブやドットインストールを見た程度ですが、「どんなものなのか、どんなことができるのか」はざっくり理解できました。

Bootstrap、ずっと気になっていたので次の模写で少し使ってみたいと思います。

 

テックアカデミー無料体験はこちら↓
TechAcademyの無料体験

コメント

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