見出し画像

【Codestep#01】入門編:プロフィールサイト/LP

こんにちは。コーディングの練習のためにCodestepを始めたのでその記録になります!
コーディングは言語。使わないとどんどん忘れていくので、短い時間でも出来るだけ毎日触れていきたいと思います☺︎

💡今回取り組んだ課題

⏩完成したサイトはこちら

初回ということもあり、手順の記事を見ながら一緒に進めていきました。
所要時間は1時間です。

✍️ 学んだこと

すっごくシンプルなサイトですが、想像以上に学びが多かったです!

HTML
・横幅のサイズを指定するために共通クラスをつける

CSS
・フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映される
・imgや最初からつく装飾などは最初にまとめて設定する
・line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
・画像の高さを「calc(100vh – 60px)」で計算することで、画面ピッタリに画像を収めることができる

clacは使いこなせるようになりたいですね…
HTML/CSSは結構慣れてきたものあって、新しい知見が増えるとワクワクします!次回から本格的にコーディング頑張っていきたいと思います。

いいなと思ったら応援しよう!