プログラミング学習日記

【プログラミング学習日記③】2回目の模写と写経を終えた感想

こんにちは。まつもとです(@matsumoto_54111)。

今回は最近行ったプログラミング学習について書いていこうと思います。
前回の【プログラミング学習日記②】で書いたのですが、最近はサイト模写と写経を行っていました。

以下のことについて書いていきます。

  • サイト模写で難しかったところ
  • 写経して良かったこと
  • 今後学習すること

サイト模写で難しかったところ

これは前回も書いたことなのですが、今回私が模写したサイトはこちらです。
kneipp(クナイプ) (https://www.kneipp.jp/lp/yuzu/

入浴剤の特設サイトなのですが、画像がとても多くてシンプルなものです。
一度模写を挫折したことがあるので、まずは簡単なものを模写して自信をつけたいと思いこのサイトに決めました。割と短い時間で模写を終えられたのではないかと思います。

その中で特に難しかったことは、画像を上手くつなげることです。

このサイトには、画像をいくつかつなげて枠を作り、その中にいくつかの要素を表示させる必要があります。
実際のコードはCSSのbackground-imageプロパティでrepeat-yを使ったり、疑似要素をつかったりして画像を表示させ、枠を完成させていました。

私はというと、background-imageで表示させるのではなくHTMLのimgタグを何度も書いて画像を連続させてしまいました。その後CSSで何とか画像をつなげてそれっぽく表示させるというやり方をしました(笑)
プロの方からしたら何してんだって感じかもしれませんが、初心者なのでお許しください。^^;
とにかく学ぶことが大事だと思うのでどんどん失敗していこうと思います。

また、上記のこと以外だと、
JavaScript・jQueryなどのまだ学習していないことも結構使われていたので、初めて実際のコードを見たときは「なんだこれ!」って思いました。
でも今後JavaScript・jQueryなどの学習をする予定なので、いったんスルーします。

今のサイト模写での目標は”HTML/CSSの知識を定着させる”こと。
Progateや書籍で学んだことをきちんと活かせるようになりたいと思います。

写経して良かったこと

今回の写経で主に以下のことを学べたと思っています。

  • パーツの分け方
  • divの囲み方

パーツの分け方については、最近Webサイトを見る時にはどんなパーツ分けをされているのか意識するようになりました。

divの囲み方についてはまだまだ学ぶ必要があるなと感じました。
私のコードを見るとdivの数が明らかに少ないんです。プロのコードを見ると、色々な要素に同じクラスをつけてCSSで装飾することが当たり前に行われていますよね。
私はまだそれが上手くできていないなと思います。

上手く言葉にするのが難しいのですが、今後も学習を続けて、後々CSSを書きやすく・見やすくするような効率的なdivの書き方を身に着けていけたらいいなと思います。

今後学習すること

これから、今回のサイトより難しいものの模写を1つか2つ挑戦し、その後JavaScript,jQueryなどの新しいことを学習していこうと考えています。
(状況に応じて変える可能性もありますが、学習記録は引き続きブログに綴っていきます。)

新しい知識を身に着けて、できることが増えるのは楽しいですね。
これからもコツコツ学習します!

おわりに

さて、今回はプログラミング学習日記を書いていきました。

まだまだ知らないことばかりで「ほんとにこんなんで仕事ができるようになるんだろうか…」なんて一瞬考えちゃうこともありますが、すぐに切り替えて「いいからとりあえずやってみよう!」の精神で頑張ってます。^^

最後まで読んでいただいて、ありがとうございました。
だいぶ寒くなってきましたので、皆さま風邪に気を付けてお過ごしくださいね。^^