プログラミング学習始めて半年が経ちました。
あっという間ですね。
最初の頃は勉強してる感があったのですが、
模写始めてからはなかなか進まず、学習が停滞している感じがします。
気づいたら半年経ってしまいました。
現在はISARAの模写中なんですが、ISARA長い…。
まだ3分の1も終わってないかもしれません。
今のモチベーションとしては、「案件を取ろう」という感じではなく、「のんびりとプログラミング学習すればいいや」という感じです。
そもそも私は案件にさける時間があまり取れないので、期日を守るには相当早くコーディングできるようにならないといけません。
案件で稼げるようになるには1年以上かかるかもしれません。
ISARAの進み具合。
ISARAの進み具合はこんな感じです↓
SNSボタンはフォントオーサムを使い自分で作りました。
「エンジニアとして～」の「」部分は、50×50pxのdivを作り、positionで位置を決め、borderで線を書きました。
「稼ぐ力」部分のアンダーラインは、borderで作りましたが見本とは少し違っています。見本だとbackgroundで作っているみたいです。
「ABOUT」の円は結構難しく、少しテクニックがいります。
positionで配置したのですが、positionした要素にもmargin:autoで真ん中寄せできることを初めて知りました。
ポイントはposition:absoluteにleft:0とright:0を指定することと、
widthをちゃんと指定すること。widthを指定しないとビヨーンと横に伸びてしまいます。
参考↓
position: absolute;を中央寄せする方法 | コトダマウェブ
約2週間でこの程度の進みです。かなりのんびりしたペースです(^^;
模写に便利なツール。
模写に便利なツールがあることを知りました。
それは、
- Color Pick Eyedropper（サイト上のカラーコードを簡単に取得できる。）
- What Font（サイト上のフォント種類・サイズ等を簡単に取得できる。）
です。
いずれもchromeの拡張機能で、無料で使えます。
こちらのYouTubeを参考にさせて頂きました↓
iSara模写！WEB製作に便利なツール3つ紹介！
Image Downloaderはすでに使っていました。
「よくわかるHTML5+CSS3の教科書 第3版」の本を買いました。
HTML CSSは一応基礎学習終えてますが、やはりまだわからない事が多い。
ということで気になっていた本を買ってしまいました。
これです↓
「よくわかるHTML5+CSS3の教科書 第3版」。
これはHTML CSS学習では割りと有名な本だと思います。
ざっと全体を流し読みしてみたのですが、難しい。
字も小さめでボリューミーなので、最初からひとつひとつ読んでいくと大変です。
読み方としては、最初に全体を流し読みし、気になった所をじっくり読んでいくのがいいと思います。
初心者がいきなりこれでHTML CSSの学習を始めたら挫折するんじゃないでしょうか。
ある程度HTML CSSを学んだ人向けだと思います。
ざっと読んだなかで参考になったのは「ディセンダ」です。
東急リバブルの模写をしてる時に謎の余白が出来てしまったりしたのですが、それがおそらくこのディセンダです。
ディセンダとは画像などの下に余白が出来てしまうものなんですが、vertical-align：bottomを指定すれば無くなります。
今まで学習してきたなかで「ディセンダ」なんて出てこなかったので、新しい発見です。
以上、プログラミング学習半年の途中経過でした。
ココナラでも模写コーディングのサポートしてます↓
コメント