HTMLとCSS 5

HTML&CSSイメージ HTML&CSS

今回、「模写コーディング」でチャレンジしているサイトはこちら
https://www.kneipp.jp/lp/yuzu/

このサイトは多くが画像で作られているので、比較的簡単にできるとのことでした…
が、やっぱり壁にぶち当たりました(まだ2/3くらいしか終わってませんが…)
まぁ、いままでに学習していないこともあるので、そこは調べながらです。

今回、一番気付かされていることは、「画像の位置指定」です。
パソコンの画面にフルサイズでブラウザ表示しながら位置調整をやって、見栄えが同じになるようにCSSで指定していたんですが、ブラウザの表示サイズを変えていくと画像があらぬほうへ動いてしまいました(画面の拡縮に合わせて画像が表示されず、どんどん位置がずれていく感じです)

画像の位置指定のやり方がまずかったよでうです。元のサイトのソースを確認しながら見直しを実施することで、何とかできそうな感じです。

まめに出来栄えを確認しながら、思っている結果にならなかった場合、いろいろ調べて、いろいろ書いたり書き方を変えてみたりすることで、どういう形で書けばいいのかが確認できます。
まめに確認しておかないと、どこが悪かったのかを確認するのに時間がかかってしまいます。

まめに見栄えを確認する。
表示サイズもいろいろ変えてみる(レスポンシブル以外にも気づくことがあるかも)
わからないところはきちんとコメントで残すことも大切です。

コメント