
【Codestep#01】入門編:プロフィールサイト/LP
こんにちは。コーディングの練習のためにCodestepを始めたのでその記録になります!
コーディングは言語。使わないとどんどん忘れていくので、短い時間でも出来るだけ毎日触れていきたいと思います☺︎
💡今回取り組んだ課題
⏩完成したサイトはこちら
初回ということもあり、手順の記事を見ながら一緒に進めていきました。
所要時間は1時間です。
✍️ 学んだこと
すっごくシンプルなサイトですが、想像以上に学びが多かったです!
HTML
・横幅のサイズを指定するために共通クラスをつける
CSS
・フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映される
・imgや最初からつく装飾などは最初にまとめて設定する
・line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
・画像の高さを「calc(100vh – 60px)」で計算することで、画面ピッタリに画像を収めることができる
clacは使いこなせるようになりたいですね…
HTML/CSSは結構慣れてきたものあって、新しい知見が増えるとワクワクします!次回から本格的にコーディング頑張っていきたいと思います。