【DAY5】ゼロからサイトを作る
この章から実際に手を動かしてコーディングを行います。
コーディングする前に準備を行います。CSSを読み込んだり、reset.cssをstyle.cssの前に持ってくるように気を付けましょう。コードが上から読まれていくので、効かせたいstyle.cssが読み込まれてからreset.cssが読み込まれてしまいcssがリセットされてしまいます。
サイトの全体像を把握する
まず、作りたいLPやサイトの全体像を把握します。
header、section、footerなどにどこからどこまでがその範囲なのかをきちんと理解します。
模写するときも必要な大事なことだと感じました。
floatを理解する
✅なくそう！floatわけわからん！の壁！
— ちづみ (@098ra0209) January 16, 2019
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr
上記のツイートがかなり参考になります。floatを図解してわかりやすいです。なぜclearしないといけないのか
子要素が親要素をはみ出してしまう原因と対処法が乗っています。
【DAY6】ゼロからサイトを作る
Flexboxを理解する
Flexboxを理解すると、横並びや右右揃え、左揃えなどをfloatを使用しなくても実現できます。floatはもう使わない、これからはFlexboxしか使わないという記事もありますが個人的にはfloatも理解して置いた方が既存のコードの改修でコードリーディングするときに役立つと思います。
だから、floatも理解しているし、Flexboxも使いこなせる状態が理想です。
WebデザイナーのManaさんがFlexboxのチートシートという便利なものが配布されているので参考にしてください。
スペルミスをしないように仕組み化する
スペルミスをしないように気をつけるよりも仕組みで解決した方が確実にミスを減らせます。
VS Codeのプラグインを導入することでスペルミスを可視化します。そうすると、ミスしている箇所が一目瞭然なのですぐに自分がミスしているかどうかがわかります。
【DAY7】ゼロからサイトを作る
画像の上に文字を載せる
画像の上に文字を載せるにはbackground-imageを使用します。
レスポンシブ対応にする
レスポンシブ対応とは、PC表示しかできていないLPをスマホ表示やiPadにも対応できるようにしようということです。
レスポンシブに対応するには、メディアクエリとブレイクポイントが重要です。
@media screen and (max-width:768px)のように書いていきます。ここでは、max-widthを767pxに指定して、767pxよりも以下だったら、これ以降のコードを読み込むようにします。
【DAY8】ゼロからサイトを作る
ここでは、HTML/CSSのコーディングの復習をしました。目標は4時間です。自分で0からコーディングをします。
iPhoneのストップウォッチを使って何時間でコーディングできたのかを測ってみると腕試しになっていいと思います。
ちなみにぼくは2時間かかりました。人によってはそれ以上かかってしまうかもしれませんが、それでも調べながら自分でコーディングすることで力になるし、ググっている間に勉強になります。
【DAY9】ゼロからサイトを作る
Emmetを復習した
Emmetのチートシートを読み返してまだ覚えていない箇所を復習しました。Emmetを使わずにそのままコーディングしてしまいますが、一度覚えてしまえばかなり早くコーディングできて時間短縮になるので、おすすめです。
最初に覚えておくと後から覚え直す必要がなくなります。自転車の運転みたいに体で覚えてしまえば楽ですね。
ショートカットキーを覚える
windowsやマックに限らずPCにあまり慣れていない人は、ショートカットキーを机の上などの必ず目に入る位置に置いておきましょう。
ぼくはMacを使用しているので、下記にMacのショートカットキー一覧を載せておきます。
それと個人的にinlineとblockの違いを復習したかったので、サルワカさんの記事が参考にしました。
コメント