CSSのお勉強法 模写しろ!模写!
前編で問題になった子供問題は、嫁と家族会議。
嫁は在宅勤務で結構仕事があるので、完全に時間割性で
子供の面倒を見よう!と2人の時間割をしっかりと作る事にした
事で、まぁまぁマシになったので、とりあえずやや解決かな?
時間割制度いいですよ!
で、肝心のCSSの学習はドットインストールで見ながらが続きます。
最初はドットインストールで出てくるコードを
自分で手直しして、
例えば
margin: 10px 20px;
的な物を
margin: 30px 40px;
に書き換えてみて、「動いた!動いた!」
paddingならどう?なんてチマチマと動かして遊んでみました。
まぁまぁ理解は進みますが、なんかしっくりこない。
そこで1つホームページをちゃんと作ってみよう!
と思うに至りまして、簡単なホームページを作ってみようと思いましたが
アイデアっていきなり出てこないもんです。
簡単なホームページでも丸パクリしよう!
なんて思ってた時に出会った言葉が
模写コーデ
おおっ!やっぱりそんな学習考える人いるのねぇ。
なんて思って調べるとかなりスタンダードな学習法だったwww
最初に取り掛かったのは調べていくうちに見つけた
デイトラの模写コーデ。
デザイン見た時にはこう思いましたよ。
なんだ楽勝じゃないか♪
ふふふ、こんなの、ここをこうやって
そして、こうや、、やって・・・ん?
・・・・でも、あれれ?
・・・
・・
・
どうしたもんでしょうかねぇぇぇぇぇ(T_T)
楽勝じゃないんですよ!!
そっからまず、本当は理解していなかった
flexboxの動きなんかをドットインストールで再履修
でもよくわからん気がするのでググってググって
ほんとgoogle先生って物知り!
紆余曲折ありがながらも
いい感じの形にするまで4時間ぐらい格闘して
ようやく出来上がったのが
![](https://im-sosleepy.com/wp-content/uploads/2020/05/a6bebb57888f8c25fd386a0228812bb0-903x1024.png)
あえて、いまも手直しせずに残している最初の模写がここ。
まぁ、大体いい感じではあるんですが、細部がいろいろと甘いです。
CSSの書き方ももっとシンプルに出来るのは
4週ぐらいたった今ならわかりますが、この時点ではこれが精一杯
それでもこれぐらいが自力で出来るようなるのは
素直にうれしい
いい感じの成果を得れたので
CSSの学習法はここから模写コーデがメインになってゆきます!
並行してブログの設置
さて、CSSの学習と共に、
いつかはブログもやってみよう!
なんていい気になっている僕は
いろいろとwordpressに付いて下調べを始めました。
お勉強の時間と、そういった検索の時間を特に
決めたわけでもなく適当に交互にやりながら
なんとなーく、
WordPressでやるならドメイン取った方がいいんだな。
と思っていた矢先でした。
ロリポップサーバーが今なら1年分の費用が無料!
と言うキャンペーンをやってる事に、そこそこ夜更けに
気が付いちゃったわけです。
テンションの上がった僕は夜中の眠い時に一気にやり始めちゃったんです。
そんな顛末はこちら
人間勢いも大事です。
そんなこんなでバタバタしながらも
プログラミング学習は2週間ほど
割と集中して、進める事が出来まして
HTML+CSSに関しては思ったよりも順調に
学習が進んだ最初の2週間でした。