お疲れ様です。
今回から見本通りに幾何学模様を3つ作成する課題に取り組んでいきます。
既に2日前から始めていましたが、進捗報告をしていなかったため現状までをまとめて書きます
1つ目は要素を横に並べて、中央ぞろえにするといったものです。
見本と何度も見比べましたが、親要素の20%にちゃんとなっているのでしょうか…？
見本の方はもう少し横長いような気がしましたが…
2つ目は positionタグを使って見本通りに配置するものです。
htmlは撮り忘れています。
少し前に positionタグを扱っていたので、コードもすんなり書けましたが、赤線部分の、基準にしたい親要素に relativeを指定しなければならないことを知らずにコードを書き、一番上の四角が上ギリギリに位置していて、なんでだ？
とずっとにらめっこしていました
relative と absolute が逆だったっけ？とか思いながら何度か書き直すも見本のようにならなかったため、素直に復習しこういったルールがあることが発覚しました。
3つ目も2つ目と同じように、 positionタグを使って作るものでした。
直前まで positionタグを使っていたので、3つ目はほぼ時間がかからずにできました。
3つとも作成できたので、各模様に間を作って、ひとまず完成です。
今回の課題を進める中で、コードを書いたのに反映されないということや、marginの相殺など起こりましたので、cssのルールについてもよく調べて原因をつきとめようと思いました。
何が原因かを知っていれば対応できることもあると思いますし、こういう経験をしておくことも大事だと思いました
相殺については、今回もchatGPT先生にお世話になりました。
