勉強記録#3 2023.5.14(日)
今日取り組んだこと
Codestep入門編 Profile制作
作成期間
2023.5.12(金)〜5.14(日)
概要
プロフィールサイトのLPを作成
コンテンツ幅
コンテンツの横幅は960pxで横のパディングは4%です。
メインビジュアルだけ全幅にします。
メインビジュアル
全幅で高さは600px固定です。
About
画像をCSSで丸く切り抜きます。
画像とテキストを横並びの中央寄せで配置します。
Bicycle
画像を両端ぞろえの横ならびに配置します。
レスポンシブ
ブレークポイントは600pxです。
About、Bicycleともに、レスポンシブ時はコンテンツを縦積みにします。
成果
初めてサイトを作成して、なんとか完成しました！
特に画像を並べ、画面表示のサイズに合わせて画像の大きさが拡大縮小するように設定することが難しかったです。。
最初は、完成のデモサイトを見ながら作成し、
完成後、正解のコードを確認しながら、答え合わせをしました。
間違えた箇所、変更箇所
1.先に、HTML/CSSの大まかなコーディングをする
→特に、ここが重要だと思いました！
大枠を設定せずにコーディングしていたので、各パーツごとにマージンを設定したり、横幅を設定したり、手間がかかってしまいました。
2.class="wrapper"をコンテンツの箇所に設定し、サイズやマージンの設定をまとめて行う
→1つ目の項目に引き続き、同じクラスを設定し、まとめる作業が必要だったなと思いました。
3.レスポンシブ対応は、各パーツごとに設定していく
4.画像を画面幅小さくする際に、同時に拡大縮小するようにする
→％で横幅を設定（pxは絶対値だからはみ出る）
ここがうまくいかず、800pxぐらいから画像が崩れてしまうという問題が起こっていました。。
max-width:100%;で設定するということを学びました！
学んだこと
特に重要だと学んだことは、最初に全体の構造のメモを取り、大枠のHTML/CSSを設定するということです。
私は、上から順番に都度都度、クラスを設定して、コーディングしていたため、手戻りがあったり、とても時間がかかりました。
次回から、学びを活かして、効率の良いコーディングを目指していきます！
この記事が気に入ったらサポートをしてみませんか？