Web プログラミング

【もりけん塾58日目】「flower」さんのLPを写経2日目

フロントエンドエンジニアを目指している、ねこらのん(@nekoranon256)です。

 

昨日に引き続きflowerさんのサイトの模写をしました!

 

が、疑問に思うことがあったのでそれらをまとめていきます。

写経「flower」さんのサイト2日目:css編

flowerさんのサイトからお借りしています。

 

 

今日はcssをしました!

 

疑問①cssを写経しても表示されないのはなぜ

デベロッパーツールからcssを読み込み写経(コピー)をして、どういった並びがをやっていると…

  • デベロッパーツールから取れるcssをコピーして並びを作ったけどこのままコピーしても正しいものが完成するの?

というのも、cssを打っていっても全然表示されなくて…

 

疑問②このセレクタはなに…というものが多すぎる

cssを写経していて、以下のものが出てきました。

 

.pages_controller.home_action section.header{

引用:flowr

 

これは一体…何

 

プロパティや値は理解できてきましたが、セレクタにはカンマが多いし、これまでになかったものが多くて…

 

基礎中の基礎が知りたいので一旦、写経の仕方が間違っているのでは?と思ったので調べました!

 

写経の方法とは?

 

こちらの動画で説明がありましたが、youtubeの動画で最初は良いとありました。

 

理由は、通常のサイトのコードがややこしい部分があるからとのことでした。

 

flowerさんのサイトはわかりやすいと初心者の方が手を出すサイトのようですが、私にはまだレベルが高いようなので…

 

というか基礎中の基礎やコードの打ち方などが知りたいので一旦動画写経に変更して、そのあとflowerさんのサイト模写をしてみようと思います。

youtubeの写経動画でやってみたいもの

以前画像クリックでテキストが表示するものについて調べたときに模写をしました。

 

その際に、動画なので見えづらい部分もありましたが以下のものをやっていこうと思いました!

 

 

いくつか写経ができるものがあったのでこちらから。

おわりに

管理栄養士の試験勉強をしていたときに、基礎がしっかりできていないと応用が全然駄目で試験が解けない作りになっていたので、みんながしているからするではなく、自分の今求めているものと必要なものを探して一つづつクリアしていこうと思います。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada