ISARA[イサラ]のレスポンシブデザイン(スマホ画面)の模写が終了しました!
かかった期間は約半月。
pc画面と合わせると、イサラの模写に約2か月かかりました。
出来栄えはこんな感じ↓
この「受講の流れ」部分は、スマホ画面だとアコーディオンになってて戸惑いました。
一瞬アコーディオンにするのはやめようかと思いましたが、意地でやってみたら意外と簡単にでした。
jQueryはいじらず、pc画面で作った「よくある質問」のアコーディオンのclassをそのまま付けたらできました。
この「特典」部分もめんどくさかった。
pc画面とスマホ画面で文章が全然違うのでHTMLに追加し、
pc画面用の文章をdisplay:noneで隠し、
スマホ画面用の文章をdisplay:blockで表示しました。
あとはなぜか白色の文章の配置もうまくいかず、途中で妥協しました。
レスポンシブ(スマホ画面)の模写を始めたばかりは分からないことが多く進みが遅かったですが、
後半になるにつれてどんどん早くなっていきました。
次の予定。
次はこちらのサイトを模写しようと思っています↓
なぜこのサイトかというと、Bootstrapで作れる部分があるらしいからです。
実はBootstrapも少し勉強してました。
勉強といってもユーチューブやドットインストールを見た程度ですが、「どんなものなのか、どんなことができるのか」はざっくり理解できました。
Bootstrap、ずっと気になっていたので次の模写で少し使ってみたいと思います。
テックアカデミー無料体験はこちら↓
TechAcademyの無料体験
コメント