iSara.life模写制作LP
iSaraのLPを模写コーティングして制作しました。
今回作成した模写LP:
制作時間：55時間
元ページ：
最初にオリジナルのポートフォリオを作成しましたが、基礎的な事をある程度飛ばして作成した部分もあり、粗削りな部分もありました。
それでも、作成できた事に喜びを感じ、さらにスキルを上げて次のポートフォリオを作成して、実務で生かせるようになりたいと思っていました。
ですので、最初は模写コーディングを行う事をためらいました。
すでにWebページを作成した経験があるから、次の新しいスキルを使用したポートフォリオを作成できるようになりたいと思い、新しく作成するポートフォリオ(JavaScriptの(canvas)を使用したアニメーション)に向けて頑張っていましたが、見事に詰まってしまいました。
一度離れて復習したり、別のところを勉強したり等、あまり身についた気がせずどうしていいかわからない状態が続きました。
そんな中、何をしていいか分からなく、何かしていないと落ち着かないという気持ちに駆られながらの日々が続いたある時、同じプログラミングを学習している方たちも模写コーディングをしていると聞きました。
最初は後戻りをするのは嫌と思いながら、現状停滞しているわけにもいかないので改めて自身も模写コーディングを始めました。
LPをまだ作ったこともないですし、そういった意味でも新しいことに挑戦という意味合いにもなり、スキルの見直しにもなるという事で始めました。
以前よりはわかるものの、実際にやって見ると意外と分からないことが多くありました。
そんな中でも特にレスポンシブ対応のサイトの作り方について改めて気付くことが多くありました。
・widthやheightなどのpxの固定値や%の違い
作り始めた時、大体はpxで使用していた。悪くはないがこれを使用すると、ブラウザなどでウィンドウを小さくしたりすると、大きさが固定されて画面のサイズに合わせて全く伸び縮みしない。％だとウィンドウに合わせて各要素の大きさが変化するので、レスポンシブのサイトを作らなくても多少の画面サイズだったら対応できることに気づいた。
・display: noneを使用する方法
レスポンシブサイトを作る時、基本的にHTMLは特に変更しないで作れるから便利な部分もある。だが、どうしてもHTMLを変更しなければならない時(例えばテキスト文字はCSSで対応できない)このプロパティを使うとかなり便利になる。
例えば、
767 (minwidth)の時(画面サイズが767以上の場合)：
<p class="pc>新年のあいさつ>
<p class="rp>2021年の挨拶>
これを768以上の時は新年のあいさつに、それ以下の場合は2021年の挨拶にしたい場合があったとする。
だけどこれだと、HTMLなので両方表示されてしまう。
その時に便利なのがdisplay: noneだった。
例えば上のみを表示させたいときは、class rpのCSSをdisplay:noneにすればよい。
そうすれば、レスポンシブサイトを作るときにHTMLを変更する事が可能になる。
・各タグやclass属性などはなるべく部品ごとに分ける
コードを書くときにはなるべく簡潔に書くのは当たり前である。
なので重複部分がある場所は、CSSのプロパティでクラスをまとめて記述したり、
テキスト文字を書くにしても複数行ある場合、一行ごとにクラスを指定して書くと大変手間がかかる。
なるべく簡略化するのが一般的だが、レスポンシブサイトを作るときはなるべくまとめずにCSSの記述やクラスなどを部品ごとに分けたほうがいい事に気づいた。
こんな事を言うと語弊があるかもしれないが、スマホサイトは単純に画面が小さくなったから、全体的に文字の大きさや画像を小さくすればいいわけではない。
例えば、横に並んでいる要素をを画面の大きさの表現方法によっては縦に並べて表示させなければならないこともある。
だから、単純にPCで表示されたのを小さくすればいいわけではない。
例えば上記の文章を借りるとすれば、
<p class="row1"・各タグやclass属性などはなるべく部品ごとに分ける
コードを書くときにはなるべく簡潔に書くのは当たり前である。
なので重複部分がある場所は、CSSでクラスをまとめて記述したり、/p>
これだと確かに三行まとめて処理ができるし簡単だが、いざスマホサイトを作るときはそうもいかない場合がある。スマホサイトのよっては上の2行だけ続けて表示させて、
最後の行は文字を大きくして行間を取りたいといった事が発生する場合もある。
なのでレスポンシブサイトを作るときはあらかじめ意識をして作らないとPCサイトも
改めて作成し直す部分も出てくる。
今回、作成してみて感じたのは改めて基礎の大切さを知ることが出来ました。
記事の中には、復習ばかりしててもスキルが身につかないから実践をやるべきといった事も見受けられました。
実際にその通りだと思います。
ですが、またその反対に基礎が出来てないと実践で出来ない事もあります。
成長の仕方は人それぞれ違うので、今回の様に焦るあまり次の技術に行こうとしてしまったという事が原因で停滞してしまったと思います。
確実に前に進んでいることを意識しつつ、不安のあまり状況に流されずに日々頑張っていきたいと思います。